带有 Docker 的 Angular 项目——客户端应用程序不复制

Question

So I'm admittedly new to Docker, and containerization in general. But I am having a problem--my docker image is not saving my Client App file, my angular file, at all. I believe this because on my docker desktop, the file size is 208.59 mbs, which is only a mb (and some change) bigger than the base image I am using (mcr.micrsofot.com/dontet/aspnet:6.0). I could be completely wrong here, but I cannot find my client app when I run the image in a container, and it only loads the default tutorial.

To Build...

docker build -t containerName .

To Run...

docker run -tdp 443:3000 containerName

Then I would open localhost:3000 and it gives me an error saying it cannot load the page. There are no problems in the build process, and my Dockerfile is as follows...

#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"]

I created the dockerfile using the add -> dockersupport function off of Visual Studio, and then added this section to install NodeJs, NVM and NPM. I thought maybe it was something in the csproj file, so I will include that as well. I have tried uninstalling and reinstalling dockerDesktop, I have tried building with this Dockerfile more than once, and I have ran ng build --prod to create the dist file, although I am aware that the csproj file does that for me. csproj file ...

<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>

I also thought maybe the fact that my client app is not in the wwwroot folder could be a problem, but I believe that things in the wwwroot are only for live versions of the site, and I am simply trying to create an image that has my site on it. Any help/resources is much appreciated.

Answer 1

Uninstalling and reinstalling docker did the trick. I realized after the first uninstall that localhost:80 was still loading the tutorial page, so I've come to the conclusion that it was just a weird bug--regardless, the issue was resolved after uninstalling and reinstalling docker, and rebuilding/rerunning the image. I did not change the dockerfile commands, and I did not change the csproj file, simply uninstalled, reinstalled, and ran the following commands

docker build -t myimageName .

and then for the run

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