きな粉もち.net

.NET関連仕事に携わっています。OSSのソースを読んで気がついたことを中心に呟いたりブログに投稿したりしています。最近はUiPathを使ったRPAも研究中。気軽にフォローやツッコミよろしくおねがいします! Gitはここを使っています https://github.com/kinakomotitti

ASP.NET core × SPA × Angureテンプレート始めました

この記事の目的

この記事では、
ASP.NET coreのAngularテンプレートを起動させること
を目的としています。
f:id:kinakomotitti:20181127222853p:plain
↑これです。今まで違う世界だと思って使おうともしてこなかった子です(/ω\)


本題

★はじめに

Angularテンプレートを使って、SPAを始めるにあたり、Microsoftの公式ドキュメントを参照しました。ただ、自端末の環境がそろっていなくて、いくつかエラーを発生させてしまいました。ので、今後のためにエラーが発生した時に対応したことをまとめておきます。

ちなみに、公式ドキュメントは↓です。
docs.microsoft.com


★詰まりポイント1)ビルドエラー

Angularテンプレートでソリューションを作成した後、実行させようとしたところ、エラーが発生・・・内容を見ると、「Node.jsがインストールされていないから実行できないよ」エラーでした。

ということで、Node.jsのインストーラーを取得し、インストールしました。
nodejs.org




★詰まりポイント2)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!

この2ステップをすることで、無事にテンプレートの起動を確認することができました(/・ω・)/

初めてアプリケーションを動かしたときの懐かしい感覚を思い出しますね!



★追加)詰まりポイント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に何が含まれているかは常に意識しておく。
  • 必要なものがなければインストールする。