حاويات تطبيقات Angular 6 SPA Template ASP .NET Core 2.1

تحديث من 07.24.2019 انظر في نهاية المقال.

تحديث من 11/01/2018 {
بفضل المساعدة الواردة في التعليقات ، يوجد أدناه إصدار أكثر صحة من الناحية الإيديولوجية لملف عامل الميناء.

يحتوي قالب مشروع 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> 


ملف docker الصحيح
 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 docker كمشروع على ASP .NET Core.

إذا تم تمكين دعم عامل الميناء لمشروع يحتوي على تطبيق Angular باستخدام أدوات قياسية ، فسيقوم ملف عامل الميناء بإنشاء صورة تطبيق استنادًا إلى microsoft / dotnet: 2.1-aspnetcore-runtime image. لم يتم تضمين خادم 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 والتثبيت الزاوي.
بالإضافة إلى ذلك ، نظرًا لأن التطوير تحت Windows ، ويبدأ كل شيء في حاوية Docker استنادًا إلى Ubunty ، إذا تم استخدام ملفات نمط scss أو sass ، يتم تجميعها بواسطة CLI الزاوي باستخدام node-sass ، وعند البدء ، فإنه يعطي خطأ "Node Sass لا مع دعم بيئتك الحالية: Windows 64 بت مع وقت تشغيل غير مدعوم. " يجب تشغيل الأمر:

 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": صحيح لملف tsconfig.json في قسم compilerOptions

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


تحديث من 07.24.2019 {
مرة أخرى ، بفضل المساعدة في التعليقات ، يتم عرض الإصدار الأمثل من ملف عامل الميناء أدناه.
ملف إرساء محسن
 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

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


All Articles