Kontainerisasi aplikasi Angular 6 SPA Template ASP .NET Core 2.1

PEMBARUAN dari 07.24.2019 lihat di akhir artikel.

UPDATE dari 11/01/2018 {
Berkat bantuan dalam komentar, di bawah ini adalah versi yang lebih benar secara ideologis dari file buruh pelabuhan.

Templat proyek Template Angular SPA standar berisi kesalahan. Pengembang di versi net .core 2.1. dihapus dari microsoft / dotnet: gambar 2.1-sdk yang digunakan untuk membangun nodejs, tetapi kode yang menggunakannya tetap dalam file proyek. Baca lebih lanjut di sini github.com/aspnet/Announcements/issues/298
Anda harus mengedit file proyek * .csproj secara manual dengan menghapus kode berikut


}

Sayangnya, saya belum menemukan solusi siap pakai di mana saja. Saya harus mengumpulkan informasi dari beberapa sumber. Untuk meluncurkan aplikasi di galangan Angular 6/7 sebagai proyek pada ASP .NET Core.

Jika kami mengaktifkan dukungan buruh pelabuhan untuk proyek dengan aplikasi Angular menggunakan alat standar, file buruh pelabuhan akan membuat gambar aplikasi berdasarkan pada microsoft / dotnet: gambar 2.1-aspnetcore-runtime. Tidak ada server node.js yang disertakan dalam gambar dasar ini Dan hasil eksekusi akan menjadi kesalahan .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 

Untuk mengatasi kesalahan ini, Anda perlu memperbarui file Docker dengan menambahkan node.js instalasi dan sudut.
Selain itu, karena pengembangan berada di bawah Windows, dan semuanya dimulai dalam wadah Docker berdasarkan Ubunty, jika file gaya scss atau sass digunakan, mereka dikompilasi oleh CLI Angular menggunakan node-sass, dan ketika memulai, ia memberikan kesalahan “Node Sass tidak belum mendukung lingkungan Anda saat ini: Windows 64-bit dengan runtime yang tidak didukung. " Anda harus menjalankan perintah:

 npm rebuild node-sass 

npm akan mengunduh skrip yang diperlukan untuk platform saat ini dan membangun kembali file css.

File Docker terakhir untuk aplikasi Angular berdasarkan proyek ASP .NET Core 2.1 adalah sebagai berikut

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

Saya menggunakan rilis stabil LTS dari Node.js, saat ini 8.x, tetapi dapat diubah menjadi lebih relevan.

Selain itu, saya juga mencatat bahwa Windows memaafkan kesalahan yang terkait dengan karakter kasus yang berbeda, tetapi Linux tidak memaafkan ini. Dan proyek yang berhasil selama pengembangan akan menolak untuk dikompilasi dalam wadah, memberikan kesalahan

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

Untuk menghindari kesalahan seperti itu bahkan pada tahap kompilasi, saya sarankan menambahkan opsi yang sesuai "forceConsistentCasingInFileNames": benar ke file tsconfig.json di bagian compilerOptions

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

UPDATE dari 07.24.2019 {
Sekali lagi, berkat bantuan dalam komentar, versi yang dioptimalkan dari file buruh pelabuhan disajikan di bawah ini.

}

angular, angular6 / 7, asp .net core 2.1, buruh pelabuhan