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

使用 Visual Studio，您可以輕鬆地建置、偵錯及執行容器化 ASP.NET Core 應用程式，包括具有用戶端 JavaScript 的應用程式，例如 React.js 單頁應用程式（SPA），並將其發佈至 Azure Container Registry、Docker Hub、Azure App Service 或您自己的 Container Registry。在本文中，我們會發佈至 Azure Container Registry。

Note

本文適用於 Visual Studio 2019。如果您使用 Visual Studio 2022，新的 JavaScript 專案範本就會存在，讓案例更容易。請參閱教學課程：在 Visual Studio 中使用 React 建立 ASP.NET Core 應用程式 - Docker。

Prerequisites

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

安裝和設定

針對 Docker 安裝，請先檢閱適用於 Windows Docker Desktop 的資訊：安裝之前要知道的事項。接下來，安裝 Docker Desktop。

建立專案並新增 Docker 支援

使用 ASP.NET Core 搭配 React.js 範本建立新專案。
在 [其他資訊 畫面上，您無法選取 [啟用 Docker 支援，但別擔心，您可以稍後新增該支援。
以滑鼠右鍵按兩下項目節點，然後選擇 [[新增>Docker 支援] 將 Dockerfile 新增至您的專案。
選取容器類型。

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

Note

如果您在 Visual Studio 2022 或更新版本中使用最新的項目範本，則不需要修改 Dockerfile。

修改 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所需的管理許可權。為了應對這種情況，請執行以下操作：

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

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

新增下列幾行來安裝 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>

Note

變更 DockerfileFastModeStage 是必要的，因為這裡的 Dockerfile 會將階段新增到 Dockerfile 的最前面。為了將效能優化，Visual Studio 會使用 Fast 模式，但只有在使用正確的階段時才能運作。預設值是 Dockerfile 中的第一個階段，在此範例中，會從 base 變更為其他值，以便下載 Node.js。如需 快速模式的詳細資訊，請參閱在Visual Studio 中自定義 Docker 容器。

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

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

在 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

在 FROM ... build 前後新增下列這一行

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

完整的 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"]

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

Debug

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

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

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

執行應用程式的螢幕快照。

容器視窗

開啟 [容器] 工具視窗。您可以在 [檢視 >>下方的功能表上找到它，或 按 ctrl+Q，然後在搜尋方塊中開始輸入 containers，然後從結果中選擇 [容器] 視窗。當視窗出現時，請將視窗停駐在編輯器窗格底端。

[容器] 視窗會顯示執行中的容器，並可讓您檢視其相關信息。您可以檢視環境變數、標籤、埠、磁碟區、檔案系統和記錄。工具列按鈕可讓您在容器內建立終端機（shell 提示字元）、連接除錯器，或清除未使用的容器。參見使用 [容器] 視窗。

[容器] 視窗的螢幕快照。

按兩下 [檔案] 索引標籤，然後展開 [app] 資料夾以查看已發佈的應用程式檔。

您也可以檢視影像，並檢查其相關信息。選擇 [影像] 索引標籤，找出您的專案，然後選擇 [詳細數據] 索引卷標，以檢視包含影像相關信息的 json 檔案。

顯示影像和詳細資料的 [容器] 視窗螢幕快照。

Note

開發映像檔不包含應用程式二進位檔和其他內容，因為偵錯組態使用磁碟區掛載來提供反覆編輯和偵錯的體驗。若要建立包含所有內容的生產映像，請使用 Release 組態。

發佈 Docker 映像

完成應用程式的開發和偵錯周期之後，您就可以建立應用程式的生產映像。

將組態下拉式清單變更為 Release 並建置應用程式。
在 [方案總管] 中以滑鼠右鍵點擊您的專案，然後選擇 [發行 ]。
在 [發佈目標] 對話框中，選取 [Docker Container Registry]。
接下來，選擇 Azure Container Registry。
選擇 [建立新的 Azure Container Registry。

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

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

Visual Studio 建立 Azure Container Registry 對話框的螢幕快照。

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

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

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

後續步驟

zh-TW: 您現在可以將容器從註冊表中提取到任何能夠運行 Docker 映像檔的主機，例如 Azure Container Instances。

其他資源

使用 Visual Studio 進行容器開發
針對 Visual Studio 開發使用 Docker 進行疑難解答
Visual Studio Container Tools GitHub 儲存庫

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-09-18

共用方式為

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

Prerequisites

安裝和設定

建立專案並新增 Docker 支援

修改 Dockerfile （Linux 容器）

修改 Dockerfile （Windows 容器）

Debug

容器視窗

發佈 Docker 映像

後續步驟

其他資源

意見反應

其他資源