2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-24

概要

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?