GitHub Actions を使用して API を発行する
Web アプリに API を追加しました。両方ともローカルで実行されています。 次に、API とアプリを Azure Static Web Apps に発行します。
Azure Static Web Apps インスタンスを作成し、main ブランチを監視するように要求すると、GitHub アクションが自動的に生成されました。 GitHub アクションは、リポジトリの main ブランチへの変更をリッスンし、main へのコミットまたは pull request を検出すると、アプリをビルドして発行します。
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 アクションをトリガーするには、直接コミットするか、main ブランチに pull request を作成します。 main ブランチで検出された変更によって、GitHub アクションがトリガーされて、ライブ Web サイトと同じ URL にアプリが発行されます。
プレビュー URL
ライブ Web サイトに発行する前に、ステージング サイトで変更を確認する場合があります。 Azure Static Web Apps では、プレビュー URL を使って変更のプレビューを表示できます。 プレビュー URL を作成するには、GitHub アクションの監視対象であるブランチに対して pull request を作成します。 ライブ Web サイトは影響を受けません。 代わりに、アプリの新しいステージング バージョンが作成されます。 前に戻って GitHub で pull request を確認すると、[会話] タブにステージング バージョンへのリンクが投稿されていることがわかります。
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 ブランチから main ブランチに対して pull request を行います。 main ブランチに対して pull request を行うと、GitHub アクションによってアプリがプレビュー URL に発行されます。
ワークフローでアプリのビルドとデプロイが完了すると、GitHub ボットによって pull request にコメントが追加されます。これには、運用前環境の URL が含まれています。 このリンクを選択すると、ステージされている変更を確認できます。
次に、pull request を作成し、アプリのステージング バージョンにアクセスします。