Angular 6 SPAテンプレートASP .NET Core 2.1アプリケーションのコンテナー化

2019年7月24日からの更新は、記事の最後をご覧ください。



11/01/2018からの更新{

コメント内の助けのおかげで、以下はdockerファイルのよりイデオロギー的に正しいバージョンです。



標準のAngular SPA Templateプロジェクトテンプレートにはエラーが含まれています。 バージョンnet .core 2.1の開発者。 microsoft / dotnetから削除：nodejsのビルドに使用される2.1-sdkイメージが、それを使用するコードはプロジェクトファイルに残りました。 詳細はこちらgithub.com/aspnet/Announcements/issues/298

次のコードを削除して、* .csprojプロジェクトファイルを手動で編集する必要があります。





}



残念ながら、既製のソリューションはどこにも見つかりませんでした。 いくつかのソースから情報を収集する必要がありました。 ASP .NET CoreでAngular 6/7 Dockerアプリケーションをプロジェクトとして実行するには。



標準ツールを使用して、Angularアプリケーションでプロジェクトのdockerサポートを有効にすると、dockerファイルは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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このエラーを解決するには、インストールnode.jsとangularを追加してDockerファイルを更新する必要があります。

さらに、開発はWindowsで行われ、Ubuntyに基づくDockerコンテナーですべてが開始されるため、scssまたはsassスタイルファイルが使用されている場合、それらはnode-sassを使用してAngular CLIによってコンパイルされ、開始時に「Node Sass does notまだ現在の環境をサポートしています：サポートされていないランタイムを備えたWindows 64ビット」 次のコマンドを実行する必要があります。

 npm rebuild node-sass
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

npmは、現在のプラットフォームに必要なスクリプトをダウンロードし、cssファイルを再構築します。



ASP .NET Core 2.1プロジェクトに基づくAngularアプリケーションの最終的なDockerファイルは次のとおりです

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Node.jsの安定版LTSリリース（現在は8.x）を使用しましたが、より適切なものに変更できます。



さらに、Windowsは文字の異なるケースに関連するエラーを許容しますが、Linuxはこれを許しません。 また、開発中に機能したプロジェクトは、コンテナでのコンパイルを拒否し、エラーが発生します

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンパイル段階でこのようなエラーを回避するには、compilerOptionsセクションのtsconfig.jsonファイルに対応するオプション「forceConsistentCasingInFileNames」：trueを追加することをお勧めします

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2019年7月24日からの更新{

繰り返しになりますが、コメントのヘルプのおかげで、dockerファイルの最適化されたバージョンを以下に示します。



}



アンギュラー、angular6 / 7、asp.netコア2.1、ドッカー