AIoT & Cloud & Edge & Machine Learning

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

Archer

May 4, 2022 • 5 min read

Photo by Cris Tagupa / Unsplash

內容

學習目標
前置準備作業
專案目錄結構
建立 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 .

---2022-05-04---10.08.44

Step 2. Check Image

在終端機輸入下方指令

docker images

---2022-05-04---10.09.37

於本地端執行 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

---2022-05-04---10.10.28

測試與驗證一

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

---2022-05-04---10.11.28

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

---2022-05-04---2.03.02

測試與驗證二

Step 1. 取得 Application Url

---2022-05-04---2.07.20

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

---2022-05-04---2.08.49

修改 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

---2022-05-04---2.11.11

測試與驗證三

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

---2022-05-04---2.12.36

GitHub

ArcherHuang @ GitHub