AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure App Service

Archer

Jan 11, 2022 • 6 min read

Photo by Sara Dubler / Unsplash

內容

學習目標
前置準備作業
建立 Azure Container Registry
建立 React 版 Docker Image
上傳 Docker Image 到 Azure Container Registry
透過 Azure Container Registry 部署 Docker Image 到 Azure App Service
測試與驗證

學習目標

如何將 React 透過 Azure Container Registry 部署到 Azure App Service

前置準備作業

已建立 Azure 帳號並能正常登入
已存在可正常執行的 React 專案
已於電腦端安裝 IDE，本範例使用 Visual Studio Code
本地端電腦已安裝 Docker

建立 Azure Container Registry

Step 1. 開啟 Azure Container Registry

在上方搜尋框輸入 container 並點選下方 Container registries 的搜尋結果

---2022-01-11---3.05.59

Step 2. 點選上方 + Create

---2022-01-11---3.07.34

Step 3. 輸入相關資訊

---2022-01-11---3.08.57

Subscription 欄位選擇所要使用的訂閱。
Resource group 欄位輸入此服務所要歸屬於的群組。
Registry Name 欄位輸入一個可識別的名稱，本範例使用 containerappservice。
Location 欄位請選擇服務所要位於的資料中心。
SKU 欄位請選擇服務的等級。
當輸入完成後點選 Review + create。

---2022-01-11---3.11.43

Step 4. 建立服務

確認資訊正確後再點選 Create

---2022-01-11---3.12.56

Step 5. 點選 Go to resource

---2022-01-11---3.14.04

Step 6. 啟用 Admin user

點選左側 Access keys > 再點選 Admin user 中的按鈕

---2022-01-11---3.16.01

---2022-01-11---3.17.23

Step 7. 取得 Login server URL

點選左側的 Overview > Essentials 區段中的 Login server

---2022-01-11---3.19.37

建立 React 版 Docker Image

Step 1. 建立 Dockerfile

請於專案目錄中建立 Dockerfile 的檔案並輸入下方資訊

	# build stage
	FROM node:14.18-alpine3.15 as build-stage
	WORKDIR /app
	COPY package*.json ./
	RUN npm install --production
	COPY . .
	RUN npm run build

	# production stage
	FROM nginx:1.21.5-alpine as production-stage
	COPY --from=build-stage /app/build /usr/share/nginx/html
	EXPOSE 80
	CMD ["nginx", "-g", "daemon off;"]

view raw React-Dockerfile hosted with ❤ by GitHub

Step 2. 建立 Docker Image

請開啟終端機切換路徑到 Dockerfile 所在位置並執行下方指令
- 請將下方指令中的 ACR-URL 替換成 建立 Azure Container Registry 段落 Step 7 中取得的 Login server URL

docker build -t ACR-URL/docker-react:0.1 .

---2022-01-11---5.52.12

Step 3. 確認本地端的 Docker Image

請在終端機中輸入下方指令

docker images

---2022-01-11---5.53.03

Step 4. 於本地端啟動 Docker Image

請在終端機中輸入下方指令
- 請將下方指令中的 ACR-URL 替換成 建立 Azure Container Registry 段落 Step 7 中取得的 Login server URL

docker run -p 80:80 -d ACR-URL/docker-react:0.1

---2022-01-11---5.53.43

Step 5. 確認啟動狀態

請在終端機中輸入下方指令

docker ps -a

---2022-01-11---5.54.31

請透過瀏覽器開啟 http://localhost

---2022-01-11---5.55.00

上傳 Docker Image 到 Azure Container Registry

Step 1. 安裝 Azure CLI

安裝說明 https://docs.microsoft.com/zh-tw/cli/azure/install-azure-cli

Step 2. 透過 Azure CLI 登入

請在終端機輸入下方指令

az login

選擇登入帳號

---2022-01-11---3.32.36

登入成功

---2022-01-11---3.33.22

---2022-01-11---3.33.40

Step 3. 登入 Azure Container Registry

請在終端機輸入下方指令
- 請修改下方指令中的 AzureContainerRegistryName 為所建立的 Azure Container Registry 名字

az acr login --name AzureContainerRegistryName

---2022-01-11---3.36.45

Step 4. 上傳 Docker Image 到 Azure Container Registry

請在終端機中輸入下方指令
- 請將下方指令中的 ACR-URL 替換成 建立 Azure Container Registry 段落 Step 7 中取得的 Login server URL

docker push ACR-URL/docker-react:0.1

---2022-01-11---5.56.55

Step 5. 確認上傳結果

點選 Azure 上所建立的 Azure Container Registry 左側中的 Azure Container Registry

---2022-01-11---5.57.50

透過 Azure Container Registry 部署 Docker Image 到 Azure App Service

Step 1. 開啟 Azure App Service

在上方搜尋框輸入 app services 並點選下方 Azure App Service 的搜尋結果

---2022-01-11---3.44.19

Step 3. 建立 App Service

點選左上角的 Create

---2021-07-28---11.15.14

輸入 App 相關資訊
- Subscription 欄位請選擇所要使用哪個訂閱帳號
- Resource Group 欄位請選擇使用舊有的或新建立一個新的
- Name 欄位請輸入一個可識別的名稱
  - 本範例使用 container-test
- Publish 欄位請選擇 Docker Container
- Operating System 欄位請選擇 Linux
- Region 欄位請選擇此服務所要建立於哪個資料中心
- Linux Plan 與 Sku and size 欄位選擇需要的 size
- 以上資訊輸入完成後請點選 Next: Docker >

---2022-01-11---3.48.09

---2022-01-11---3.52.08

輸入 Docker 相關資訊
- Options 欄位選擇 Single Container
- Image Source 欄位選擇 Azure Container Registry
- Registry 欄位選擇所建立的 Container Registry
- Image 欄位選擇 docker-react
- Tag 欄位選擇 0.1
- 以上資訊輸入完成後請點選 Review + create