Edited at

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

More than 1 year has passed since last update.


概要


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