docker构建应用_使用docker使用角度前端构建ASP网络核心应用程序

最新推荐文章于 2022-08-12 05:58:52 发布

weixin_26722099

最新推荐文章于 2022-08-12 05:58:52 发布

阅读量107

点赞数

文章标签： docker java python 人工智能 vue ViewUI

原文链接：https://medium.com/swlh/building-asp-net-core-applications-with-an-angular-frontend-using-docker-de504ff5efe7

版权

docker构建应用

Running .Net Core applications with a frontend SPA framework like Angular or React is now as simple as using one of the built-in templates in Visual Studio. Visual Studio also provides excellent docker support but there can be a few gotchas along the way that we need to be aware of.

现在，使用前端SPA框架(例如Angular或React)运行.Net Core应用程序就像使用Visual Studio中的内置模板之一一样简单。 Visual Studio还提供了出色的Docker支持，但是在此过程中我们需要注意一些陷阱。

In this blog post, we’ll be looking at building an ASP.Net Core application with an Angular SPA for the frontend and creating a ready-to-publish docker image out of it. The first thing we need is to create the project.

在此博客文章中，我们将研究为前端构建带有Angular SPA的ASP.Net Core应用程序，并从中创建可发布的Docker映像。我们需要做的第一件事就是创建项目。

In Visual Studio, create a new project using the Asp.Net Core Web Application template and click next. Give the project a name and click create. On the next step, select Angular from the list of templates and click create.

在Visual Studio中，使用Asp.Net Core Web应用程序模板创建一个新项目，然后单击“下一步”。为项目命名，然后单击创建。在下一步中，从模板列表中选择Angular，然后单击创建。

Run the project by hitting F5. You should see the application open with the ‘hello world’ page.

点击F5运行项目。您应该会在“ hello world”页面上看到该应用程序已打开。

Now to add docker support, we can right click the project and click on docker support under the add menu.

现在要添加docker支持，我们可以右键单击该项目，然后在添加菜单下单击docker support。

This will create a docker file in the project which looks like this,

这将在项目中创建一个如下所示的docker文件，

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
WORKDIR /src
COPY ["DotNetAngular.csproj", ""]
RUN dotnet restore "./DotNetAngular.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "DotNetAngular.csproj" -c Release -o /app/buildFROM build AS publish
RUN dotnet publish "DotNetAngular.csproj" -c Release -o /app/publishFROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "DotNetAngular.dll"]

Taking a closer look at the sections, we see a multi-stage docker build process with the first section showing a base image (aspnet:3.1-buster-slim) which will contain our application,

仔细查看这些部分，我们看到一个多阶段的docker构建过程，第一部分显示了一个基本映像( aspnet：3.1-buster-slim )，它将包含我们的应用程序，

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

The next section shows another image (sdk:3.1-buster) which is used to build our application,

下一部分显示了另一个图像( sdk：3.1-buster )，该图像用于构建我们的应用程序，

FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
WORKDIR /src
COPY ["DotNetAngular.csproj", ""]
RUN dotnet restore "./DotNetAngular.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "DotNetAngular.csproj" -c Release -o /app/buildFROM build AS publish
RUN dotnet publish "DotNetAngular.csproj" -c Release -o /app/publish

Once the build process is complete, the contents of our application is copied into base, ending the process with an image containing our application.

构建过程完成后，我们的应用程序的内容将被复制到基础中，并以包含我们应用程序的图像结束该过程。

Lets try to build this image that is ready to publish with docker. On a terminal window, navigate to the root of your project and try to build the image,

让我们尝试构建准备好与Docker发布的映像。在终端窗口上，导航到项目的根目录并尝试构建图像，

docker build -t dotnetangular .

Ooops! Errors!

哎呀！错误！

We can see the publish process failed with an error when trying to do an npm install,

尝试执行npm安装时，我们可以看到发布过程失败并出现错误，

/bin/sh: 2: /tmp/tmpa036048c83bb44a0a2d9834ce6d641b7.exec.cmd: npm: not found
/src/DotNetAngular.csproj(42,5): error MSB3073: The command "npm install" exited with code 127.
The command '/bin/sh -c dotnet publish "DotNetAngular.csproj" -c Release -o /app/publish' returned a non-zero code: 1

