使用Docker创建Angular5开发环境

3 年 ago

新, 韵

1 minute

总结

DockerでAngular5の開発環境を作る

前提条件

(paraphrased) 前提

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