練習 - 使用 GitHub Actions 發佈 API

• 4 分鐘

您的 Web 應用程式和 API 都在本機執行中。 現在可以將您的 Web 應用程式和 API 發佈到 Azure Static Web Apps。

將您的變更推送到 GitHub

您已在上一個練習中對您的 API 進行了變更。 依照下列步驟，將那些變更認可到 api 分支並推送到 GitHub：

1. 在 Visual Studio Code 中，按 F1 開啟命令選擇區
2. 輸入並選取 [Git：全部認可]。 如果 Visual Studio Code 提示您自動暫存所有變更並直接加以認可，請選取 [是]。
3. 輸入認可訊息，例如 api 變更
4. 按 F1 開啟命令選擇區
5. 輸入並選取 [Git：推送]
6. 如果系統提示您以下訊息：「'api' 分支沒有上游分支。您要發佈此分支嗎？」，請按 [確認] 按鈕

建立提取要求

您已將 api 分支推送到 GitHub。 現在您希望 GitHub Action 在預覽 URL 中發佈您的 Web 應用程式和 API。 因此，您的下一個步驟是對 main 分支建立提取要求。

1. 開啟瀏覽器

2. 瀏覽到您的存放庫

   https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

3. 選取 [提取要求] 連結

4. 選取 [新增提取要求] 按鈕

5. 從 [基底] 下拉式清單選取 main 分支

6. 在 [比較] 下拉式清單中選取 api 分支

7. 選取 [建立提取要求] 按鈕

8. 再次選取第二個 [建立提取要求] 按鈕

現在會觸發您的 GitHub Action。

監看 GitHub Action 建置及發佈

您可以在瀏覽器中停留在您的存放庫之上，並監看 GitHub Action 的進度。 依照以下步驟來檢視進度：

1. 選取 [動作] 功能表
2. 在 [工作流程] 功能表下方，選取 [Azure Static Web Apps CI/CD] 工作流程項目
3. 選取動作執行清單中的最上方連結。
4. 選取 [建置和部署作業] 連結。

當 GitHub Action 建置並發佈您的 Web 應用程式和 API 時，您可以查看其進度。

瀏覽到預覽 URL

在 GitHub Action 順利完成後，您就可以在瀏覽器中檢視執行中的應用程式。

1. 選取 [提取要求] 功能表
2. 選取您的提取要求
3. 選取緊接在以下訊息後面的連結：Azure Static Web Apps：您的預備網站已準備就緒！請在此處進行瀏覽

請注意，預覽 URL 包含一個連字號，後面接著一個數字。 此數字會符合您所建立之提取要求的提取要求號碼。 針對您建立的每個提取要求，您會取得唯一且可重複的預覽 URL。 該區域也會用來構成預覽 URL。

下一步

恭喜，您已使用 Web 應用程式和 API 建立了第一個 Azure Static Web Apps 執行個體！