LearningSky.io

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

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 檔案結構
  • 建立 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

設定 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

GitHub

List of blogs