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

完了

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

GitHub に変更をプッシュする

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

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

pull request を作成する

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

1. ブラウザーを開く

2. リポジトリに移動する

   https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

3. プルリクエストリンクを選択する

4. [新しいプル要求] ボタンを選択する

5. ベース ドロップダウンからメイン ブランチを選択する

6. 比較ドロップダウンから API ブランチを選択する

7. [ プル要求の作成 ] ボタンを選択する

8. もう一度、2 つ目の [Pull request の作成 ] ボタンを選択します

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

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

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

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

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

プレビュー URL を参照する

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

1. プルリクエストメニューを選択する
2. プルリクエストを選択してください
3. Azure Static Web Apps: Your stage site is ready! (Azure Static Web Apps: ステージ サイトの準備ができました) というメッセージのリンクを選択します。こちらをご覧ください

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

次のステップ

お疲れさまでした。これで、Web アプリと API で最初の Azure Static Web Apps インスタンスが作成されました。