クイック スタート: Visual Studio で React シングルページ アプリケーションを含む Docker を使用する

Visual Studio を使用すると、コンテナー化された ASP.NET Core アプリ (React.js シングルページ アプリケーション (SPA) などのクライアント側 JavaScript を使用したものを含む) のビルド、デバッグ、実行を簡単に行い、それらのアプリを Azure Container Registry、Docker Hub、Azure App Services、または独自の Container Registry に発行することができます。 この記事では、Azure Container Registry に発行します。

前提条件

• Docker Desktop
• Web 開発、Azure Tools ワークロード、および/または .NET Core クロスプラットフォーム開発ワークロードがインストールされた Visual Studio 2022
• Azure Container Registry に発行する場合、Azure サブスクリプション。 無料試用版にサインアップします。
• Node.js
• Windows コンテナー (Windows 10 バージョン 1809 以降) の場合、この記事で参照されている Docker イメージを使用するため。

インストールとセットアップ

Docker をインストールするには、まず、「Docker Desktop for Windows: What to know before you install」 (Docker Desktop for Windows: インストール前に知っておくべきこと) の情報を確認します。 次に、Docker Desktop をインストールします。

プロジェクトを作成して Docker サポートを追加する

Visual Studio 2022 バージョン 17.8 以降を使用している場合は、次の手順に従ってください。

1. [React と ASP.NET Core] テンプレートを使用して新しいプロジェクトを作成します。

   

2. [追加情報] 画面で、[コンテナーのサポートを有効にする] を選択します。 そのファイルを手動で変更する必要があるため、必ず Dockerfile オプションを選択してください。

   

   Note

   Visual Studio 2022 の一部のバージョンでは、このオプションは有効になっていませんが、後でそのサポートを追加できます。

   Visual Studio では、React JavaScript クライアント コード用と ASP.NET Core C# サーバー コード用の 2 つのプロジェクトが作成されます。

3. プロジェクトの作成時に Docker コンテナー サポートを追加しなかった場合は、サーバー プロジェクト ノードを右クリックし、[追加]>[Docker サポート] を選択し、Dockerfile オプションを選択して Dockerfile を作成してください。

   

4. コンテナーの種類を選択します。

Visual Studio 2022 バージョン 17.0 から 17.7 の場合は、次の手順を使用します。

1. ASP.NET Core with React.js テンプレートを使用して新しいプロジェクトを作成します。

   

2. [追加情報] 画面では [Docker サポートを有効にする] が選択できませんが、心配はいりません。後でそのサポートを追加できます。

   

3. プロジェクト ノードを右クリックし、[追加]>[Docker サポート] を選択して、プロジェクトに Dockerfile を追加します。

   

4. コンテナーの種類を選択します。

デバッグ

Visual Studio 2022 バージョン 17.9 以降と、vite.js を使用する React および ASP.NET Core テンプレートでは、クライアントとサーバーの両方のプロジェクトがデバッグ サポート付きで開始するように既に構成されています。ただし、コンテナー内で実行されている ASP.NET Core サーバーにアクセスするために、シングルページ アプリケーション (SPA) プロキシが使用する適切なポートを設定する必要があります。 ホスト ポートは、Visual Studio の [コンテナー] ウィンドウから取得し、「React アプリの作成 - Docker」の説明に従って React プロジェクトで設定できます。

このシナリオでは必要ない Swagger で開くよう設定されているサーバーのブラウザーで起動を無効にすることもできます。 ブラウザーの起動を無効にするには、プロパティ (Alt+Enter キー) を開き、[デバッグ] タブに移動し、[デバッグ起動プロファイル UI を開く] というリンクをクリックして、[ブラウザーの起動] チェック ボックスをオフにします。

以前のバージョンの Visual Studio 2022 を使用している場合は、このまま読み進めて、シングルページ アプリケーション (SPA) プロキシ サーバーでデバッグを設定してください。

