コンテンツにスキップ

Docker を利用して Angular の開発環境を整える

Tip

2018年末に記載したドキュメントで内容が陳腐化しています。

はじめに

Angularの開発環境はローカルで整えた方が開発しやすいんですが、複数のプロジェクトを同時にこなすような場合に Node.js や Angular CLI のバージョン違いでうまく動かなかったりしたので Docker を利用して Angular の開発環境を整えます。

前提条件

  • Docker がインストールされていること

Node.js & Angular の Docker Image の作成

Angular の公式イメージがあるわけではなさそうなので自分で作成します。
バージョンは適宜変更してください。
作成が手間であればこちらを利用してください。

Dockerfile

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# Node.js のバージョンを変更する場合は以下のURLからタグを確認してください
# https://hub.docker.com/r/library/node/tags/
FROM node:10.13-stretch

# Angular CLI のバージョンを変更する場合は以下のURLからタグを確認してください
# https://www.npmjs.com/package/@angular/cli?activeTab=versions
RUN npm install -g @angular/cli@7.0.6

WORKDIR /app

# EXPOSE 4200

Dockerfile をビルドします。

1
docker build -t angular:7.0.6 .

基本的にはこれだけでコマンドが実行できるようになります。 

1
2
3
4
docker run --rm -it angular:7.0.6 npm -v
docker run --rm -it -v ${PWD}:/app angular:7.0.6 npm install
docker run --rm -it angular:7.0.6 ng v
docker run --rm -it -v ${PWD}:/app angular:7.0.6 ng g component my-new-component

実行 & ビルド 環境の設定

Windows 環境で Linux のコンテナーを実行しており、node-sassを利用している場合はビルドに失敗します。
node_volumes ディレクトリをマウントしないよう設定すれば回避できるのでそのための設定を用意します。

.dockerignore 

1
2
3
4
5
6
7
.vs
.git
dist
node_modules

.dockerignore
.gitignore

Dockerfile

1
2
3
4
5
# Dockerfile
RUN mkdir /app
WORKDIR /app
COPY . /app
RUN yarn --pure-lockfile

docker-compose.build.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
version: "3"
services:
  client:
    image: angular:7.0.6
    build: .
    command: bash -c "npm install && ng build --prod --aot"
    volumes:
      - .:/app
      - /app/node_modules/
    ports:
      - "4200:4200"

docker-compose.serve.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
version: "3"
services:
  client:
    image: angular:7.0.6
    build: .
    command: bash -c "npm install && ng serve --host 0.0.0.0"
    volumes:
      - .:/app
      - /app/node_modules/
    ports:
      - "4200:4200"

サーバー実行

ローカルでの実行と異なり、実行中にファイルを変更しても即時反映されないので使い勝手が悪いです。 

1
docker-compose -f docker-compose.serve.yml up

ビルド実行

1
docker-compose -f docker-compose.build.yml up

サンプル

参考

最終更新日: 2021-12-10 07:38:31
Tag
Back to top