pprometey Oct 29 2018 at 14:14

Контейнеризация Angular 6 SPA Template ASP .NET Core 2.1 приложения

4 min

9.7K

UPDATE от 24.07.2019 смотрите в конце статьи.

UPDATE от 01.11.2018 {
Благодаря помощи в комментариях, ниже представлена более правильная с идеологической точки зрения версия docker файла.

В стандартном шаблоне проекта Angular SPA Template содержится ошибка. Разработчики в версии net .core 2.1. удалили из образа microsoft/dotnet:2.1-sdk используемого для сборки nodejs, но в файле проекта остался код, его использующий. Подробнее здесь github.com/aspnet/Announcements/issues/298
Необходимо отредактировать вручную файл проекта *.csproj, удалив следующий код

Код для удаления из *.csproj

  <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>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Правильный dockerfile

ARG NODE_IMAGE=node:8.12

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

FROM microsoft/dotnet:2.1-sdk AS build
WORKDIR /src
COPY ["AngularWebApp/AngularWebApp.csproj", "AngularWebApp/"]
RUN dotnet restore "AngularWebApp/AngularWebApp.csproj"
COPY . .
WORKDIR "/src/AngularWebApp"

FROM ${NODE_IMAGE} as node-build
WORKDIR /src
COPY AngularWebApp/ClientApp .
RUN npm install
RUN npm run build -- --prod

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

FROM base AS final
WORKDIR /app
COPY --from=publish /app .
COPY --from=node-build /src/dist ./ClientApp/dist
ENTRYPOINT ["dotnet", "AngularWebApp.dll"]

}

К сожалению готового решения нигде не нашел. Пришлось компилировать из нескольких источников информацию. Чтобы запустить в докере Angular 6/7 приложение в виде проекта на ASP .NET Core.

Если мы включим стандартными средствами поддержку докер для проекта с Angular приложением, то докер файл создаст образ приложения на базе microsoft/dotnet:2.1-aspnetcore-runtime образа. В этот базовый образ не включен сервер node.js. И в результаты выполнения будет выходить ошибка ASP .NET Core

An unhandled exception occurred while processing the request.
The NPM script ‘start’ exited without indicating that the Angular CLI was listening for requests

Чтобы разрешить эту ошибку, необходимо обновить Docker файл, добавив установку node.js и angular.
Кроме того, поскольку разработка идет под Windows, а запускается это все в контейнере Docker на базе Ubunty, в случае если используются scss или sass файлы стилей, они компилируются Angular CLI с помощью node-sass, и при запуске выдавало ошибку “Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime”. Необходимо выполнить команду:

npm rebuild node-sass

npm скачает необходимые скрипты для текущей платформы и перестроит css файлы.

Итоговый Docker файл для Angular приложения на базе проекта ASP .NET Core 2.1 выглядит следующим образом

FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base
# Setup NodeJs
RUN apt-get update && \
    apt-get install -y wget && \
    apt-get install -y gnupg2 && \
    wget -qO- https://deb.nodesource.com/setup_8.x | bash - && \
    apt-get install -y build-essential nodejs
RUN npm install @angular/cli -g
# End setup

WORKDIR /app
EXPOSE 80

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

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

FROM base AS final
WORKDIR /app
COPY --from=publish /app .
WORKDIR /app/ClientApp
RUN npm install
RUN npm rebuild node-sass
WORKDIR /app
ENTRYPOINT ["dotnet", "AngularWebApp.dll"]

Я использовал стабильный LTS релиз Node.js, на данный момент 8.x, но можно изменить на любой более актуальный.

Кроме того, еще замечу, что Windows прощает ошибки связанные с различным регистром символов, но вот Linux этого не прощает. И проект который работал при разработке, откажется компилироваться в контейнере, выдавая ошибку

docker ERROR in error TS1149: File name 'filename.ts' differs from already included file name 'FileNames.ts' only in casing

Для того чтобы избежать таких ошибок еще на этапе компиляции, рекомендую добавить соответствующую опцию “forceConsistentCasingInFileNames”: true в файл tsconfig.json в секцию compilerOptions

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true
    }
  }
}

UPDATE от 24.07.2019 {
Опять же, благодаря помощи в комментариях, ниже представлена оптимизированная версия docker файла.

Оптимизированный dockerfile

ARG NODE_IMAGE=node:10.16.0

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

FROM ${NODE_IMAGE} as node-build
WORKDIR /src
COPY AngularWebApp/ClientApp .
RUN npm install
RUN npm rebuild node-sass
RUN npm run build -- --prod

FROM mcr.microsoft.com/dotnet/core/aspnet:2.2-stretch-slim AS base
WORKDIR /app
EXPOSE 80
COPY --from=build /app .
COPY --from=node-build /src/dist ./ClientApp/dist
ENTRYPOINT ["dotnet", "AngularWebApp.dll"]

}

angular, angular6/7, asp .net core 2.1, docker

Tags:

Hubs: