【 Cloud 】透過 GitHub Action 部署 React  到 Azure Static Web App 並設定 Secret

內容

• 學習目標
• 前置準備作業
• 檔案結構
• 建立 GitHub Repository
• 設定 GitHub Action Secret
• 連接 GitHub 與 Azure Static Web App
• Push React App 到 GitHub

前置準備作業

• 已建立 Azure 帳號並能正常登入與使用
  • https://portal.azure.com/

檔案結構

├── .github
│   └── workflows
│       └── azure-static-web-apps-kind-bush-02b1f8f10.yml
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

建立 GitHub Repository

設定 GitHub Action Secret

Step 1. 開啟 Secret 設定頁面

• 點選 Settings > 再點選 Secrets and variables 中的 Actions > 點選 New repository secret

Step 2. 設定 Secret 資訊

• Name 欄位請輸入 Vue Env 中的字串，本範例為 REACT_APP_SECRET_STRING。
• Secret 欄位請輸入所對應的值，本範例為 LearningSky.io。
• 以上資訊輸入完成後請點選下方的 Add secret。

Step 3. 新增完成畫面

連接 GitHub 與 Azure Static Web App

Step 1. 建立 Azure Static Web App

• 於搜尋框輸入 Static Web App > 點選 Static Web Apps 的搜尋結果

• 點選左上角 + Create 按鈕

• 輸入相關資訊後點選 Review + create

  • 輸入前畫面
    

  • 輸入後畫面
    

Step 2. 確認相關資訊後點選 Create

Step 3. 建立完成，點選 Go to resource

Push React App 到 GitHub

Step 1. Clone Repository 到本地端電腦，目錄結構如下：

├── .github
│   └── workflows
│       └── azure-static-web-apps-icy-desert-068e1ea10.yml
└── README.md

Step 2. 修改 .github/workflows 目錄中的 yml 檔案

• 修改前

• 修改後
  • 新增第 34 行 env: ( yml 檔中的格式請對齊 )
  • 新增第 35 行並依 設定 GitHub Action Secret 段落進行修改此 Env ( yml 檔中的格式請對齊 )

Step 3. 將 Vue App 放入此 Repository 中，目錄結構如下：

├── .github
│   └── workflows
│       └── azure-static-web-apps-kind-bush-02b1f8f10.yml
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Step 4. Push 程式到 GitHub

Step 5. 查看 GitHub Action 狀況

• 點選上方的 Actions
  • 目前已執行完成
    

Step 6. 開啟 Azure Static Web App 的 URL

• 取得 URL
  

• 開啟畫面
  

Sample Code

• https://github.com/ArcherHuang/React-Azure-Static-Web-App-Secret

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://learningsky.io/author/archer/
• https://medium.com/@mmosconii