AngularJS
docker
Angular5

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の開発ができる