はじめに
社内で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
root で入りたくないなら以下。node ユーザーが予め存在してるのでそれを使ってます。
docker-compose exec --user=node node bash
コンテナを停止するにはコンソールを抜けてから以下を実行。
docker-compose down
Angularを試す
Angularは公式の日本語版があり、チュートリアルやリファレンスも充実しています。
「Angular6のプロジェクトを作ったらまずやっとくこと」も参考にしてください。
注意点として、--hots=0.0.0.0 をつけて開発サーバーを起動しないとコンテナの外から見えません。
ng serve --host=0.0.0.0
ng serve だけだと localhost からしか見えないのですが、Docker コンテナにとっての localhost はコンテナ自身であり、ホスト側は外部になるためです。
まとめ
Angular 開発を行うことができる Docker 環境を構築しました。
これで環境を汚すことを気にせずに気楽に Angular を試せます。