这篇要分享的是，如何用docker搭建node开发环境，让前端同学远离本机node，让他心爱的伙伴做干干净净的自己。

为什么要搭建node开发环境？文章标题讲的是搭建angular开发环境，是不是跑题了？

不不不，标题所讲的angular开发环境，其实也就是node开发环境。将它命名为angular开发环境，是因为文章演示示例是以angular构建的。当然，前端同学也可以根据本篇文章示例，用以构建vue、react项目。

搭建这个node环境的本意，是为了实现昨天许下的一个小小的诺言，搭建一个angular开发环境给我们的前端同学演示，让她成功踏上docker这趟列车。

昨天下班后，就一直在思考一个问题：要怎么设计，才能让前端同学在使用docker环境开发的时候，操作最简单？

需要考虑几个问题：
1、node、angular环境都在docker中，那么想要生成一个项目，怎么才能将容器里的项目同步到本地呢？
2、更改一项配置后，需要重启angular应用才能重新加载，那么怎么操作才最简便？即不需要前端同学进入容器，ctrl+c退出应用，再重启应用

下面是我思考的结果：
1、查过资料，确实没有有效可行的办法，将容器中项目实时同步到本地环境。docker cp 可以实现，但是需要手动的去执行命令，不可行。那么只能再次考虑目录挂载。一般情况下，我们要将本地环境的目录，挂在到容器中，这样就可以让本地的任何修改，都可以实时同步到容器中。那么反过来是不是也一样？在容器挂载的目录中创建angular项目，让项目同步保存到本地，这样本地修改内容的时候，容器中的项目也实时更新了，即使容器被删除，本地仍然保存着项目文件。这样就很好的解决了这个问题。
2、重新加载配置这个问题，操作会比较绕，比较简单的方法，就是进入容器，将该进程kill掉，然后再重启应用。更绕一点的办法是，先创建一个容器，进入容器创建好项目后，退出容器并将它删除，然后再创建一个新的容器，挂载一个脚本，让容器每次启动的时候，都会进入到项目目录重启应用，这样的话，在每次修改了配置的时候，就只需要docker restart就可以重新加载配置了。

以下是本篇文章示例的dockerfile：

FROM centos:7.4.1708

RUN curl –sL https://rpm.nodesource.com/setup_10.x | bash 
    && yum install -y --nogpgcheck nodejs 
    && yum install -y --nogpgcheck git 
    && node -v

RUN git config --global user.email "940840746@qq.com"
RUN git config --global user.name "fyf2173"

# install angular cli 
RUN npm install -g @angular/cli

# 设置时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

# create a ng-test project to enable container run foreground all the way
RUN ng new ng-test --defaults --routing --style="less"

RUN echo "#!/bin/bash" >> /run.sh
RUN echo "cd /ng-test/" >> /run.sh
RUN echo "ng serve --host 0.0.0.0 --port 80" >> /run.sh

RUN chmod +x /run.sh

WORKDIR /opt/

CMD ["/run.sh"]

针对问题2的操作步骤：

• 进入到dockerfile所在目录，构建docker镜像
• 构建镜像后，新建容器的同时，挂载工作目录到容器中并进入容器
• 在挂载的目录中创建项目，退出并删除容器
• 再次创建容器，并挂载写好的shell脚本
• 修改了配置之后，重启容器

命令如下：

# 构建ng:dev镜像
docker build -t ng:dev .

# 创建容器并命名为ng-dev
# -p 指定多个端口映射为后续项目做准备
# 80端口是分配给测试项目的，容器启动后可以localhost:5020查看测试的angular项目
# --rm 指定容器退出时，会将容器删除
# /bin/bash 指定容器启动后，立即进入容器并执行bash脚本
# -v 挂载当前目录下的project目录到容器中的/opt目录下，在opt生成的项目，会实时同步到project目录中 
docker rum -t -i --rm --name ng-dev -p 5020:80 -p 5021:8080 -p 5022:8081 -v $PWD/project:/opt ng:dev /bin/bash

# 进入opt目录，新建prs-ng的angular项目，新建完成后，退出容器
cd /opt/
ng new prs-ng --defaults --routing --style="less"
exit

新建run.sh文件，内容如下：

#!/bin/bash

cd /opt/prs-ng/
ng serve --host 0.0.0.0 --port 8080

再次创建容器，并挂载run.sh脚本

# 创建容器，并后台运行
docker rum -t -i -d --name ng-dev -p 5020:80 -p 5021:8080 -p 5022:8081 -v $PWD/project:/opt -v $PWD/run.sh:/run.sh ng:dev

浏览器中访问localhost:5021即可访问项目首页，内容如下：