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

Visual Studio を使用すれば、コンテナー化された ASP.NET Core アプリ (React.js シングルページ アプリなどのクライアント側 JavaScript を使用したものを含む) のビルド、デバッグ、実行が簡単にでき、それを Azure Container Registry、Docker Hub、Azure App Service、または独自のコンテナー レジストリに発行することもできます。 この記事では、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. [追加情報] 画面では [Docker サポートを有効にする] が選択できませんが、心配はいりません。後でそのサポートを追加できます。

   

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

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

   

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

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

1. [ASP.NET Core with React.js]\(React.js 付きの ASP.NET Core\) テンプレートを使用して新しいプロジェクトを作成します。

   

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

   

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

   

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

次のステップは、Linux コンテナーと Windows コンテナーのどちらを使用しているかによって異なります。

Dockerfile (Linux コンテナー) を変更する

Dockerfile (Docker の最終イメージを作成するためのレシピ) は、プロジェクトで作成されます。 その中に含まれるコマンドの詳細については、「Dockerfile reference」 (Dockerfile リファレンス) を参照してください。

既定の Dockerfile では基本イメージを使用してコンテナーを実行しますが、Node.js アプリケーションも実行できるようにする場合は、Node.js をインストールする必要があります。つまり、Dockerfile のいくつかの場所にインストール コマンドを追加する必要があります。 変更はコンテナーの特権システム ファイルおよびフォルダーに影響するため、インストール コマンドには管理者特権のアクセス許可が必要です。

新しいプロジェクト ダイアログの [Configure for HTTPS](HTTPS 用に構成する) チェック ボックスがオンになっている場合は、Dockerfile によって 2 つのポートが公開されます。 1 つのポートは HTTP トラフィック用、もう 1 つのポートは HTTPS 用に使用されます。 チェック ボックスがオンになっていない場合は、HTTP トラフィック用に単一のポート (80) が公開されます。

.NET 8 以降を対象としている場合、Visual Studio が通常のユーザー アカウントを使用して作成する既定の Dockerfile (行 USER app を検索) を使用しますが、そのアカウントには Node.js のインストールに必要な管理者特権のアクセス許可がありません。 この状況を考慮するには、次の操作を行います。

1. Dockerfile で、行 USER app を削除します。
2. Dockerfile の最初のセクションで公開されているポートを HTTP 要求用にはポート 80 に変更し、(プロジェクトの作成時に HTTPS をサポートすることを選択した場合) HTTPS 要求用には 443 ポートに変更します。
3. launchSettings.json を編集して、ポート参照をそれぞれ 80 と 443 に変更します。HTTP の場合は 8080 から 80 に置き換え、HTTPS の場合は 8081 から 443 に置き換えます。

すべての .NET バージョンで、次の手順を使用して、Dockerfile を更新して Node.js をインストールします。

1. コンテナーに curl、Node.js 14.x、および特定の必要な Node ライブラリをインストールするための次の行を追加します。 これらの行を最初のセクションに必ず追加してください。これにより、基本イメージと build セクション内に、インストールされた Node パッケージ マネージャー npm.exe が追加されます。

RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

現在、Dockerfile の内容は次のようになっているはずです。

#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["reactapp1.client/nuget.config", "reactapp1.client/"]
COPY ["ReactApp1.Server/ReactApp1.Server.csproj", "ReactApp1.Server/"]
COPY ["reactapp1.client/reactapp1.client.esproj", "reactapp1.client/"]
RUN dotnet restore "./ReactApp1.Server/./ReactApp1.Server.csproj"
COPY . .
WORKDIR "/src/ReactApp1.Server"
RUN dotnet build "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ReactApp1.Server.dll"]

Visual Studio 2022 バージョン 17.0 から 17.7 の場合は、次のようになります。

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["ProjectSPA1/ProjectSPA1.csproj", "ProjectSPA1/"]
RUN dotnet restore "ProjectSPA1/ProjectSPA1.csproj"
COPY . .
WORKDIR "/src/ProjectSPA1"
RUN dotnet build "ProjectSPA1.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "ProjectSPA1.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ProjectSPA1.dll"]

