Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angularはじめました

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

yml
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

hiroita
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away