Help us understand the problem. What is going on with this article?

DockerでAngularをお試し

More than 1 year has passed since last update.

はじめに

社内で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 を試せます。

k5n
好きなことはプログラミングと楽器演奏。そのうち金になる方を仕事に、ならないほうを趣味にしています。 若かりし頃はベンチャーでバリバリやってましたが、一度体を壊してからは忙し過ぎない仕事を探してマイペースにやってます。 C/C++, Swift, Objective-C, Java, Kotlin, Ruby, Python, PHP, TypeScript, Rust
creato
「言われたものを作るだけ」ではない共創型システムパートナーを掲げる名古屋の少数精鋭開発会社。
http://www.creato-c.jp/
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