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

【 Cloud 】透過 GitHub Action 部署 React  到 Azure Static Web App 並設定 Secret
Photo by Jeremy Stewardson / Unsplash

內容

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

前置準備作業

檔案結構

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

---2023-04-10---9.18.14

設定 GitHub Action Secret

Step 1. 開啟 Secret 設定頁面

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

---2023-04-10---9.19.18


Step 2. 設定 Secret 資訊

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

---2023-04-10---9.20.58

---2023-04-10---9.22.27


Step 3. 新增完成畫面

---2023-04-10---9.23.19

連接 GitHub 與 Azure Static Web App

Step 1. 建立 Azure Static Web App

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

staticweb1

  • 點選左上角 + Create 按鈕

staticweb2

  • 輸入相關資訊後點選 Review + create
    • 輸入前畫面
      ---2023-04-10---8.15.08

    • 輸入後畫面
      ---2023-04-10---9.25.39


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

---2023-04-10---9.27.00


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

---2023-04-10---9.28.15

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

---2023-04-10---9.58.20


Step 5. 查看 GitHub Action 狀況

  • 點選上方的 Actions
    • 目前已執行完成
      ---2023-04-10---10.01.36

Step 6. 開啟 Azure Static Web App 的 URL

  • 取得 URL
    ---2023-04-10---10.00.33

  • 開啟畫面
    ---2023-04-10---10.02.51

Sample Code

GitHub

List of blogs