きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

ASP.NET core SPA × Docker × 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に何が含まれているかは常に意識しておく。
  • 必要なものがなければインストールする。