使用 Node.js 在 Azure 上建置新的靜態 Web 應用程式

發行項
08/25/2024

Azure Static Web Apps 服務可從程式碼存放庫中，自動建立完整的堆疊 Web 應用程式，並部署至 Azure。

用戶端應用程式：靜態 Web 應用程式通常會使用 Angular、React、Svelte、Vue 或 Blazor 等連結庫和架構來建置，其中不需要伺服器端轉譯。
API：API 端點是使用無伺服器架構來裝載，可避免需要完整後端伺服器全部一起裝載。

影片系列：

範例：

靜態 Web Apps 社群範例是尋找程式代碼來為您的專案使用入門的絕佳方式。
靜態 Web 應用程式入門專案是啟動專案的另一個好方法。

什麼是靜態 Web 應用程式？

Azure Static Web Apps 是裝載的應用程式，其中包含產生的靜態用戶端檔案和選擇性 API 端點。當您建立靜態 Web 應用程式時，您會包含 GitHub Action 所需的資訊，以從 GitHub 存放庫建置靜態檔案，然後部署至 Azure。

使用下列其中一項建立靜態 Web 應用程式：

使用靜態 Web Apps CLI

靜態 Web Apps CLI 也稱為 SWA CLI，可作為 Azure Static Web Apps 的本機開發工具。它可以：

為應用程式開發伺服器提供靜態應用程式資產或 Proxy
為在 Azure Functions Core Tools 中執行的 API 提供 API 要求或 Proxy
模擬驗證和授權
模擬靜態 Web Apps 設定，包括路由

包含完整堆疊應用程式的 API

包含 Azure Functions 可讓您開發完整堆疊網站，而不需要處理整個 Web 主控環境的伺服器端設定。深入瞭解使用 JavaScript 的 Azure 函式應用程式。

Azure 函式有兩種方式可供靜態 Web 應用程式使用：

受控函式：這些 API 會選擇性地在靜態 Web Apps 中提供，而且通常位於名為 /api的資料夾中。
連結函式：這些個別但連結的函式應用程式可讓您使用這些 API，而不需要從相同的原始程式碼進行管理，並同時部署。

範例：

使用 Visual Studio Code 開發

使用 Static Web Apps 的 Visual Studio Code 擴充功能來建立本機資料夾結構和初始相依性。

為您的用戶端和 API 選擇派生其中一個 GitHub 範本存放庫，或建立新的存放庫。
在 Visual Studio Code 中，建立新的靜態 Web 應用程式。
在建立步驟中，選取您的存放庫分支和分支。

當您推送至此存放庫和分支時，程式代碼也會部署到靜態 Web 應用程式。通常有 live 或 deploy 分支，以達到此目的。
在建立步驟中，選取項目結構、應用程式程序代碼的位置，以及組建目錄。

如果您的資料夾結構遵循項目類型的一般資料夾結構，您通常可以採用預設值。
當您完成建立步驟時，存放庫分支有 GitHub Action，可建置並部署至位於目錄中的 /.github/workflows 靜態 Web 應用程式。

使用 Azure Static Web Apps 延伸模組的教學課程包括：

設定客戶端環境變數

GitHub Action 會控制在建置階段插入專案中的環境變數。這些客戶端變數必須在區段中的 GitHub Action yaml 中 env 設定。秘密應該儲存在 GitHub 秘密中，並提取至區 env 段。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "search-website" # App source code path
          api_location: "search-website/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          # Inject vars at build time
          myvarname: 'myvarvalue' 
          # Inject secrets at build time from GitHub Secrets
          password: ${{ secrets.PASSWORD }}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          action: "close"

設定 API 環境變數

API 環境變數是在 Azure 入口網站或 Azure CLI 中設定的運行時間變數。

Azure 入口網站：下[設定] 和 [組態]
Visual Studio Code 擴充功能：在 [生產] 下，[應用程式設定]
Azure CLI：使用 az staticwebapp appsettings set

部署至 Azure

將靜態 Web 應用程式部署至 Azure 是從推送至原始程式碼存放庫的特定分支開始的，其列在 GitHub Action 底下的 pull_requests:branchesGitHub Action 中。從本機計算機的推送需要使用靜態 Web 應用程式的存放庫或存放庫分支。如果您的 GitHub 使用者帳戶無權推送至指定組織存放庫上的指定分支，例如貴公司的 GitHub 組織，您應該分叉存放庫，然後將 GitHub Action 設定為使用分支。

從 GitHub Action 檢視部署成功。

啟用記錄

在 Azure 入口網站中開啟 Application Insights，讓靜態 Web 應用程式收集記錄。整合式 Application Insights 記錄會為您收集大量的資訊，而不會對您的程式代碼進行任何變更。

開發自定義記錄

若要將自定義記錄從您的應用程式新增至 Application Insights，請新增 @microsoft/applicationinsights-web npm 套件，然後新增 JavaScript 程式代碼以擷取自定義資訊。

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.trackTrace({message: 'some trace'});

下一步

深入了解靜態 Web Apps

共用方式為