Containerisierung von Angular 6 SPA-Vorlagen ASP .NET Core 2.1-Anwendungen

UPDATE vom 24.07.2019 siehe am Ende des Artikels.

UPDATE vom 11/01/2018 {
Dank der Hilfe in den Kommentaren finden Sie unten eine ideologisch korrektere Version der Docker-Datei.

Die Standardprojektvorlage Angular SPA Template enthält einen Fehler. Entwickler in der Version net .core 2.1. aus dem Microsoft / Dotnet entfernt: 2.1-SDK-Image zum Erstellen von NodeJS, aber der Code, der es verwendet, blieb in der Projektdatei. Lesen Sie hier mehr github.com/aspnet/Announcements/issues/298
Sie müssen die * .csproj-Projektdatei manuell bearbeiten, indem Sie den folgenden Code löschen
Code zum Entfernen aus * .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> 


Docker-Datei korrigieren
 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"] 


}}

Leider habe ich nirgendwo eine fertige Lösung gefunden. Ich musste Informationen aus verschiedenen Quellen zusammenstellen. So starten Sie die Anwendung in Angular 6/7 Docker als Projekt unter ASP .NET Core.

Wenn wir die Docker-Unterstützung für ein Projekt mit einer Angular-Anwendung mithilfe von Standardtools aktivieren, erstellt die Docker-Datei ein Anwendungsbild, das auf Microsoft / Dotnet basiert: 2.1-Aspnetcore-Laufzeitbild. In diesem Basis-Image ist kein node.js-Server enthalten Das Ergebnis der Ausführung ist ein ASP .NET Core-Fehler


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

Bild

Um diesen Fehler zu beheben, müssen Sie die Docker-Datei aktualisieren, indem Sie den Installationsknoten.js und angle hinzufügen.
Da die Entwicklung unter Windows erfolgt und alles in einem auf Ubunty basierenden Docker-Container beginnt, werden scss- oder sass-Dateien von der Angular-CLI mithilfe von node-sass kompiliert. Beim Starten wird der Fehler "Node Sass nicht" ausgegeben Unterstützen Sie dennoch Ihre aktuelle Umgebung: Windows 64-Bit mit nicht unterstützter Laufzeit. " Sie müssen den folgenden Befehl ausführen:

 npm rebuild node-sass 

npm lädt die erforderlichen Skripte für die aktuelle Plattform herunter und erstellt die CSS-Dateien neu.

Die endgültige Docker-Datei für eine Angular-Anwendung, die auf einem ASP .NET Core 2.1-Projekt basiert, lautet wie folgt

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

Ich habe die stabile LTS-Version von Node.js verwendet, derzeit 8.x, kann aber in eine relevantere Version geändert werden.

Außerdem stelle ich fest, dass Windows Fehler vergibt, die mit einem anderen Fall von Zeichen verbunden sind, Linux dies jedoch nicht vergibt. Und das Projekt, das während der Entwicklung funktioniert hat, weigert sich, im Container zu kompilieren, was zu einem Fehler führt

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

Um solche Fehler auch in der Kompilierungsphase zu vermeiden, empfehle ich, der Datei tsconfig.json im Abschnitt compilerOptions die entsprechende Option "forceConsistentCasingInFileNames" hinzuzufügen: true

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


UPDATE vom 24.07.2019 {
Dank der Hilfe in den Kommentaren wird die optimierte Version der Docker-Datei unten dargestellt.
Optimierte Docker-Datei
 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"] 


}}

eckig, eckig6 / 7, asp .net core 2.1, docker

Source: https://habr.com/ru/post/de428107/


All Articles