K4750.NET

Angular7 in Docker

Docker for Windows(Docker Community Edition for Windows)をWindows 10 PCへインストールしたので、試しにAngular7をコンテナ内でビルドし、実行してみます。


1.Dockerfile を書いてみる

Node.jsがインストール済みのイメージファイルをベースにして、Angular CLIのインストールと新規プロジェクトの作成をすればよいので・・・こんな感じかな?

FROM node:10-alpine
WORKDIR /work
RUN npm install -g @angular/cli@7.0.3
RUN ng new --defaults angular7
WORKDIR /work/angular7
CMD ng serve

2.ビルド&実行

作った Dockerfile を使って ng new まで実行したイメージファイルを作り、実行してみる。

$ docker build -t angular7 .
$ docker run -p 4200:4200 --name angular7 angular7

上手くいったようだが・・・http://locahost:4200 を叩いてもアクセスできず。結局、いろいろ試したところ、DockerfileのCMD行を

CMD ng serve --host `hostname`

へ変更して再度ビルド&実行すると、ホストPC上のブラウザからは http://127.0.0.1:4200 でアクセスできることが判明。Docker for Windows 固有の問題なのだろうか・・・?とりあえず動いたから良しとしよう^^;


3.Yarn 発見

ふと気づいたのだが・・・

$ docker exec -i -t angular7 /bin/sh
/work/angular7 # yarn -v
1.10.1
/work/angular7 # which yarn
/usr/local/bin/yarn

Ultra Fastを謳う^^; Yarnコマンド(現時点の最新Stable版)が/usr/local/binにインストールされていた。早速、Dockerfileを書き換えてみる。

FROM node:10-alpine
WORKDIR /work
RUN yarn global add @angular/cli@7.0.3
RUN ng new --defaults --skipInstall=true angular7
WORKDIR /work/angular7
RUN yarn
CMD ng serve --host `hostname`

こんな使い方では速度を体感することもなく・・・動いたので良しとしよう^^;;