デバッグ中、プロジェクトでは SPA プロキシを使用します。 「シングルページ アプリケーション (SPA) テンプレートの機能強化」を参照してください。 デバッグ時には、JavaScript クライアントはホスト マシン上で実行されますが、ASP.NET Core サーバー コードはコンテナー内で実行されます。 発行されるときにプロキシは実行されず、クライアント コードは ASP.NET Core コードと同じサーバー上で実行されます。 サーバー コードのデバッグに使用できるデバッグ プロファイル *Docker が既にあります。 JavaScript クライアント コードをデバッグするには、追加のデバッグ プロファイルを作成します。 また、JavaScript のデバッグ時にコマンド プロンプトからプロキシを手動で起動する必要もあります。 これを複数のデバッグ セッションで実行したままにしておくことができます。

1. まだビルドされていない場合は、プロジェクトをビルドしてください。

2. Visual Studio dev コマンド プロンプトを開き、プロジェクトの ClientApp フォルダーにアクセスして、npm run start コマンドを指定します。 次のような結果が表示されます。

   Compiled successfully!
   
   You can now view project3_spa in the browser.
   
     Local:            https://localhost:44407
     On Your Network:  https://192.168.1.5:44407
   
   Note that the development build isn't optimized.
   To create a production build, use npm run build.
   
   webpack compiled successfully
   

   Note

   ローカル URL をメモします。 launchSettings.json ファイルに格納されているデバッグ起動プロファイルで、このローカル URL を指定する必要があります。

3. デバッグ プロファイルを含むドロップダウン リストを開き (緑色の三角形のアイコンまたは [スタート] ボタンの横)、[{ProjectName} デバッグ プロパティ]、[Docker] プロファイルの順に選択します。

4. [環境変数] セクションを確認し、次の環境変数がまだ存在しない場合は追加します。

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. [URL] を https://localhost:{proxy-port} に設定します。{proxy-port} はプロキシ サーバーのポートです (ステップ 1)。

   

   このアクションにより、launchSettings.json ファイル内の Docker エントリが変更され、ホスト上で実行されているローカル プロキシの正しい URL が起動します。 ソリューション エクスプローラーで、launchSettings.json ファイルを [プロパティ] から探します。

6. 次のようなコードが表示されます。

   "profiles": {
      "Docker": {
         "commandName": "Docker",
         "launchBrowser": true,
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development",
           "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
         },
         "launchUrl": "https://localhost:44407",
         "useSSL": true
      }
   }
   

   重要

   プロキシを使用している場合は、起動設定オプション publishAllPorts を true に設定しないでください。 このオプションでは、公開されているすべてのポートがランダム ポートに発行されます。これは、SPA プロキシで特定のポートを設定すると機能しません。

7. ClientApp/src/setupProxy.js というファイルを開き、コンテナーの localhost アドレスとポートの使用をターゲットに指示する行に変更を加えます。 ポートは、[コンテナー] ウィンドウの [ポート] タブにあります。

   const target =  'https://localhost:{container-port}';
   

   HTTPS を使用している場合は、必ず HTTPS に適したポート (このチュートリアルでは 443) を選択してください。

8. デバッグを使用してアプリを起動します (F5)。

   

   出力アセンブリを書き込もうとするビルド エラーが発生した場合は、以前に実行されているコンテナーを停止してファイルのロックを解除する必要がある場合があります。

9. incrementCounter 関数で ClientApp/src/components/Counter.js にブレークポイントを設定して、クライアント側の JavaScript コードでブレークポイントにヒットできることを確認してから、[カウンター] ページの [インクリメント] ボタンをクリックしてブレークポイントにヒットしてみてください。

   

10. 次は、サーバー側の ASP.NET Core コードでブレークポイントにヒットしてみてください。 WeatherController.cs メソッドの Get にブレークポイントを設定し、基本 localhost とポート URL への /weatherforecast の追加を試みて、そのコードをアクティブ化します。

    

