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

【 Container 】將 Vue 在執行階段注入環境變數並透過 Docker Hub 部署到 Azure Container App
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

前置準備作業

專案目錄結構

├── node_modules
├── 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
    

    ---2022-05-04---1.05.11


Step 3. 進入 Container

  • 在終端機輸入下方指令

    • 請將 Container ID 改成 Step 2 所取得的值
    docker exec -it Container-ID sh
    

    ---2022-05-04---1.07.45


Step 4. 查看 VUE_APP_DATA_ONE

  • 在終端機輸入下方指令

    echo $VUE_APP_DATA_ONE
    

    ---2022-05-04---1.08.44


Step 5. 查看 VUE_APP_DATA_TWO

  • 在終端機輸入下方指令

    echo $VUE_APP_DATA_TWO
    

    ---2022-05-04---1.09.07

上傳 Docker Image 到 Docker Hub

Step 1. 登入到 Docker Hub

  • 在終端機輸入下方指令

    docker login
    

    ---2022-05-04---1.13.37


Step 2. 上傳 Docker Image 到 Docker Hub

  • 在終端機輸入下方指令

    • 請將 DOCKERHUB-NAME 改為 Docker Hub 上的名稱
    docker push DOCKERHUB-NAME/vuejs-runtime-inject-environment-variables:0.1
    

    ---2022-05-04---1.49.24

    ---2022-05-04---1.50.57

建立與部署 Azure Container App

Step 1. 透過 AZ Cli 登入

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

Step 2. 建立資源群組

  • 在終端機輸入下方指令

    • 請修改 Resource-Group 為唯一且可識別的名稱
    az group create \
      --name "Resource-Group" \
      --location "eastus"
    

    ---2022-05-04---1.53.08


Step 3. 建立 Azure Container App 的環境

  • 在終端機輸入下方指令

    • 請修改 ACA-Env 為唯一且可識別的名稱
    • 請修改 Resource-GroupStep 2 的名稱
    az containerapp env create \
      --name "ACA-Env" \
      --resource-group "Resource-Group" \
      --location "eastus"
    

    ---2022-05-04---1.56.38


Step 4. 建立 Azure Container App

  • 在終端機輸入下方指令
    • 請修改 Resource-GroupStep 2 的名稱
    • 請修改 ACA-Name 為唯一且可識別的名稱
    • 請修改 ACA-EnvStep 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

List of blogs