DockerでAngularを試してみた時の記録
サーバー起動中に自動的にソースコード更新の検知とコンパイルを行わせるのに手間取った
環境
Docker for Windows
Angular CLI: 8.1.2
Node: 11.15.0
コンテナの作成と起動
Dockerfile
```text
FROM node:11.15.0-stretch
RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
WORKDIR /app
version: '3'
services:
node:
build: .
ports:
- "4200:4200"
volumes:
- ".:/app"
tty: true
コンテナ起動
docker-compose up -d
コンテナのコンソールに入る
ユーザーはrootかnodeかお好みで
docker-compose exec --user node node bash
```
Angular
コンテナのappディレクトリにてプロジェクト作成
--styleはcss, scss, sassなどが選べる
--routingでルートモジュールを追加する
ng new my-project --style=scss --routing
サーバー起動
--host Dockerを使用しているので0.0.0.0
--poll Dockerを使用している場合はソースコードの更新を検知し、コンパイルする間隔を指定する必要がある
cd my-project
ng serve --host=0.0.0.0 --poll=2000
これでlocalhost:4200からAngularのアプリにアクセス出来るはず
さらにdocker-compose.ymlに下のコマンドを追加すればコンテナ立ち上げ時にサーバーも立ち上がる
```yml
version: '3'
services:
node:
build: .
ports:
- "4200:4200"
volumes:
- ".:/app"
tty: true
command: [sh, -c, cd my-project && ng serve --host=0.0.0.0 --poll=2000]
```
参考
https://qiita.com/k5n/items/1a4987a430cf32e3e57d
https://qiita.com/k5n/items/dbda26cf6b899a11329d
https://qiita.com/friedaji/items/c3aba48542872f029c21
