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

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

前提 条件

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

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

Docker のインストールについては、まず、Docker Desktop for Windows の情報を確認します。をインストールする前に知っておくべきこと。 次に、Docker Desktop インストールします。

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

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

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

   

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

   

   手記

   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. React.jsテンプレートで ASP.NET Core を使用して新しいプロジェクトを作成します。

   

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

   

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

   

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

デバッグ

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

   手記

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

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

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

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. URL を、手順 1 のプロキシサーバーのポート {proxy-port} を用いて https://localhost:{proxy-port} に設定します。

   

   このアクションにより、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. clientApp/src/components/のCounter.js部分にあるincrementCounter関数にブレークポイントを設定して、クライアント側のJavaScriptコードでブレークポイントにヒットできることを確認します。その後、[カウンター]ページの[インクリメント]ボタンをクリックしてブレークポイントにヒットしてみてください。

   

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

    

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

コンテナー ウィンドウ

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

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

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

また、画像を表示し、それらに関する情報を調べることもできます。 [Images] タブを選択し、プロジェクト用のタブを探し、[詳細] タブを選択して、画像に関する情報を含む json ファイルを表示します。

手記

開発 イメージには、アプリのバイナリやその他のコンテンツは含まれていません。これは、デバッグ 構成が反復的な編集およびデバッグの体験を提供するために、ボリュームマウントを使用しているためです。 すべてのコンテンツを含む運用イメージを作成するには、Release 構成を使用します。

Docker イメージを発行する

アプリの開発とデバッグのサイクルが完了したら、アプリの運用イメージを作成できます。

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

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

3. [ターゲットの発行] ダイアログで、Docker Container Registryを選択します。

   

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

   

5. [新しい Azure Container Registry を作成する] を選択します。

6. [新しい Azure Container Registry の作成] 画面 目的の値を入力します。

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

   

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

   

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

   公開の成功を示すスクリーンショット

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

次の手順

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

その他のリソース

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