GitHub Actions を使用して API を発行する

3 分

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 を作成し、アプリのステージングバージョンにアクセスします。

続行

GitHub アクションの構成

GitHub アクションをトリガーする

プレビュー URL

フィードバック