GitHub Actions を使用して API を発行する
Web アプリに API を追加しました。両方ともローカルで実行されています。 次に、API とアプリを Azure Static Web Apps に発行します。
Azure Static Web Apps インスタンスを作成し、main ブランチを監視するように要求すると、GitHub アクションが自動的に生成されました。 GitHub アクションは、リポジトリの メイン ブランチへの変更をリッスンし、 メインへのコミットまたはプル要求を検出すると、アプリをビルドして発行します。
AZURE Static Web Apps リソースを作成したときに、API のフォルダーの場所を指定したことを覚えているかもしれません。 API の既定値を指定しました。 ただし、その時点で API フォルダーに API がないため、Azure Static Web Apps は API の発行を試みませんでした。
これで、すべてが変わります。
GitHub アクションの構成
フォルダー .github/workflows には、GitHub アクション ファイルが含まれています。 このファイルには、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 アクションをトリガーする
GitHub アクションは、main ブランチへの変更が検出されたときに Web アプリと API をビルドして発行できる状態になっています。 GitHub アクションをトリガーするには、直接コミットするか、 メイン ブランチに pull request を作成します。 メイン ブランチで検出された変更により、GitHub アクションがトリガーされ、ライブ Web サイトの同じ URL でアプリが発行されます。
プレビュー URL
ライブ Web サイトに発行する前に、ステージング サイトで変更を確認したい場合があります。 Azure Static Web Apps では、プレビュー URL を使用して変更のプレビューを表示できます。 GitHub アクションが監視しているブランチに対してプル要求を作成することで、プレビュー URL を作成できます。 ライブ Web サイトは影響を受けません。 代わりに、アプリの新しいステージング バージョンが作成されます。 GitHub で pull request を確認すると、[Conversation]\(会話\) タブにステージング バージョンへのリンクが表示されます。
Azure Static Web Apps から別の URL にアプリを発行する方法を次の表に示します。 アプリはある URL に発行されますが、同じブランチへの pull request は別の URL に発行されます。
| 情報源 | 説明 | URL |
|---|---|---|
| main ブランチ | ライブ Web サイトの URL | https://purple-rain-062d03304.azurestaticapps.net/ |
| pull request #5 | プレビュー URL | https://purple-rain-062d03304-5.azurestaticapps.net/ |
現在は api ブランチで作業しています。 API ブランチからメイン ブランチへのプル要求を行います。 メイン ブランチに対して pull request を作成すると、GitHub アクションによってアプリがプレビュー URL に発行されます。
ワークフローがアプリのビルドとデプロイを完了すると、GitHub ボットは、実稼働前環境の URL を含むコメントを pull request に追加します。 このリンクを選択すると、ステージされている変更を確認できます。
次に、pull request を作成し、アプリのステージング バージョンにアクセスします。