【 Container 】將 Vue 在執行階段注入環境變數並透過 Docker Hub 部署到 Azure Container App

內容

學習目標
前置準備作業
專案目錄結構
建立 Vue
建立 .env
建立 nginx.conf
建立 entrypoint.sh
建立 Dockerfile
建立 Docker Image
於本地端執行 Docker Image
測試與驗證一
上傳 Docker Image 到 Docker Hub
建立與部署 Azure Container App
測試與驗證二
修改 env
測試與驗證三

學習目標

如何將 Vue 在執行階段注入環境變數並透過 Docker Hub 部署到 Azure Container App

前置準備作業

已建立 Azure 帳號並能正常登入
已於電腦端安裝 Vue
- https://vuejs.org/
已於電腦端安裝 IDE
- 本範例使用 Visual Studio Code
已於電腦端安裝 Docker
- https://www.docker.com/
已建立 Docker Hub 帳號
- https://hub.docker.com/
已於電腦端安裝 AZ Cli
- https://docs.microsoft.com/zh-tw/cli/azure/install-azure-cli

專案目錄結構

├── node_modules
├── .env
├── Dockerfile
├── babel.config.js
├── entrypoint.sh
├── nginx.conf
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    └── main.js

建立 Vue

Step 1. 在 App.vue 建立以下內容

建立 .env

Step 1. 在 .env 建立以下內容

建立 nginx.conf

Step 1. 在 nginx.conf 建立以下內容

建立 entrypoint.sh

Step 1. 在 entrypoint.sh 建立以下內容

建立 Dockerfile

Step 1. 在 Dockerfile 建立以下內容

建立 Docker Image

Step 1. Build Image

在終端機輸入下方指令
- 請將 DOCKERHUB-NAME 改為 Docker Hub 上的名稱

docker build -t DOCKERHUB-NAME/vuejs-runtime-inject-environment-variables:0.1 .

Step 2. Check Image

在終端機輸入下方指令

docker images

於本地端執行 Docker Image

Step 1. 在終端機輸入下方指令

請將 DOCKERHUB-NAME 改為 Docker Hub 上的名稱

docker run -it -p 80:80 -e VUE_APP_DATA_ONE='foo' -e VUE_APP_DATA_TWO='bar' --rm DOCKERHUB-NAME/vuejs-runtime-inject-environment-variables:0.1

測試與驗證一

Step 1. 透過瀏覽器開啟 http://localhost/

Step 2. 取得 Container ID

在終端機輸入下方指令
```
docker ps -a
```

Step 3. 進入 Container

在終端機輸入下方指令
- 請將 Container ID 改成 Step 2 所取得的值
```
docker exec -it Container-ID sh
```

Step 4. 查看 VUE_APP_DATA_ONE

在終端機輸入下方指令
```
echo $VUE_APP_DATA_ONE
```

Step 5. 查看 VUE_APP_DATA_TWO

在終端機輸入下方指令
```
echo $VUE_APP_DATA_TWO
```

上傳 Docker Image 到 Docker Hub

Step 1. 登入到 Docker Hub

在終端機輸入下方指令
```
docker login
```

Step 2. 上傳 Docker Image 到 Docker Hub

在終端機輸入下方指令
- 請將 DOCKERHUB-NAME 改為 Docker Hub 上的名稱
```
docker push DOCKERHUB-NAME/vuejs-runtime-inject-environment-variables:0.1
```

建立與部署 Azure Container App

Step 1. 透過 AZ Cli 登入

在終端機輸入下方指令
```
az login
```

Step 2. 建立資源群組

在終端機輸入下方指令
- 請修改 Resource-Group 為唯一且可識別的名稱
```
az group create \
  --name "Resource-Group" \
  --location "eastus"
```

Step 3. 建立 Azure Container App 的環境

在終端機輸入下方指令
- 請修改 ACA-Env 為唯一且可識別的名稱
- 請修改 Resource-Group 為 Step 2 的名稱
```
az containerapp env create \
  --name "ACA-Env" \
  --resource-group "Resource-Group" \
  --location "eastus"
```

Step 4. 建立 Azure Container App

在終端機輸入下方指令

請修改 Resource-Group 為 Step 2 的名稱
請修改 ACA-Name 為唯一且可識別的名稱
請修改 ACA-Env 為 Step 3 的名稱
請將 DOCKERHUB-NAME 改為 Docker Hub 上的名稱

az containerapp create \
  --resource-group "Resource-Group" \
  --name "ACA-Name" \
  --environment "ACA-Env" \
  --image DOCKERHUB-NAME/vuejs-runtime-inject-environment-variables:0.1 \
  --ingress external \
  --target-port 80 \
  --env-vars VUE_APP_DATA_ONE="foo" VUE_APP_DATA_TWO="bar"

Env	VUE_APP_DATA_ONE ( data1 )	VUE_APP_DATA_TWO ( data2 )
Env 的值	foo	bar

測試與驗證二

Step 1. 取得 Application Url

Step 2. 透過瀏覽器開啟 Step 1 的網址

修改 env 並驗證

Step 1. 建立 Azure Container App

在終端機輸入下方指令
- 請修改 Resource-Group 為 建立與部署 Azure Container App 段落 Step 2 的名稱
- 請修改 ACA-Name 為 建立與部署 Azure Container App 段落 Step 4 的名稱
```
az containerapp update \
  --resource-group "Resource-Group" \
  --name "ACA-Name" \
  --set-env-vars VUE_APP_DATA_ONE="foo-1" VUE_APP_DATA_TWO="bar-2"
```

Env	VUE_APP_DATA_ONE ( data1 )	VUE_APP_DATA_TWO ( data2 )
Env 的舊值	foo	bar
Env 的新值	foo-1	bar-2

測試與驗證三

Step 1. 透過瀏覽器開啟 測試與驗證二 段落中 Step 1 的網址

GitHub

ArcherHuang @ GitHub

內容