「手軽にIonicをdockerで動かしてさわってみる | hiro345」とあまり変わりませんが、dockerを手軽に使っていくということでメモ。

Angularのクイックスタートは「https://angular.io/docs/ts/latest/cli-quickstart.html」にあるので、これを参考に理解していくとよさそう。

Dockerfileは下記を用意すればいい。

FROM node:8.9.4-alpine

WORKDIR /app

RUN apk update && apk add -q git && \
    npm i -g --unsafe-perm @angular/cli --no-progress

Ionicのときと同じでビルドして利用。ここでは「-u」でユーザーID, グループIDを指定することで生成されるファイルの所有者がrootにならないようにしています(dockerコマンドを実行するユーザーのユーザーID、グループIDを指定するとよい）。

$ docker build -t sssg/angular .
$ docker run -it --rm -p 4200:4200 \
   -u $UID:$GROUPS \
   -v ${PWD}:/app \
   -w /app --name angular-app001 sssg/angular sh

Dockerコンテナのシェルに入ったら、ng newでアプリを作る。設定ファイルでhostを0.0.0.0で指定する必要があるのでsedコマンドで修正。それからng serveで起動。

$ ng new app001
$ cd app001
$ sed -i 's%"defaults": {%"defaults": { "serve":{"port":4200, "host":"0.0.0.0"},%' \
  .angular-cli.json 
$ ng serve

http://localhost:4200 でAngularアプリにアクセスができます。停止はCtrl+C。exitコマンドでDockerコンテナのインスタンスは停止。

(略)
~C
$ exit

app001を作った後、一度Dockerコンテナを停止したなら、次回以降はng serveを実行して起動すればいい。停止はdocker stopコマンドで強制終了。

$ docker run -d -it --rm -p 4200:4200 \
   -u=$UID:$GROUPS \ 
   -v ${HOME}/workspace/docker:/app \
   -w /app/app001 \
   --name angular-quickstart \
   sssg/angular ng serve
$ docker stop `docker ps|grep angular-quickstart|awk '{print $1}'`