如何在Linux Docker容器中运行VS2017 Angular项目？ [英] How can I run a VS2017 Angular project in a Linux Docker container?

问题描述

注意：已经有关于此主题的几个问题，我在下面引用。虽然这个问题在某种意义上是重复的，但我尝试遵循其他问题的建议却没有成功。有时这是因为答案现在指向相关软件包的过时版本，有时是因为不清楚如何实施更改。

NOTE: there are several questions about this topic already, which I reference below. While this question is in that sense a duplicate, I have tried to follow the advice in those other questions without success. Sometimes that's because the answer now refers to an out-of-date version of the relevant packages, and sometimes because it's not clear exactly how to implement the changes.

此问题我试图记录一个最小的（不起作用的）示例，并提供有关如何重现此问题的完整说明。希望我可以使用类似的清晰说明来更新它。

This question is my attempt to document a minimal, (non-)working example, with full instructions of how to reproduce the issue. Hopefully I can update it with similarly clear instructions on how to fix it.

我具有以下环境：

• Windows 10 （企业版，1709年）


• VS2017 strong>（15.8.4）


• 节点（11.5）


• Angular CLI （ 7.1.4）


• Docker Desktop （社区，2.0.0.2）

• Windows 10 (enterprise, 1709)
• VS2017 (15.8.4)
• Node (11.5)
• Angular CLI (7.1.4)
• Docker Desktop (community, 2.0.0.2)

这是我创建Angular SPA项目所遵循的确切步骤：

Here are the exact steps I followed to create an Angular SPA project:

为项目创建目录

Create a directory for the project

md MyAngularWebsite
cd MyAngularWebsite

使用 dotnet CLI（使用Angular模板）创建项目

Create the project using the dotnet CLI (using the Angular template)

dotnet new angular

如果我在VS中打开此解决方案，则会看到所有希望看到的文件：

If I open this solution in VS, I see all the files I'd expect to see:

...如果我运行它（在IIS Express），它可以按预期工作：

...and if I run it (in IIS Express) it works as expected:

到目前为止，一切都很好。

So far, so good.

添加Docker支持

Add Docker support

[注意：尽管我通过.NET CLI创建了项目，但也可以使用Visual Studio UI创建项目。这样做时，新项目对话框中有一个添加Docker支持复选框。但是，该复选框对于Angular项目是禁用的。大概是因为它不起作用。但是，我们可以使用以下方法来达到目标​​。]

我右键单击了网站项目（ MyAngularWebsite ），然后从弹出菜单中选择添加Docker支持。

I right-clicked on the website project (MyAngularWebsite), and chose "Add Docker Support" from the pop-up menu.

Visual Studio会询问Docker映像将使用的操作系统类型。 -我选择了Linux：

Visual Studio asks for the type of Operating System that the Docker image will use - I chose Linux:

做两件事：

1. 向项目添加名为 Dockerfile 的文件。


2. 向 Properties\launchSettings.json

1. Adds a file named Dockerfile to the project.
2. Adds a new profile named "Docker" to Properties\launchSettings.json

$添加一个名为 Docker的新配置文件b
$ b

以下是 Dockerfile 的内容：

Here's the contents of Dockerfile:

FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base
WORKDIR /app
EXPOSE 14242
EXPOSE 44321

FROM microsoft/dotnet:2.2-sdk AS build
WORKDIR /src
COPY ["MyAngularWebsite.csproj", ""]
RUN dotnet restore "/MyAngularWebsite.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "MyAngularWebsite.csproj" -c Release -o /app

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

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

现在，如果我开始使用新的 Docker启动配置文件的项目，在下载并构建所有必需的部件时会停顿很长时间，然后创建一个Docker容器，并启动一个浏览器窗口，指向 https：/ / localhost：44321 / 。

Now, if I start the project using the new "Docker" launch profile, there's a long pause while it downloads and builds all the required parts, and then a docker container is created, and a browser window is launched pointing to https://localhost:44321/.

在这一点上，我们看到一条错误消息，提示 无法启动'npm' ：

It's at this point that we see an error saying Failed to start 'npm':

已阅读很多 其他 问题有关此问题，我认为问题很简单，就是基本图像（在这种情况 microsoft / dotnet：2.2-aspnetcore-runtime 在 Dockerfile 顶部指定的位置不包括Node。

Having read many other questions about this, I gather that the issue is simply that the base image (in this case microsoft/dotnet:2.2-aspnetcore-runtime as specified at the top of the Dockerfile) does not include Node.

Node是必需的，以便Angular应用可以构建，因为 ng build 是用来构建它的-它依赖于Node。 （尽管我在本地计算机上有Node，但它不在构建应用程序的Docker映像上。）

