練習 - 使用 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. 從基底下拉式清單中選取主要分支

  6. 從比較下拉式清單中選取 API 分支

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

  8. 同樣地，選取第二個 [ 建立提取要求] 按鈕

現在會觸發您的 GitHub Action。

監看 GitHub Action 建置及發佈

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

  1. 選取 動作 選單
  2. 在 [工作流程] 功能表下，選取 Azure 靜態 Web Apps CI/CD 工作流程項目 螢幕快照，其中顯示如何尋找正確的工作流程。
  3. 選取動作執行清單中的頂端連結。
  4. 選取 [建置和部署作業] 連結。

顯示工作流程頁面上 [建置和部署] 按鈕的螢幕快照。

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

瀏覽到預覽 URL

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

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

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

顯示您 Angular Web 應用程式的螢幕快照。

顯示回應 Web 應用程式的螢幕快照。

顯示您 Svelte Web 應用程式的螢幕快照。

顯示您的 vue Web 應用程式的螢幕快照。

後續步驟

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