使用 GitHub Actions 發佈 API

已完成

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

如果您建立了 Azure Static Web Apps 執行個體,並要求它監看您的主分支,系統就會為您產生 GitHub Action。 GitHub Action 會接聽存放庫 main 分支的變更,當偵測到有提交或發出拉取請求到 main 時,它會建置並發布您的應用程式。

當您建立 Azure Static Web Apps 資源時,您可能會記得您為 API 提供資料夾位置。 您提供了預設 api值。 不過,由於當時您在 api 資料夾中並沒有 API,Azure Static Web Apps 並沒有嘗試發佈 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 分支向 主要 分支提出提取要求。 當您針對 主要 分支建立提取要求時,GitHub Action 會將應用程式發佈至預覽 URL。

工作流程完成建置和部署應用程式之後,GitHub Bot 會將批註新增至提取要求,其中包含生產前環境的 URL。 您可以選取此連結以查看您的已準備的更改。

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