使用 Docker 搭建 Angular 和 ASP.NET Core 的开发环境

2 年 ago
文, 翔
2 minutes

首先

以下是使用由 Microsoft 提供的 ASP.NET Core 和 Angular 项目模板在 Docker 中运行的步骤。

前提条件 (Qian ti tiao jian)

    • Visual Studio がインストールされていること

 

    • Node.js がインストールされていること

 

    Docker がインストールされていること

创建项目

在控制台中新建项目也是可以的，但是由于需要添加Docker支持，所以我们会从Visual Studio创建解决方案文件。

创建项目

Angular 版本升级

截至2018/11/23，ASP.NET Core的Angular模板版本已过时。为了能够使用新的版本，我们决定进行升级。

如果对模板不感兴趣，最快的方法是用另外创建的 Angular 项目覆盖它。
如果想要直接使用模板，请参考 Angular 更新指南。

将Angular项目替换为新创建的项目。

我用 ng new ClientApp –style=scss 创建了一个项目，但是它似乎有些过时，我打算进行更新。

ng update @angular/core
ng update @angular-devkit/build-angular
ng update @types/node
ng update @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter
ng update codelyzer
ng update karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
ng update protractor
ng update ts-node
ng update tslint

提交：更新各种包

如果在另外创建的项目中进行覆写，由于构建时的输出路径不同，因此需要进行修改。
“outputPath”: “dist/ClientApp” → “outputPath”: “dist”

将构建时的输出目标更改

添加Docker支持

在 Visual Studio 中，右键点击项目，添加 Docker 支持。

增加对Docker的支持

由于目前的情况无法构建，所以在.dockerignore文件中排除node_modules，并在Dockerfile中安装Node.js。

.dockerignore
.env
.git
.gitignore
.vs
.vscode
*/bin
*/obj
**/.toolstarget
*/*/node_modules

FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

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

RUN apt-get -qq update && apt-get install build-essential -y && apt-get install -my wget gnupg && apt-get -qq -y install bzip2
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs

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

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

提供能够使用Docker进行构建的选项。

在這個設定下，無法從 Visual Studio 中進行 Angular 的啟動和執行，所以我們需要從控制台進行建構和執行來確認它的操作。

docker build -t "angularwithaspnetcore" -f "Dockerfile" ".."

docker run --rm -it -p 8080:80 angularwithaspnetcore

最后一句

在这个设置中，无法通过Visual Studio进行调试执行来启动和运行Angular。
因为在ASP.NET Core的调试执行期间启动Angular没有意义，所以最好保证能够单独运行Angular。
如果要使用Docker来执行Angular，请参考这篇文章。

承诺：为 Angular 项目提供使用 Docker 进行构建的能力

有待完成

    サーバーサイドレンダリング
bannerAds