使用 GitHub Actions 發佈 API

已完成

您已將 API 新增到 Web 應用程式,且他們都在本機執行。 現在可以將您的 API 和應用程式發佈到 Azure 靜態 Web 應用程式。

如果您建立了 Azure Static Web Apps 執行個體,並要求它監看您的主分支,系統就會為您產生 GitHub Action。 GitHub Action 會接聽存放庫分支的變更,並在偵測到認可或對主分支的提取要求時,建置和發佈您的應用程式。

您可能記得,您在建立 Azure Static Web Apps 資源時,為 API 提供了資料夾位置。 您提供了預設值 api。 不過,由於當時 api 資料夾中沒有 API,因此,Azure 靜態 Web 應用程式不會嘗試發佈 API。

現在,一切均已變更。

GitHub Action 設定

.github/workflows 資料夾包含您的 GitHub Action 檔案。 此檔案包含您的 Web 應用程式、API 和組建成品的位置設定。 您在建立 Azure Static Web Apps 資源時所選擇的位置現在位於此檔案中,如此處所示:

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

您的 api_location 已設定為正確的值,以指向您 api 資料夾中的 API。

觸發 GitHub Action

只要 GitHub Action 偵測到主分支中發生變更,就會隨時建立並發佈您的 Web 應用程式和 API。 若要觸發 GitHub Action,您可以直接認可,或是建立對分支的提取要求。 在分支上偵測到的變更會觸發 GitHub Action,在與您的即時網站相同的 URL 上發佈應用程式。

預覽 URL

有時,您想要先在暫存網站中查看變更,然後再發佈到即時網站。 Azure Static Web Apps 可讓您透過預覽 URL 查看變更。 您可以針對 GitHub Action 所監看的分支建立提取要求,以建立預覽 URL。 您的即時網站不會受到影響。 而是會改為建立新的應用程式預備版本。 如果您返回 GitHub 並在其上檢查提取要求,您應該會看到張貼於 [交談] 索引標籤中的暫存版本連結。

下表顯示 Azure Static Web Apps 如何將您的應用程式發佈到不同的 URL。 您的應用程式會發佈到某個 URL,而對相同分支的提取要求則會發佈到另一個 URL。

來源 描述 URL
分支 即時網站 URL https://purple-rain-062d03304.azurestaticapps.net/
提取要求 #5 預覽 URL https://purple-rain-062d03304-5.azurestaticapps.net/

您目前正在 api 分支中運作。 從您的 API 分支向分支發出提取要求。 當您對 main 分支建立提取要求時,GitHub 動作會將應用程式發佈到預覽 URL。

一旦工作流程完成應用程式的建置和部署,GitHub Bot 即會對您的提取要求新增註解,其中會包含生產前環境的 URL。 您可以選取此連結以查看您的暫存變更。

接下來,您會建立提取要求,並造訪應用程式的暫存版本。