この記事の目的
この記事では、
ASP.NET coreのAngularテンプレートを起動させること
を目的としています。
↑これです。今まで違う世界だと思って使おうともしてこなかった子です(/ω＼)
本題
★はじめに
Angularテンプレートを使って、SPAを始めるにあたり、Microsoftの公式ドキュメントを参照しました。ただ、自端末の環境がそろっていなくて、いくつかエラーを発生させてしまいました。ので、今後のためにエラーが発生した時に対応したことをまとめておきます。
ちなみに、公式ドキュメントは↓です。
docs.microsoft.com
★詰まりポイント１）ビルドエラー
Angularテンプレートでソリューションを作成した後、実行させようとしたところ、エラーが発生・・・内容を見ると、「Node.jsがインストールされていないから実行できないよ」エラーでした。
ということで、Node.jsのインストーラーを取得し、インストールしました。
nodejs.org
★詰まりポイント２）ngコマンドがないよエラー
Node,jsをインストールして安心しきっていましたが、次に、ngコマンド（AngularのCLIコマンド）がないといってサーバ内エラーが発生しました。Angular自体がわかっていないので、テンパりましたが、Angular CLIのサイトにインストールコマンドが記載されていたので、それを実行してインストールしました。
Angular CLI
npm install -g @angular/cli
※公式ドキュメントに以下のような記述があるので、必ずしもngコマンドのインストールが必要ではないのかもしれないです。（未検証）
===============
ng ツールがインストールされていない場合は、代わりに npm run ng を実行します。 たとえば、npm run ng lint または npm run ng test を実行できます。
===============
★HelloWorld!
この２ステップをすることで、無事にテンプレートの起動を確認することができました(/・ω・)/
初めてアプリケーションを動かしたときの懐かしい感覚を思い出しますね！
★追加）詰まりポイント3）Dockerサポートの設定
IIS Express環境では、無事に実行することができました。しかし、できれば、Dockerでも動くようにするところまでやっておきたい・・・
ということで、Dockerサポートを追加しました。
プロジェクト作成時に、「Dockerサポート」のチェックが非活性になっていたので薄々感じていましたが、いつものようにDockerサポートを追加するだけでは、”動く状態の”Dockerfileは作成できませんでした。これは、ベースとするDocker Image「microsoft/dotnet:2.1-aspnetcore-runtime」にNodeがインストールされていないことに起因するようです。そのため、テンプレートで用意されるDockerfileに独自でNodeをインストールする処理を追加する必要があります。
同じようにDocker Imageにnodejsが含まれていなくて困っている人たちの議論を見つけました。
node.js - .NET Core Docker Image for SPA Applications - Stack Overflow
しかし、自分の環境では、上記の議論で出てきた対処をしても、nodejsをインストールしたDocker imageを作成することができませんでした。
ということで、いろいろと試行錯誤をした結果、以下のDockerfileを作成し、あらかじめnodejsを含むDocker Imageを作成し、そのImageをベースに実行する作戦で事なきを得ました。
具体的には、↓こんな感じです。
まず、事前に用意するDocker Imageは以下のようにしました。
FROM microsoft/dotnet:2.1-sdk AS build RUN apt-get update -yq && apt-get upgrade -yq RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get install -yq nodejs build-essential RUN apt-get install -y nodejs WORKDIR / #Note #このファイルが存在する場所で以下のコマンドを実行する #docker build . -t dotnet:2.1-sdk-with-node
次に、Visual StudioのDockerサポート機能で生成されたDockerfileに以下の変更を加えました。（変更したのは1行目、2行目だけです）
#FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base FROM dotnet:2.1-sdk-with-node AS base #←ここ WORKDIR /app EXPOSE 80 EXPOSE 443 FROM microsoft/dotnet:2.1-sdk AS build WORKDIR /src COPY ["WebApplication2/WebApplication2.csproj", "WebApplication2/"] RUN dotnet restore "WebApplication2/WebApplication2.csproj" COPY . . WORKDIR "/src/WebApplication2" FROM node as clientBuild COPY --from=clientBuild . . RUN dotnet build "WebApplication2.csproj" -c Release -o /app FROM build AS publish RUN dotnet publish "WebApplication2.csproj" -c Release -o /app FROM base AS final WORKDIR /app COPY --from=publish /app . ENTRYPOINT ["dotnet", "WebApplication2.dll"]
上記対応で、とりあえずDocker上でもAngularテンプレートのアプリケーションのデバッグができるようになりました。
まとめ
- 開発の前に、開発環境の準備を忘れない！
- Docker Imageに何が含まれているかは常に意識しておく。
- 必要なものがなければインストールする。
