使用Docker设置Angular开发环境

2 年 ago

逸, 科

2 minutes

首先

在开发Angular时，最好在本地配置开发环境，但如果需要同时处理多个项目，由于Node.js和Angular CLI的版本差异可能会导致无法正常工作，因此我们要利用Docker来配置Angular的开发环境。

前提条件 (Qian ti tiao jian)

Docker がインストールされていること

创建Node.js和Angular的Docker镜像

由于似乎没有官方的Angular形象，所以我会自己创建。
请根据需要更改版本。
如果创建太麻烦，请使用这个。

# Node.js のバージョンを変更する場合は以下のURLからタグを確認してください
# https://hub.docker.com/r/library/node/tags/
FROM node:10.13-stretch

# Angular CLI のバージョンを変更する場合は以下のURLからタグを確認してください
# https://www.npmjs.com/package/@angular/cli?activeTab=versions
RUN npm install -g @angular/cli@7.0.6

WORKDIR /app

# EXPOSE 4200

我要构建 Dockerfile。

docker build -t angular:7.0.6 .

基本上只需这样，就可以执行命令了。

docker run --rm -it angular:7.0.6 npm -v
docker run --rm -it -v ${PWD}:/app angular:7.0.6 npm install
docker run --rm -it angular:7.0.6 ng v
docker run --rm -it -v ${PWD}:/app angular:7.0.6 ng g component my-new-component

设置执行和构建环境

如果在Windows环境中运行Linux容器，并使用node-sass，那么构建将会失败。为了避免这种情况，我们将提供配置选项来设置不挂载node_volumes目录。

.vs
.git
dist
node_modules

.dockerignore
.gitignore

# Dockerfile
RUN mkdir /app
WORKDIR /app
COPY . /app
RUN yarn --pure-lockfile

version: "3"
services:
  client:
    image: angular:7.0.6
    build: .
    command: bash -c "npm install && ng build --prod --aot"
    volumes:
      - .:/app
      - /app/node_modules/
    ports:
      - "4200:4200"

version: "3"
services:
  client:
    image: angular:7.0.6
    build: .
    command: bash -c "npm install && ng serve --host 0.0.0.0"
    volumes:
      - .:/app
      - /app/node_modules/
    ports:
      - "4200:4200"

执行服务器

与在本地执行不同的是，即使在执行过程中更改了文件，也无法立即反映出来，所以不太方便使用。

docker-compose -f docker-compose.serve.yml up

构建和执行

docker-compose -f docker-compose.build.yml up

样本

Docker Hub

请参考

Docker ALPINE Linux throws node-sass missing binding error