DockerでAngular5の開発環境をつくる

概要

• DockerでAngular5の開発環境を作る

前提条件

• Dockerはインストール済みとする

Dockerfileを用意する

• Angular-CLI1.5.4のDockerfile

FROM node:6.11.2-alpine

RUN apk update \
  && apk add --update alpine-sdk \
  && npm install -g @angular/cli@1.5.4 \
  && ng set --global packageManager=yarn \
  && apk del alpine-sdk \
  && rm -rf /tmp/* /var/cache/apk/* *.tar.gz ~/.npm \
  && npm cache clear \
  && sed -i -e "s/bin\/ash/bin\/sh/" /etc/passwd

Imageをビルドする

• Dockerfileを格納した場所で実行する

docker build -t angular5 .

Angularのプロジェクトを作成する

• PJを作成したい場所で実行する

docker run -it --rm -w /app -v $(pwd):/app angular5:latest ng new my-project-name

コンテナを起動して中でnpm installする

docker run -it --rm -v $(pwd):/app angular5:latest /bin/ash

## コンテナ内
cd app/my-project-name
npm install

## ng generate 使うのもコンテナ内で行う
ng g c hogehoge

作成したプロジェクトを実行してみる

• localhost:4200 で動作確認できる

docker run -it --rm -w /app -v $(pwd)/my-project-name:/app -p 4200:4200 angular5:latest ng serve --host 0.0.0.0

• これでAngularの開発ができる