如何運行已編譯的 SPA static 文件以及 ASP.NET 核心 Web API 在 docker 容器中發布？

Question

我創建了一個 ASP.NET Core Web API 項目，其中包含一個空的 wwwroot 文件夾，該文件夾應該包含我在同一解決方案的單獨文件夾中創建的 SPA ClientApp 的 static 文件。

我在 ConfigureServices 中添加了以下內容：

  services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "wwwroot";
            });

現在，我擁有的 ClientApp 文件夾與 API 項目的解決方案相同，dockerfile 在我的 API 項目中。 我想要做的是首先使用 npm 生成 static 文件，將其復制到 wwwroot，構建我的 API 項目並在發布時像 SPA 一樣運行它。 我想在 docker/docker-compose 文件中完成所有這些工作。

我已經為 API 配置了 dockerfile：

FROM mcr.microsoft.com/dotnet/aspnet:5.0

WORKDIR /app
COPY    bin/Debug/net5.0 .

ENTRYPOINT [ "dotnet","DemoApp.dll" ]

我想做這樣的事情：

### STAGE 1: Build ###
FROM node:12.7-alpine AS build

WORKDIR /app
COPY ../ClientApp/package.json ../ClientApp/package-lock.json ./

RUN npm install

COPY .../ClientApp .
RUN npm run build

### STAGE 2: Run ###
FROM mcr.microsoft.com/dotnet/aspnet:5.0

WORKDIR /app
COPY    bin/Debug/net5.0 .
COPY --from=build /app/wwwroot
ENTRYPOINT [ "dotnet","DemoApp.dll" ]

但是，在為 angular 構建 docker 時，它拋出錯誤提示找不到 ClientApp。 那么，我如何才能構建 angular 應用程序，然后將其部署到 wwwroot，然后在單個 docker 文件中運行 API 項目？

注意：在創建項目時，我沒有為后端選擇 SPA 模板，因為我想要關注點分離

Answer 1

因此，首先您的 ClientApp 文件夾應該存在於主機上當前目錄的上一層。 其次，當您復制 package.json 和復制其余文件時，您到 ClientApp 的路徑是不同的。 如果 npm 安裝正常（../ClientApp），那么您的 npm 運行構建路徑錯誤（.../ClientApp）。

WORKDIR /app
COPY ../ClientApp/package.json ../ClientApp/package-lock.json ./

RUN npm install

COPY ../ClientApp .
RUN npm run build

您還可以如下所示包括 dotnet 方面的還原和構建，而不必在復制 bin output 之前在主機上構建它。 FROM mcr.microsoft.com/dotnet/aspnet:5.0 WORKDIR /src COPY "<path to.csproj>"./ RUN dotnet restore COPY。 . 運行 dotnet build "<path to csproj" -c Release -o /app

Answer 2

我沒有使用mcr.microsoft.com/do.net/as.net:5.0和node:12.7-alpine進行測試，但使用當前的 LTS： mcr.microsoft.com/do.net/as.net:6.0 :6.0， mcr.microsoft.com/do.net/sdk:6.0和node:lts 。 所以根據自己的需要更換即可。 下面是完整的工作Dockerfile 。 每條興趣線上方都有解釋。

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

# stage 1. We will refer to this stage later using the name nodestage 
FROM node:lts AS nodestage
# Sets the working directory on the container to /src/ClientApp
WORKDIR /src/ClientApp
# Copies everything from your ClientApp directory in your local 
# drive to the container's working directory 
COPY ./ClientApp/. .
# Now runs npm install
RUN npm install

# stage 2
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["DemoApp.csproj", "./"]
RUN dotnet restore "DemoApp.csproj"
COPY . .

RUN dotnet build "DemoApp.csproj" -c Release -o /app/build

# Copies the /src/ClientApp from nodestage above to wwwroot
# in stage 2
COPY --from=nodestage /src/ClientApp wwwroot/
# Optionally lists (ls) the wwwroot directory
RUN ls -la wwwroot/*

# Rest are included for completeness but not related to the question 
FROM build AS publish
RUN dotnet publish "DemoApp.csproj" -c Release -o /app/publish

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