共用方式為

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

Azure Static Web Apps 具有彈性的部署選項，可讓您搭配各種提供者使用。 在本教學課程中，您會使用 Linux 虛擬機器將裝載於 Bitbucket 的 Web 應用程式部署到 Azure Static Web Apps。

注意

Static Web Apps 管線工作目前僅適用於 Linux 機器。

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

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

必要條件

建立存放庫

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

  1. 登入 Bitbucket。

  2. 移至 https://bitbucket.org/repo/import 以開始匯入處理程序。

  3. 在 [舊存放庫] 標籤底下的 [URL] 方塊中，輸入您所選架構的存放庫 URL。

  4. 在 [專案] 標籤旁，選取 [建立新專案]。

  5. 輸入 MyStaticWebApp。

  6. 選取 [匯入存放庫]，並稍待片刻，讓網站建立您的存放庫。

設定主分支

範本存放庫不時有一個以上的分支。 使用下列步驟來確保 Bitbucket 會將「主要」標籤對應至存放庫中的主分支。

  1. 選取 [存放庫設定]。
  2. 展開 [進階] 區段。
  3. 在 [主分支] 標籤底下，確定已在下拉式清單中選取 [主要]。
  4. 如果您進行過變更，請選擇 [儲存變更]。
  5. 選取返回。

建立靜態 Web 應用程式

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

  1. 前往 Azure 入口網站。

  2. 選取 [建立資源]。

  3. 搜尋 Static Web Apps。

  4. 選取 [Static Web Apps]。

  5. 選取 建立。

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

    設定 值
    Azure 訂用帳戶 選取 Azure 訂閱。
    資源群組 選取 [建立新項目] 連結，然後在文字方塊中輸入 static-web-apps-bitbucket。
    名稱 輸入 my-first-static-web-app。
    方案類型 選取 [免費]。
    Azure Functions API 和預備環境的區域 選取最靠近您的區域。
    來源 選取 [其他]。

  7. 選取 [檢閱 + 建立]。

  8. 選取 建立。

  9. 選取 [前往資源] 。

  10. 選取 [管理部署權杖]。

  11. 複製部署權杖值，並放在編輯器中以供稍後使用。

  12. 選取 [管理部署權杖] 視窗上的 [關閉]。

在 Bitbucket 中建立管線工作

  1. 移至 Bitbucket 中的存放庫。

  2. 選取 [來源] 功能表項目。

  3. 確定已在分支下拉式清單中選取 main 分支。

  4. 選取 [管線]。

  5. 選取文字連結 [建立您的第一個管線]。

  6. 在 [入門管線] 卡片上，選取 [選取]。

  7. 在組態檔中輸入下列 YAML。

    pipelines:
  branches:
   main:
    - step: 
        name: Deploy to test
        deployment: test
        script:
          - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
          - pipe: microsoft/azure-static-web-apps-deploy:main
            variables:
                APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                API_TOKEN: $deployment_token

    注意

    在此範例中，pipe 值會設定為 microsoft/azure-static-web-apps-deploy:main。 如果您希望管線使用不同的分支，請將 main 取代為所需的分支名稱。

    在您的靜態 Web 應用程式的組態檔中會使用下列組態屬性。

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

    屬性 說明 範例 必要
    app_location 應用程式的程式碼位置。 如果您的應用程式原始程式碼位於存放庫的根目錄，則輸入 /，或如果您的應用程式程式碼位於名為 app 的目錄中，則輸入 /app。 Yes
    api_location Azure Functions 程式碼的位置。 如果 API 程式碼位於名為 api 的資料夾中，請輸入 /api。 如果在資料夾中偵測不到任何 Azure Functions 的應用程式，則組建不會失敗，工作流程會假設您不想要 API。 No
    output_location 組建輸出目錄相對於 app_location 的位置。 如果您的應用程式原始程式碼位於 /app，而組建指令碼將檔案輸出到 /app/build 資料夾，則將 build 設定為 output_location 值。 No

接下來，定義 API_TOKEN 變數的值。

  1. 選取 [新增變數]。
  2. 在 [名稱] 方塊中，輸入 deployment_token，其符合工作流程中的名稱。
  3. 在 [Value] 方塊中，貼上您在上一個步驟中保留的部署權杖值。
  4. 勾選 [安全] 核取方塊。
  5. 選取 [新增]。
  6. 選取 [認可檔案]，然後返回您的管線索引標籤。

請在 [管線] 視窗上稍候片刻，您會看到您的部署狀態出現。 部署完成執行後，您可以在瀏覽器中檢視網站。

檢視網站

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

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

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

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

清除資源

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

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

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

下一步

新增 API