帶有 Docker 的 Angular 項目——客戶端應用程序不復制

Question

所以我承認我對 Docker 和一般的容器化很陌生。 但是我遇到了一個問題——我的 docker 映像根本沒有保存我的客戶端應用程序文件、我的 angular 文件。 我相信這是因為在我的 docker 桌面上，文件大小為 208.59 mbs，僅比我使用的基本映像（mcr.micrsofot.com/dontet/aspnet:6.0）大 1 mb（和一些變化）。 我在這里可能完全錯了，但是當我在容器中運行圖像時找不到我的客戶端應用程序，它只加載默認教程。

建立...

docker build -t containerName .

跑步...

docker run -tdp 443:3000 containerName

然后我會打開 localhost:3000 它給我一個錯誤，說它無法加載頁面。 構建過程沒有任何問題，我的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:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build

ENV NODE_VERSION=16.13.0
RUN apt install -y curl
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
ENV NVM_DIR=/root/.nvm
RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
RUN node --version
RUN npm --version

WORKDIR /src
COPY ["projectName.csproj", "."]
RUN dotnet restore "./projectName.csproj"
COPY . .
WORKDIR "/src/."

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

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

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

我使用 Visual Studio 的 add -> dockersupport 函數創建了 dockerfile，然后添加了這個部分來安裝 NodeJs、NVM 和 NPM。 我想這可能是 csproj 文件中的內容，所以我也會將其包含在內。 我已經嘗試卸載並重新安裝 dockerDesktop，我曾多次嘗試使用此 Dockerfile 進行構建，並且我已經運行 ng build --prod 來創建 dist 文件，盡管我知道 csproj 文件為我做了這些。 csproj 文件...

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <SpaProxyServerUrl>https://localhost:44401</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <ImplicitUsings>enable</ImplicitUsings>
    <UserSecretsId>alot of letters and numbers</UserSecretsId>
    <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
    <DockerfileContext>.</DockerfileContext>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.4" />
    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.14.0" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

    <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>
  
  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

我還認為我的客戶端應用程序不在 wwwroot 文件夾中的事實可能是一個問題，但我相信 wwwroot 中的內容僅適用於網站的實時版本，我只是想創建一個包含我的圖像網站就可以了。 非常感謝任何幫助/資源。

Answer 1

卸載並重新安裝 docker 就可以了。 我在第一次卸載后意識到 localhost:80 仍在加載教程頁面，所以我得出的結論是這只是一個奇怪的錯誤——無論如何，在卸載並重新安裝 docker 並重建/重新運行后問題得到了解決圖片。 我沒有改dockerfile命令，也沒有改csproj文件，簡單卸載，重新安裝，運行如下命令

docker build -t myimageName .

然后運行

docker run -dp 80:80/tcp myimageName:latest