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

4 分

Web アプリと API の両方がローカルで実行されています。次は、Web アプリと API を Azure Static Web Apps に発行します。

GitHub に変更をプッシュする

前の演習では API を変更しました。それらの変更を api ブランチにコミットし、これらの手順に従って GitHub にプッシュします。

Visual Studio Code で、F1 キーを押してコマンドパレットを開きます
「Git: Commit All」と入力して選択します。 Visual Studio Code で自動的にすべての変更をステージして直接コミットするように求められた場合は、Yes を選択します。
api changes などのコミットメッセージを入力します
F1 キーを押し、コマンドパレットを開きます。
「Git: Push」と入力して選択します
"'api' ブランチに上流ブランチはありません。このブランチを公開しますか?" というメッセージが表示された場合は、[OK] ボタンを押します

pull request を作成する

api ブランチを GitHub にプッシュしました。次は、GitHub アクションで、Web アプリと API をプレビュー URL で発行する必要があります。したがって、次の手順では、main ブランチに対する pull request を作成します。

ブラウザーを開きます
リポジトリに移動します

https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
[pull request] リンクを選びます
[新しい pull request] ボタンを選びます
[base] ドロップダウンから [main] ブランチを選択します
[compare] ドロップダウンから [api] ブランチを選択します
[pull request の作成] ボタンを選びます
ここでも、2 つ目の [pull request の作成] ボタンを選びます

GitHub アクションがトリガーされるようになりました。

GitHub アクションのビルドと発行を監視する

ブラウザーでリポジトリを開いたまま、GitHub アクションの進行状況を監視することができます。進行状況を表示するには、これらの手順に従います。

[アクション] メニューを選びます
[ワークフロー] メニューで、[Azure Static Web Apps CI/CD] ワークフロー項目を選びます
アクション実行の一覧の一番上にあるリンクを選びます。
[Build and Deploy Job](ビルドおよびデプロイジョブ) リンクを選択します。

Screenshot showing the build and deploy button on the workflow page.

Web アプリと API をビルドして発行するときに、GitHub アクションの進行状況を確認することができます。

プレビュー URL を参照する

GitHub アクションが正常に完了したら、実行中のアプリをブラウザーで表示できます。

[pull request] メニューを選びます
pull request を選択します
リンクを選びます。これは、[Azure Static Web Apps: Your stage site is ready! Visit it here]\(Azure Static Web Apps: ステージサイトの準備ができました。こちらでご覧ください\) というメッセージに続いて表示されます

プレビュー URL には、後に数字が続くハイフンが含まれていることに注目してください。この数字は、作成した pull request の pull request 番号と一致します。作成するすべての pull request について、一意の反復可能なプレビュー URL を取得します。また、リージョンはプレビュー URL の形成にも使われます。

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

次のステップ