教學課程：在 Azure Static Web Apps 上部署 GitLab 存放庫

2024-07-01

Azure Static Web Apps 具有彈性的部署選項，可讓您搭配各種提供者使用。在本文中，您會將裝載於 GitLab 中的 Web 應用程式部署到 Azure Static Web Apps。

在本教學課程中，您將了解：

將存放庫匯入至 GitLab
建立靜態 Web 應用程式
設定 GitLab 存放庫以部署至 Azure Static Web Apps

必要條件

GitLab 帳戶
Azure 帳戶
- 如果您沒有 Azure 訂用帳戶，請建立免費試用帳戶。

建立存放庫

本文會使用 GitHub 存放庫作為來源，將程式碼匯入 GitLab 存放庫。

登入您的 GitLab 帳戶並移至 https://gitlab.com/projects/new#import_project
選取 [Repo by URL]。
在 [Git repository URL] 方塊中，輸入您所選架構的存放庫 URL。
- 無架構
- Angular
- Blazor
- React
- Vue
https://github.com/staticwebdev/vanilla-basic.git

https://github.com/staticwebdev/angular-basic.git

https://github.com/staticwebdev/blazor-basic.git

https://github.com/staticwebdev/react-basic.git

https://github.com/staticwebdev/vue-basic.git
在 [Project slug] 方塊中，輸入 my-first-static-web-app。
選取 [Create project]，並稍等您的存放庫設定完成。

建立靜態 Web 應用程式

現在已建立存放庫，您可以從 Azure 入口網站建立靜態 Web 應用程式。

前往 Azure 入口網站。
選取 [建立資源]。
搜尋 Static Web Apps。
選取 [Static Web Apps]。
選取建立。

在 [基本] 區段中，從設定新的應用程式開始。

設定	值
Azure 訂用帳戶	選取 Azure 訂閱。
資源群組	選取 [建立新項目] 連結，然後在文字方塊中輸入 static-web-apps-gitlab。
名稱	輸入 my-first-static-web-app。
方案類型	選取 [免費]。
來源	選取 [其他]。

選取 [檢閱 + 建立]。
選取建立。
選取 [前往資源] 。
選取 [管理部署權杖]。
複製部署權杖值，並放在編輯器中以供稍後使用。
選取 [管理部署權杖] 視窗上的 [關閉]。

在 GitLab 中建立管線工作

現在您已擁有部署權杖，接下來請在進行變更時，新增負責建置和部署網站的工作流程工作。

新增部署權杖

完成下列步驟時，請確定您針對環境區段選取 *。該區段可能會顯示預設值為 all，但您需要選取下拉式清單，然後手動選擇 *。

移至 GitLab 中的存放庫。
選取設定。
選取 [CI/CD]。
在 [Variables] 區段旁，選取 [Expand]。
選取 [新增變數]。
在 [Key] 方塊中，輸入 DEPLOYMENT_TOKEN。
在 [Value] 方塊中，貼上您在上一個步驟中保留的部署權杖值。
選取 [新增變數]。

新增檔案

返回 GitLab 中的存放庫主畫面。
選取 [Edit] 按鈕並選擇 [Web IDE]。
確定已在分支下拉式清單中選取 main 分支。
在存放庫根目錄建立名為 .gitlab-ci.yml 的新檔案。 (請確定檔案副檔名為 .yml。)

在檔案中輸入下列 YAML。

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'
  OUTPUT_PATH: '$CI_PROJECT_DIR/dist/angular-basic'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/Client'
  OUTPUT_PATH: 'wwwroot'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'
  OUTPUT_PATH: '$CI_PROJECT_DIR/build'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR'
  OUTPUT_PATH: '$CI_PROJECT_DIR/dist'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

.gitlab-ci.yml 檔案中會使用下列組態屬性來設定您的靜態 Web 應用程式。

在建置程序期間，$CI_PROJECT_DIR 變數會對應至存放庫的根資料夾位置。

屬性	說明	範例	必要
`APP_PATH`	應用程式的程式碼位置。	如果您的應用程式原始程式碼位於存放庫的根目錄，則輸入 `$CI_PROJECT_DIR/`，或如果您的應用程式程式碼位於名為 `app` 的資料夾中，則輸入 `$CI_PROJECT_DIR/app`。	Yes
`API_PATH`	Azure Functions 程式碼的位置。	如果應用程式程式碼位於名為 `api` 的資料夾中，請輸入 `$CI_PROJECT_DIR/api`。	No
`OUTPUT_PATH`	組建輸出資料夾相對於 `APP_PATH` 的位置。	如果您的應用程式原始程式碼位於 `$CI_PROJECT_DIR/app`，而組建指令碼將檔案輸出到 `$CI_PROJECT_DIR/app/build` 資料夾，則將 `$CI_PROJECT_DIR/app/build` 設定為 `OUTPUT_PATH` 值。	No
`API_TOKEN`	用於部署的 API 權杖。	`API_TOKEN: $DEPLOYMENT_TOKEN`	Yes

認可變更至主要分支，並關閉 Web IDE。
返回您的網站，然後選取 [設定]>[CI/CD]>[一般管線] 功能表項目以檢視部署進度。

部署完成後，便可以檢視您的網站。

檢視網站

部署靜態應用程式有兩個層面。第一個步驟會建立構成您應用程式的基礎 Azure 資源。第二個層面是會建置及發佈您的應用程式的 GitLab 工作流程。

在您可以移至新的靜態網站之前，部署建置必須先完成執行。

Static Web Apps 概觀視窗會顯示一系列的連結，協助您與 Web 應用程式互動。

返回 Azure 入口網站中的靜態 Web 應用程式。
移至 [概觀] 視窗。
選取 URL 標籤底下的連結。您的網站會在新的索引標籤中載入。

清除資源

如果您不打算繼續使用此應用程式，可以移除資源群組來刪除 Azure Static Web Apps 執行個體和所有相關聯的服務。

從 [概觀] 區段中選取 [static-web-apps-gitlab] 資源群組。
選取資源群組 [概觀] 頂端的 [刪除資源群組]。
在 [確定要刪除「static-web-apps-gitlab」？] 確認對話方塊中，輸入資源組名稱 static-web-apps-gitlab。
選取 [刪除]。

刪除資源群組的流程可能需要幾分鐘的時間才能完成。

下一步

新增 API

共用方式為