angular
docker
docker-compose
Angular6

DockerでAngularをお試し

はじめに

社内でAngular解説を行うために作成した記事です。
環境を汚さずにDockerを使ってAngularを試す方法を解説します。

記事執筆時点のバージョンは Angular 6.1 です。

Docker環境はあらかじめ準備されているものとします。

Docker関係のファイルを用意する

ディレクトリ構成は以下。

.
├── Dockerfile
└── docker-compose.yml

Dockerfile を用意

FROM node:10.8.0-stretch

RUN npm install -g @angular/cli && ng config -g cli.packageManager yarn
WORKDIR /projects

Node.js のバージョンは現時点の LTS ではなく、今後の LTS になる予定の 10 系を選択しています。
一応この記事の通りにやった時の再現性を意識して 10.8.0 まで細かくバージョンを指定しています。
この辺りのバージョン指定は利用する Angular バージョンがサポートしてる範囲でお好きなように。

stretch を指定しているのは、最初から色々入ってる方が開発環境としては楽なので。

あと Angular が使うパッケージマネージャは yarn にしてます。

これだけでも docker コマンドを使ってコンテナを扱えるけど、より便利なので docker-compose を使います。

docker-compose.yml を用意

version: '3'

services:
  node:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - ".:/projects"
    tty: true

ポート番号 4200 番は Angular の開発サーバーが利用します。
カレントディレクトリがコンテナの /projects ディレクトリで見えるようにボリューム指定しています。
このコンテナは何もサービスを起動しないので、tty: true を指定しておかないとコンテナ起動時にすぐに終了してしまうので注意。

Dockerコンテナで作業する

docker-compose.yml のあるディレクトリで以下を実行し、Dockerコンテナを作成&起動。
初回はイメージのビルドを行うので時間がかかります。

docker-compose up -d

起動したら以下でコンソールに入れます。

docker-compose exec node bash

コンテナを停止するにはコンソールを抜けてから以下を実行。

docker-compose down

Angularを試す

Angularは公式の日本語版があり、チュートリアルやリファレンスも充実しています。
Angular6のプロジェクトを作ったらまずやっとくこと」も参考にしてください。

注意点として、--hots=0.0.0.0 をつけて開発サーバーを起動しないとコンテナの外から見えません。

ng server --host=0.0.0.0

ng serve だけだと localhost からしか見えないのですが、Docker コンテナにとっての localhost はコンテナ自身であり、ホスト側は外部になるためです。

まとめ

Angular 開発を行うことができる Docker 環境を構築しました。
これで環境を汚すことを気にせずに気楽に Angular を試せます。