Node is required so that the Angular app can be built, since ng build is what's used to build it - and that relies on Node. (Although I have Node on my local machine, it's not on the Docker image on which the app is being built).

因此，建议的方法是将Node添加到通过修改 Dockerfile 来创建Docker映像。

So, the suggested approach is to add Node to the Docker image by modifying the Dockerfile.

将节点添加到Docker映像

Add Node to the Docker image

如上面提到的问题所示，我修改了 Dockerfile ，

As suggested in the questions referenced above, I modified the Dockerfile to include the following:

RUN apt-get update && \
    apt-get install -y wget && \
    apt-get install -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_6.x | bash - && \
    apt-get install -y build-essential nodejs

Dockerfile 现在看起来像这样：

FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base

RUN apt-get update && \
    apt-get install -y wget && \
    apt-get install -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_6.x | bash - && \
    apt-get install -y build-essential nodejs

WORKDIR /app
EXPOSE 14242
EXPOSE 44321

FROM microsoft/dotnet:2.2-sdk AS build
WORKDIR /src
COPY ["MyAngularWebsite.csproj", ""]
RUN dotnet restore "/MyAngularWebsite.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "MyAngularWebsite.csproj" -c Release -o /app

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

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

...以及。 .. 结果完全相同。

...and... the results are exactly the same.

为什么未安装NPM？

Why is NPM not installed?

每个@DannyB的评论，我尝试将ash扑入Docker容器以直接运行 npm ： / p>

Per @DannyB's comment, I tried bash-ing into the Docker container to run npm directly:

docker exec -it mycontainer_id /bin/bash

......，当我尝试执行 npm 时，出现错误消息，提示 npm：未找到命令。因此，我想这就是它仍然无法工作的原因。

...and when I tried to execute npm I got an error saying "npm: command not found". So, I guess that's the reason that it's still not working.

然后我尝试执行添加到 Dockerfile ，直接在bash shell中。当我上线时：

I then tried executing each of the commands I added to the Dockerfile in turn, directly in the bash shell. When I got to the line:

wget -qO- https://deb.nodesource.com/setup_6.x

...它执行时没有产生任何输出，但是我意识到这是因为- q 标志的意思是安静模式，因此我在没有 q 的情况下再次执行了它。这次，我遇到了错误：

...it executed without producing any output, but I realised that's because the -q flag means "quiet mode", so I executed it again without the q. This time, I got errors:

ERROR: The certificate of 'deb.nodesource.com' is not trusted.
ERROR: The certificate of 'deb.nodesource.com' hasn't got a known issuer.

深入研究发现，即使我只是这样做，也会遇到与证书相关的错误：

Digging deeper, it turns out I get certificate-related errors even if I simply do:

curl https://www.google.com

这会导致错误，提示 SSL证书问题：证书链中的自签名证书。

This results in an error saying "SSL certificate problem: self signed certificate in certificate chain".

因此，容器有信任问题：-)。

So, it seems that my container has trust issues :-).

为什么我的容器无法建立HTTPS连接？

Why is my container unable to make HTTPS connections?

每个这个问题，这是因为我正在公司环境中运行，在该环境中，通过防火墙的SSL流量被拦截/重新加密，并且我需要将Docker容器配置为信任相应的证书。

Per this question, it seems that it's because I'm running in a corporate environment where SSL traffic through the firewall is intercepted/re-encrypted, and that I'll need to configure my Docker container to trust the corresponding certificate.

假设这是正确的，希望我能够修复信任问题，然后安装NPM，并希望能够解决原始问题。

Assuming that's correct, hopefully I'll be able to fix the trust issues, then install NPM, and hopefully solve the original issue.

我认为这个问题现在已经偏离了主题，但是如果我能够取得更大的进步，我会继续对其进行更新。

I think this question has moved rather off-topic now, though I'll continue to update it if I manage to make further progress.

推荐答案

我的工作DockerFile在apt-get之后为npm安装了npm。

My working DockerFile has an npm install for npm after the apt-gets.

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

FROM mcr.microsoft.com/dotnet/core/sdk:2.2-stretch AS build
RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get install -yq nodejs build-essential
RUN npm install -g npm
RUN npm install -g @angular/cli
WORKDIR /src/PAP.UI
COPY . PAP.UI.csproj
RUN dotnet restore "PAP.UI.csproj"
COPY . .
RUN dotnet build "PAP.UI.csproj" -c Release -o /app

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

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

这篇关于如何在Linux Docker容器中运行VS2017 Angular项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！