Azure Static Web Appsに React アプリをデプロイする

この記事では、Azure ポータルを使用して React アプリケーションをAzure Static Web Appsにデプロイする方法について説明します。

前提条件

Resource	メモ
Azure サブスクリプション	Azure サブスクリプションをお持ちでない場合は、 無料試用版アカウントを作成します。
GitHub アカウント	GitHub アカウントがない場合は、無料で作成できます。

Resource	メモ
Azure サブスクリプション	Azure サブスクリプションをお持ちでない場合は、 無料試用版アカウントを作成します。
Azure DevOps アカウント	GitHubアカウントをお持ちでない場合は、作成。

リポジトリを作成する

この記事では、簡単に作業を開始できるように、GitHub テンプレート リポジトリを使用します。 テンプレートには、Azure Static Web Apps にデプロイするスターター アプリが含まれます。

1. 次の場所に移動して、新しいリポジトリを作成します。

   https://github.com/staticwebdev/react-basic/generate

2. リポジトリに my-first-static-web-app という名前を付けます。

3. [Create repository from template](テンプレートからリポジトリを作成する) を選択します。

   

この記事では、簡単に作業を開始できるように、Azure DevOps リポジトリを使用します。 このリポジトリには、Azure Static Web Apps を使用してデプロイするために使用されるスターター アプリが含まれています。

1. Azure DevOps にサインインします。

2. 新しいリポジトリ を選択します。

3. [ 新しいプロジェクトの作成 ] ウィンドウで、[ 詳細設定 ] メニューを展開し、次の選択を行います。

   Setting	価値
   プロジェクト	「my-first-web-static-app」と入力します。
   視認性	[プライベート] を選択します。
   バージョン管理	[Git] を選択します。
   作業項目プロセス	開発方法に最適なオプションを選択します。

4. を選択してを作成します。

5. [リポジトリ] メニュー項目を選択します。

6. [ファイル] メニュー項目を選択します。

7. [リポジトリのインポート] カードで、[インポート] を選択します。

8. 任意のフレームワークのリポジトリ URL をコピーして、[クローン URL] ボックスに貼り付けます。

   https://github.com/staticwebdev/react-basic.git

9. [インポート] を選択し、インポート プロセスが完了するまで待ちます。

静的 Web アプリを作成する

リポジトリが作成されたので、Azure portal から静的 Web アプリを作成できます。

1. Azure ポータルにアクセスします。
2. リソースの作成を選択します。
3. 静的 Web アプリを検索します。
4. [ 静的 Web アプリ] を選択します。
5. を選択してを作成します。

[基本] セクションで、新しいアプリを構成し、それを GitHub リポジトリにリンクすることから始めます。

Setting	価値
Subscription	Azure のサブスクリプションを選択します。
リソース グループ	[新規作成] リンクを選択し、テキスト ボックスに「static-web-apps-test」と入力します。
名前	テキスト ボックスに、「my-first-static-web-app」と入力します。
計画タイプ	[無料] を選択します。
Source	必要に応じて、GitHub を選択して GitHub にサインインします。

GitHubでサインインしたら、リポジトリ情報を入力します。

Setting	価値
Organization	自分の組織を選択します。
リポジトリ	[my-first-web-static-app] を選択します。
[Branch]\(ブランチ)	メイン を選択します。

Note

リポジトリが表示されない場合、次の手順を実行します。

• GitHub で Azure Static Web Apps を承認する必要がある場合があります。 GitHub リポジトリを参照し、[設定] > [アプリケーション] > [認可された OAuth アプリ] の順に移動して、[Azure Static Web Apps]、[許可] の順に選択します。
• Azure DevOps 組織で Azure Static Web Apps を承認する必要がある場合があります。 アクセス許可を付与する組織の所有者である必要があります。 OAuth を使用してサード パーティ アプリケーションのアクセスを要求します。 詳細については、OAuth 2.0 を使用した REST API へのアクセスの承認に関する記事を参照してください。

[基本] セクションで、新しいアプリを構成し、それを Azure DevOps リポジトリにリンクすることから始めます。

Setting	価値
Subscription	Azure のサブスクリプションを選択します。
リソース グループ	[新規作成] リンクを選択し、テキスト ボックスに「static-web-apps-test」と入力します。
名前	テキスト ボックスに、「my-first-static-web-app」と入力します。
計画タイプ	[無料] を選択します。
Source	DevOps を選択します。
Organization	自分の組織を選択します。
プロジェクト	プロジェクトを選択します。
リポジトリ	[my-first-web-static-app] を選択します。
[Branch]\(ブランチ)	メイン を選択します。

Note

使用しているブランチが保護されていないこと、および push コマンドを発行するための十分なアクセス許可があることを確認します。 確認するには、DevOps リポジトリを参照し、[リポジトリ] ->[ブランチ] に移動し、[その他のオプション] を選択します。 次に、ブランチを選択し、その後 [ブランチ ポリシー] を選択して、必要なポリシーが有効になっていないことを確認します。

[ビルドの詳細] セクションで、使用するフロントエンド フレームワークに固有の構成の詳細を追加します。

1. [ビルド プリセット] ドロップダウンから [React] を選択します。

2. [App location](アプリの場所) ボックスは既定値のままにします。

3. [Api location](API の場所) ボックスは空のままにします。

4. [アプリ成果物の場所] ボックスにビルドを入力します。

[Review + create](レビュー + 作成) を選択します。

Note

アプリを作成した後にこれらの値を変更するには、ワークフロー ファイルを編集します。

を選択してを作成します。

[リソースに移動] を選択します。

Web サイトを表示する

静的アプリのデプロイには 2 つの側面があります。 1 つ目は、アプリを構成する基になる Azure リソースを作成することです。 2 つ目は、アプリケーションをビルドして発行するワークフローです。

新しい静的サイトに移動する前にまず、デプロイ ビルドの実行が完了している必要があります。

Static Web Apps の "概要" ウィンドウには、Web アプリとの対話に役立つ一連のリンクが表示されます。

1. [概要] で GitHub アクションの実行を選択すると、リポジトリに対して実行されているGitHub Actionsに移動します。 続行する前に、デプロイ アクションが完了していることを確認します。

2. GitHub Actionsワークフローが完了したら、URL リンクを選択して、新しいタブで Web サイトを開くことができます。

ワークフローが完了したら、[URL] リンクを選択して、新しいタブで Web サイトを開くことができます。

リソースをクリーンアップする

このアプリケーションを引き続き使用しない場合は、次の手順を使用して Azure Static Web Apps インスタンスを削除することができます。

1. Azure ポータルを開きます。
2. 上部の検索バーから my-first-web-static-app を検索します。
3. アプリの名前を選択します。
4. を選択して、を削除します。
5. [はい] を選択して削除アクションを確定します (このアクションが完了するまでにしばらく時間がかかる場合があります)。

次のステップ

アプリケーションに API を追加する