【 Cloud 】部署 React 到 Azure App Service

內容

• 學習目標
• 前置準備作業
• 建立 Azure App Service
• 部署 React App 到 Azure App Service

學習目標

• 如何建立 Azure App Service
• 如何透過 Visual Studio Code 部署 React 專案 到 Azure App Service

前置準備作業

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

建立 Azure App Service

Step 1. 登入到 Microsoft Azure

• 透過瀏覽器開啟 https://portal.azure.com/ 並登入

Step 2. 開啟 Azure App Service

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

Step 3. 建立 App Service

• 點選左上角的 Create

• 輸入 App 相關資訊
  • 在 Subscription 欄位請選擇所要使用哪個訂閱帳號
  • 在 Resource Group 欄位請選擇使用舊有的或新建立一個新的
  • 在 Name 欄位請輸入一個可識別的名稱
    • 本範例使用 hello-react-app-test
  • 在 Runtime stack 欄位請選擇 Node 14 LTS
  • 在 Operating System 欄位請選擇 Linux
  • 在 Region 欄位請選擇此服務所要建立於哪個資料中心
  • 以上資訊輸入完成後請點選左下角的 Review + create

• 再次確認相關資訊後請按左下角的 Create

• 建立完成畫面並點選 Go to resource

• 設定 Configuration
  • 點選左邊的 Configuration

• 點選上方的 Application settings > + New application setting
  • Name 欄位輸入 SCM_DO_BUILD_DURING_DEPLOYMENT
  • Value 欄位輸入 FALSE
  • 輸入完成後請點擊下方的 Ok 按鈕

• 點選上方的 General settings
  • Startup Command 欄位輸入 npx serve -s
  • 輸入完成後請點擊上方的 Save 按鈕，再點選 Continue

Step 4. 取得 URL

• 點選左上方的 Overview

• 將 React App 部署到 Azure App Service 之後可以透過此網址開啟部署成功的網頁

部署 React App 到 Azure App Service

Step 1. 開啟專案

• 透過 VS Code 開啟專案
  • 請透過終端機在專案路徑中輸入下方指令

    code .
    

Step 2. Build 專案

• 開啟 Terminal
  • 點選上方的 Terminal > New Terminal

• 於 Terminal 中輸入 npm run build

• 安裝 serve 套件
  • 於 Terminal 中輸入 npm install -g serve

• 驗證 Build 後所建立的檔案
  • 於 Terminal 中輸入 serve -s build
  • 透過瀏覽器開啟 Terminal 中 - Local: 顯示的網址

Step 3. 安裝 Azure App Service Extension 到 Visual Studio Code

• https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice

Step 4. 部署 React 專案到 Azure App Service

• 於 VS Code 中使用滑鼠右鍵點選 build 資料夾中的 Deploy to Web App...

• 點選 Sign in to Azure...

• 選擇登入 Azure 的帳號

• 登入成功

• 選擇 建立 Azure App Service 段落 所建立 hello-react-app-test App Service

• 點選 Deploy 以部署到 hello-react-app-test App Service

• 部署過程中

• 點選右下角的 Browse Website

• 部署成功畫面
  • ㊟ 部署完成後須過一段時間畫面才會顯示出來

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/