快速入門：在Visual Studio中搭配 React 單頁應用程式使用 Docker

• Docker Desktop
• Visual Studio 2019， 已安裝 Web Development、Azure Tools 工作負載，和/或已安裝 .NET Core 跨平台開發 工作負載
• .NET Core 3.1 開發工具 使用 .NET Core 3.1 進行開發。
• 若要發佈至 Azure Container Registry，Azure 訂用帳戶。 註冊免費試用。
• Node.js
• 針對 Windows 容器，Windows 10 版本 1809 或更新版本，請使用本文所參考的 Docker 映像。

• Docker Desktop
• Visual Studio 2022 具備 Web Development、Azure Tools 工作負載，和/或安裝了 .NET Core 跨平台開發 工作負載
• 若要發佈至 Azure Container Registry，Azure 訂用帳戶。 註冊免費試用。
• Node.js
• 針對 Windows 容器，若要使用本文中參考的 Docker 映像，須使用 Windows 10 版本 1809 或更新的版本。

1. 使用 ASP.NET Core 搭配 React.js 範本建立新專案。

   

2. 在 [其他資訊 畫面上，您無法選取 [啟用 Docker 支援，但別擔心，您可以稍後新增該支援。

   

3. 以滑鼠右鍵按兩下項目節點，然後選擇 [[新增>Docker 支援] 將 Dockerfile 新增至您的專案。

   

4. 選取容器類型。

下一個步驟會根據您使用Linux容器或 Windows 容器而有所不同。

修改 Dockerfile （Linux 容器）

Dockerfile，是在專案中創建最終 Docker 映像的配方。 如需瞭解其中命令，請參閱 Dockerfile 參考。

預設的 Dockerfile 會使用基底映像來執行容器，但當您想要也能夠在其中執行 Node.js 應用程式時，您需要安裝 Node.js，這表示在 Dockerfile 的幾個位置新增一些安裝命令。 安裝命令需要提高的許可權，因為變更會影響容器的特殊許可權系統檔案和資料夾。

當 [新專案] 對話框中的 [設定 HTTPS] 複選框被勾選時，Dockerfile 會公開兩個埠。 一個埠用於 HTTP 流量;另一個埠用於 HTTPS。 如果未勾選該框，只會對 HTTP 流量開放一個埠（80）。

如果您針對 .NET 8 或更高版本開發，Visual Studio 使用一般使用者帳戶來建立預設的 Dockerfile（請尋找 USER app這一行），但該帳戶缺乏安裝 Node.js所需的管理許可權。 為了應對這種情況，請執行以下操作：

1. 在 Dockerfile 中，刪除行 USER app。
2. 將 Dockerfile 中第一部分公開的埠變更為 80 作為 HTTP 請求的埠，以及在您建立專案時選擇支援 HTTPS 的情況下，443 作為 HTTPS 請求的埠。
3. 編輯 launchSettings.json，將埠參考變更為80和443;將 8080 取代為 HTTP 的 80，而 8081 則取代為 HTTPS 的 443。

針對所有 .NET 版本，請使用下列步驟來更新 Dockerfile 以安裝 Node.js：

1. 新增下列幾行來安裝 curl、Node.js 14.x，以及容器中某些必要的 Node 連結庫。 請務必在第一個區段中新增這兩行，以便將 Node 套件管理員的安裝 npm.exe 新增至基底映像，並在 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

Dockerfile 現在看起來應該像這樣：

#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:3.1 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:3.1 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/aspnet 映射為基礎，並包含透過建置專案並將其新增至容器來修改基底映射的指示。

修改 Dockerfile （Windows 容器）

按兩下項目節點開啟項目檔，並將下列屬性新增為 <PropertyGroup> 專案的子系，以更新項目檔 [*.csproj] ：

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

將下列幾行加入以更新 Dockerfile。 這些行會將 Node 和 'npm'' 複製到容器。

1. 將 # escape=` 新增至 Dockerfile 的第一行

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 現在看起來應該像這樣：

   # escape=`
   #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
   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
   
   FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base
   WORKDIR /app
   EXPOSE 80
   EXPOSE 443
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   
   FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   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"]
   

5. 將 **/bin移除以更新 .dockerignore 檔案。

如果您使用 Visual Studio 2022 17.8 版或更新版本，請遵循下列步驟：

1. 使用 React 和 ASP.NET Core 範本建立新專案。

   

2. 在 [其他資訊 畫面上，選取 [啟用容器支援] 。 請務必選取 [Dockerfile] 選項，因為您必須手動變更該檔案。

   

   注意

   在某些 Visual Studio 2022 版本中，此選項並未啟用，但您可以稍後新增該支援。

   Visual Studio 會建立兩個專案 -一個用於 React JavaScript 用戶端程式代碼，另一個專案用於 ASP.NET Core C# 伺服器程式代碼。

3. 如果您在專案建立期間未新增 Docker 容器支援，請在伺服器項目節點上按下滑鼠右鍵，然後選擇 [新增>Docker 支援]，並確定選擇 [Dockerfile] 選項以建立 Dockerfile。

   

4. 選取容器類型。

針對 Visual Studio 2022 17.0 版至 17.7，請使用下列步驟：

1. 使用 ASP.NET Core 搭配 React.js 範本建立新專案。

   

2. 在 [其他資訊 畫面上，您無法選取 [啟用 Docker 支援，但別擔心，您可以稍後新增該支援。

   

3. 以滑鼠右鍵按兩下項目節點，然後選擇 [[新增>Docker 支援] 將 Dockerfile 新增至您的專案。

   

4. 選取容器類型。

使用 Visual Studio 2022 17.9 版或更新版本以及使用 vite.js的 React 和 ASP.NET Core 範本，專案已設定為同時啟動用戶端和伺服器專案，並提供偵錯支援，但您必須設定正確的埠，讓單頁應用程式 （SPA） Proxy 用來存取容器中執行的 ASP.NET Core 伺服器。 您可以從 Visual Studio 中的 [容器] 視窗取得主機埠，並在 React 專案中設定主機埠，如 建立 React 應用程式 - Docker中所述。

您也可以停用瀏覽器中用於伺服器的啟動功能，該伺服器已設為使用 Swagger 開啟，不過在此情境下，Swagger 並非必要。 若要停用瀏覽器啟動，請開啟 [屬性] （Alt+Enter），移至 [偵錯] 標籤，然後按一下 [開啟偵錯啟動設定檔] UI的鏈接，然後清除 [啟動瀏覽器] 複選框。

如果您正在使用舊版的 Visual Studio 2022，請繼續閱讀以設置使用單頁應用程式（SPA）代理伺服器的偵錯功能。

專案會在偵錯期間使用SPA Proxy。 參閱 改善的單頁應用程式 (SPA) 範本。 偵錯時，JavaScript 用戶端會在主計算機上執行，但 ASP.NET Core 伺服器程式代碼會在容器中執行。 發行時，不會執行 Proxy，而且用戶端程式代碼會在與 ASP.NET Core 程式代碼相同的伺服器上執行。 您已有偵錯配置檔 *Docker，可用來偵錯伺服器程式代碼。 若要偵錯 JavaScript 用戶端程式代碼，您可以建立額外的偵錯配置檔。 偵錯 JavaScript 時，您也需要從命令提示字元手動啟動 Proxy。 您可以讓它在多個偵錯會話中持續執行。

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
   

   注意

   請注意本地 URL。 您必須在偵錯啟動配置檔中提供此功能，該配置檔會儲存在 launchSettings.json 檔案中。

3. 開啟包含偵錯配置檔的下拉式清單（在綠色三角形圖示旁，或 [開始] 按鈕旁），然後選擇 [{ProjectName} 偵錯屬性]，然後選擇 [Docker 配置檔]。

4. 請檢查 環境變數 區段，如果還不存在，請新增下列環境變數：

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. 將 URL 設定為 https://localhost:{proxy-port}，其中 {proxy-port} 是來自 Proxy 伺服器的埠（步驟 1）。

   

   此動作會變更 launchSettings.json 檔案中的 Docker 條目，並為在主機上運行的本機 Proxy 啟動正確的 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
      }
   }
   

   重要

   如果您使用 Proxy，請勿將 [啟動設定] 選項 publishAllPorts 設定為 [true]。 此選項會將所有公開的埠發佈至隨機埠，當您在 SPA Proxy 中設定特定埠時，將無法運作。

7. 開啟 ClientApp/src/setupProxy.js 檔案，然後變更將目標設定為在容器上使用 localhost 位址和埠的行。 您可以在 [容器] 視窗的 [連接埠] 頁籤上找到此連接埠。

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

   如果您使用 HTTPS，請務必選擇正確的 HTTPS 連接埠，在本教學課程中為 443。

8. 使用除錯啟動應用程式（F5）。

   

   如果您收到嘗試寫入輸出元件的組建錯誤，您可能必須停止先前執行的容器來解除鎖定檔案。

9. 在 ClientApp/src/components/Counter.js 中設置斷點，並確認可以在用戶端 JavaScript 程式碼中用 incrementCounter 函式的斷點。然後透過點擊計數器頁面上的 Increment 按鈕，測試該斷點是否被觸發。

   

10. 接下來，嘗試在 ASP.NET Core 伺服器端的程式碼中觸發斷點。 在 Get 方法的 WeatherController.cs 中設定斷點，並嘗試將 /weatherforecast 附加至基底 localhost 和埠 URL 以啟用該程式碼。

    

11. 如果容器埠變更，如果您進行重大變更，例如更新 launchSettings.json 或更新 IDE 中的偵錯啟動配置檔，則需要更新 setupProxy.js 中的埠，並重新啟動 Proxy。 終止目前正在運行的 proxy （在命令視窗中使用Ctrl+C），然後使用相同的命令重新啟動 npm run start。

從工具列中的 [偵錯] 下拉式清單中選取 [Docker]，然後開始對應用程式進行偵錯。 您可能會看到訊息，其中包含信任憑證的提示;選擇信任憑證以繼續。 第一次建置時，Docker 會下載基底映射，因此可能需要更長的時間。

[輸出] 視窗中的 [Container Tools] 選項會顯示正在執行的動作。 您應該會看到與 npm.exe相關聯的安裝步驟。

瀏覽器會顯示應用程式的首頁。

1. 將組態下拉式清單變更為 Release 並建置應用程式。

2. 在 [方案總管] 中以滑鼠右鍵點擊您的專案，然後選擇 [發行 ]。

3. 在 [發佈目標] 對話框中，選取 [Docker Container Registry]。

   

4. 接下來，選擇 Azure Container Registry。

   

5. 選擇 [建立新的 Azure Container Registry。

6. 在 [建立新的 Azure Container Registry 畫面中填入所需的值。

   設定	建議的值	描述
   DNS 前置詞	全域唯一名稱	可唯一識別容器註冊表的名稱。
   訂用帳戶	選擇您的訂用帳戶	要使用的 Azure 訂用帳戶。
   資源群組	myResourceGroup	要在其中建立容器登錄的資源群組名稱。 選擇 新增 以建立新的資源群組。
   SKU	標準	容器登錄的服務層級
   登錄位置	離您很近的位置	選擇 區域中的位置， 靠近您使用容器登錄的其他服務。

   

7. 選取 [建立]，然後選取 [完成]。

   

   發佈程序結束時，您可以檢閱發佈設定，並視需要編輯這些設定，或使用 [發佈] 按鈕再次發佈映像。

   

   若要再次使用 [發佈] 對話框，請使用此頁面上的 [刪除] 連結來刪除發佈設定檔，然後選擇 [發佈]。

1. 將組態下拉式清單變更為 Release 並建置應用程式。

2. 以滑鼠右鍵按兩下 [方案總管] 中的項目，然後選擇 [發行 ]。

3. 在 [發佈目標] 對話框中，選取 [Docker Container Registry]。

   

4. 接下來，選擇 Azure Container Registry。

   

5. 選擇 [建立新的 Azure Container Registry。

6. 在 [建立新的 Azure Container Registry 畫面中填入所需的值。

   設定	建議的值	描述
   DNS 前綴	全域唯一名稱	唯一識別容器登錄的名稱。
   訂用帳戶	選擇您的訂用帳戶	要使用的 Azure 訂用帳戶。
   資源群組	myResourceGroup	要在其中建立容器登錄的資源群組名稱。 選擇 新建 以建立新的資源群組。
   SKU	標準	容器登錄的服務層級
   登錄位置	靠近您的位置	選擇 區域中的位置， 靠近您使用容器登錄的其他服務。

   

7. 選取 [建立]，然後選取 [完成]。

   

   發佈程序結束時，您可以檢閱發佈設定，並視需要編輯這些設定，或使用 [發佈] 按鈕再次發佈映像。

   

   若要再次使用 [發行] 對話框，請使用此頁面上的 [刪除] 連結來刪除發行配置檔，然後再次選擇 [發行]。