前の Dockerfile は、mcr.microsoft.com/dotnet/core/aspnet イメージに基づいており、プロジェクトをビルドしてコンテナーに追加することで基本イメージを変更するための手順が含まれています。

Dockerfile (Windows コンテナー) を変更する

プロジェクト ノードをダブルクリックしてプロジェクト ファイルを開き、次のプロパティを <PropertyGroup> 要素の子として追加して、プロジェクト ファイル (*.csproj) を更新します。

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Note

ここで Dockerfile によって Dockerfile の先頭にステージが追加されるため、DockerfileFastModeStage への変更が必須です。 パフォーマンスを最適化するために、Visual Studio では高速モードを使用しますが、適切なステージが使用されている場合にのみ機能します。 既定値は Dockerfile の最初のステージであり、この例では Node.js をダウンロードするために base から別のステージに変更されています。 高速モードの詳細については、「Visual Studio で Docker コンテナーをカスタマイズする」を参照してください。

次の行を追加して、Dockerfile を更新します。 これらの行は、ノードと npm をコンテナーにコピーします。

1. Dockerfile の最初の行に # escape=` を追加します

2. FROM ... base の前に、次の行を追加します

   FROM mcr.microsoft.com/powershell AS downloadnodejs
   ENV NODE_VERSION=14.16.0
   SHELL ["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
   RUN Invoke-WebRequest -OutFile nodejs.zip -UseBasicParsing "https://nodejs.org/dist/v$($env:NODE_VERSION)/node-v$($env:NODE_VERSION)-win-x64.zip"; `
       Expand-Archive nodejs.zip -DestinationPath C:\; `
       Rename-Item "C:\node-v$($env:NODE_VERSION)-win-x64" c:\nodejs
   

3. FROM ... build の前と後に、次の行を追加します

   COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
   

4. 完成した Dockerfile は次のようになります。

   #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images   for faster debugging.
   
   #Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
   #For more information, please see https://aka.ms/containercompat
   # escape=`
   FROM mcr.microsoft.com/powershell:nanoserver-1809 AS downloadnodejs
   ENV NODE_VERSION=14.16.0
   SHELL ["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
   RUN Invoke-WebRequest -OutFile nodejs.zip -UseBasicParsing "https://nodejs.org/dist/v$($env:NODE_VERSION)/node-v$($env:NODE_VERSION)-win-x64.zip"; Expand-Archive nodejs.zip -DestinationPath C:\; Rename-Item "C:\node-v$($env:NODE_VERSION)-win-x64" c:\nodejs
   
   FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
   WORKDIR /app
   EXPOSE 80
   EXPOSE 443
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   
   FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   WORKDIR /src
   COPY ["Project1-SPA-Windows/Project1-SPA-Windows.csproj", "Project1-SPA-Windows/"]
   RUN dotnet restore "Project1-SPA-Windows/Project1-SPA-Windows.csproj"
   COPY . .
   WORKDIR "/src/Project1-SPA-Windows"
   RUN dotnet build "Project1-SPA-Windows.csproj" -c Release -o /app/build
   
   FROM build AS publish
   RUN dotnet publish "Project1-SPA-Windows.csproj" -c Release -o /app/publish /p:UseAppHost=false
   
   FROM base AS final
   WORKDIR /app
   COPY --from=publish /app/publish .
   ENTRYPOINT ["dotnet", "Project1-SPA-Windows.dll"]
   

5. **/bin を削除して、.dockerignore ファイルを更新します。

デバッグ

Visual Studio 2022 バージョン 17.8 以降と React および ASP.NET Core テンプレートを使用すると、プロジェクトはデバッグをサポートしてクライアント プロジェクトとサーバー プロジェクトの両方を開始するように既に構成されています。

以前のバージョンの Visual Studio をご利用の場合は、このまま読み進めて、シングルページ アプリケーション (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 リポジトリ