Where is the npm install coming from? Upon editing the project file, the target for publish reveals the exact set of commands that are run to build the angular project,

npm安装来自哪里？编辑项目文件后，发布目标将揭示为构建角度项目而运行的确切命令集，

<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" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " /><!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

The target named ‘PublishRunWebpack’ is attempting to build the angular project, and the reason for failure is that it cannot find the npm command in the build container since the build image does not come with nodejs installed.

目标名为“ PublishRunWebpack”的目标正在尝试构建有角度的项目，而失败的原因是，由于构建映像未随nodejs一起安装，因此无法在构建容器中找到npm命令。

A simple fix would just be to install nodejs in the build container before starting the dotnet build process. To do this, edit the docker file and add the lines to install nodejs,

一个简单的修复方法是在开始dotnet构建过程之前将nodejs安装在构建容器中。为此，请编辑docker文件并添加以下行以安装nodejs，

FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
# Install NodeJs
RUN apt-get update && \
apt-get install -y wget && \
apt-get install -y gnupg2 && \
wget -qO- https://deb.nodesource.com/setup_12.x | bash - && \
apt-get install -y build-essential nodejs
# End Install
WORKDIR /src
COPY ["DotNetAngular.csproj", ""]
RUN dotnet restore "./DotNetAngular.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "DotNetAngular.csproj" -c Release -o /app/build

Note: The node js version is set to 12.x but you can change this to match the nodejs version that you need for your project.

注意：node js版本设置为12.x，但是您可以更改它以匹配项目所需的nodejs版本。

Run the docker build command again and the build should go through successfully.

再次运行docker build命令，构建应该成功完成。

Although this is working, we can make the process run faster by deploying an image of the build container with nodejs installed in it. This can be made available in your container registry or on docker hub, and we can then use this image in our docker file instead of the official image. I already have a version of this deployed to my docker hub here (Github). Another good addition would be to run the unit tests before the publish step and to add the — no-cache option to the dotnet restore command since docker will take care caching layers. (Thanks Richard Collette for the tip)

尽管这是可行的，但我们可以通过部署安装了nodejs的构建容器的映像来使过程运行更快。可以在您的容器注册表或Docker Hub上使用它，然后我们可以在Docker文件中使用该映像而不是正式映像。我已经在这里( Github )将此版本部署到了我的Docker中心。另一个不错的选择是在发布步骤之前运行单元测试，并在dotnet restore命令中添加— no-cache选项，因为docker会注意缓存图层。 (感谢Richard Collette的提示)

To use it, revert the docker file build section to use this image and add the step to run unit tests, like so,

要使用它，请还原docker file build部分以使用此映像，并添加步骤以运行单元测试，如下所示，

FROM ashwin027/dotnet-3.1-buster-node:latest AS build
WORKDIR /src
COPY ["DotNetAngular.csproj", ""]
RUN dotnet restore --no-cache "./DotNetAngular.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "DotNetAngular.csproj" -c Release -o /app/buildFROM build AS publish
RUN dotnet test "DotNetAngular.csproj" --configuration Release --no-restore
RUN dotnet publish "DotNetAngular.csproj" -c Release -o /app/publish

Lets start a container based on this new image,

让我们根据这个新图像启动一个容器，

docker run -p 8001:80 -d dotnetangular

Open the app at http://localhost:8001 and you should see the app load successfully.

在http：// localhost：8001上打开应用程序，您应该会看到该应用程序已成功加载。

If you have further questions on the topic, feedback on the article or just want to say hi you can hit me up on twitter or linkedin.

如果您对此主题还有其他疑问，请反馈该文章，或者只是想打个招呼，可以在Twitter或Linkedin上打我。

翻译自: https://medium.com/swlh/building-asp-net-core-applications-with-an-angular-frontend-using-docker-de504ff5efe7

docker构建应用

weixin_26722099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
docker构建应用_使用docker使用角度前端构建ASP网络核心应用程序

docker构建应用Running .Net Core applications with a frontend SPA framework like Angular or React is now as simple as using one of the built-in templates in Visual Studio. Visual Studio also provides excel...
复制链接

扫一扫