11. launchSettings.json の更新や IDE でのデバッグ起動プロファイルの更新などの大幅な変更を行った影響でコンテナー ポートに変更がある場合は、setupProxy.js のポートを更新し、プロキシを再起動する必要があります。 現在のプロキシを終了 (実行中のコマンド ウィンドウで Ctrl+C) してから、同じコマンド npm run start を使用して再起動します。

コンテナー ウィンドウ

[コンテナー] ツール ウィンドウを開きます。 これは、メニューの [表示]>[その他のウィンドウ]>[コンテナー] にあります。または、Ctrl + Q キーを押して検索ボックスに「containers」と入力を開始し、その結果から [コンテナー] ウィンドウを選ぶこともできます。 ウィンドウが表示されたら、エディター ペインの下部にドッキングします。

[コンテナー] ウィンドウに実行中のコンテナーが表示され、それらに関する情報を確認できます。 環境変数、ラベル、ポート、ボリューム、ファイル システム、ログを表示できます。 ツール バーのボタンを使うと、コンテナー内にターミナル (シェル プロンプト) を作成したり、デバッガーをアタッチしたり、未使用のコンテナーを取り除いたりすることができます。 「コンテナー ウィンドウを使用する」を参照してください。

[ファイル] タブをクリックし、app フォルダーを展開して、発行されているアプリケーション ファイルを表示します。

また、イメージを表示し、それらに関する情報を検査することもできます。 [イメージ] タブをクリックし、プロジェクト用のものを探します。次に、 [詳細] タブを選んで、イメージに関する情報を含む json ファイルを表示します。

注意

[デバッグ] 構成ではボリュームのマウントを使用して、反復編集とデバッグ操作を提供するため、dev イメージにはアプリのバイナリやその他のコンテンツは含まれません。 すべてのコンテンツを含む実稼働イメージを作成するには、[リリース] 構成を使用します。

Docker イメージの発行

アプリの開発とデバッグのサイクルが完了すると、アプリの実稼働イメージを作成できます。

1. 構成ドロップダウン リストを [リリース] に変更し、アプリを構築します。

2. ソリューション エクスプローラーで対象のプロジェクトを右クリックし、 [発行] を選択します。

3. [発行先] ダイアログで [Docker コンテナー レジストリ] を選択します。

   

4. 次に、 [Azure Container Registry] を選択します。

   

5. [新しい Azure コンテナー レジストリを作成する] を選択します。

6. [新しい Azure コンテナー レジストリを作成する] 画面で、目的の値を入力します。

   設定	提案された値	説明
   DNS プレフィックス	グローバルに一意の名前	コンテナー レジストリを一意に識別する名前。
   サブスクリプション	サブスクリプションの選択	使用する Azure サブスクリプション。
   リソース グループ	myResourceGroup	コンテナー レジストリを作成するリソース グループの名前。 新しいリソース グループを作成する場合は、 [新規] を選択します。
   SKU	標準	コンテナー レジストリのサービス層
   レジストリの場所	近くの場所	自分に近いか、またはコンテナー レジストリを使用する他のサービスに近い地域内の場所を選択します。

   

7. [作成] 、 [完了] の順に選択します。

   

   発行プロセスが終了すると、発行設定を確認し、必要に応じて編集できます。また、 [発行] ボタンを使用して、再度イメージを発行することもできます。

   

   [発行] ダイアログを使用してもう一度開始するには、このページの [削除] リンクを使用して発行プロファイルを削除し、 [発行] をもう一度クリックします。

次のステップ

これでレジストリからコンテナーを、Azure Container Instances などの Docker イメージを実行できるホストにプルできるようになりました。

その他の技術情報

• Visual Studio によるコンテナー開発
• Docker を使用した Visual Studio 開発のトラブルシューティング
• Visual Studio コンテナー ツールの GitHub リポジトリ