如何通过docker编译vue项目

介绍

nodejs官方提供docker镜像，并且镜像自带npm工具，也就是说，完全可以用docker镜像编译本地前端项目，那相比本地安装nodejs编译，docker编译有哪些优势呢

• 可以安装多个版本nodejs，可以选择指定版本nodejs进行编译，如果你是要搭建一个构建平台，这是个非常好的方案
• 免安装，如果需要安装多版本nodejs，这个优势就很明显了
• 不会污染本地环境

如果你是个人开发，使用docker编译项目相对有点极客行为，在个人开发上并没有太大的优势，但是如果你是要搭建一个构建系统，那么docker镜像的方案是你最好的选择。

实现

虽然nodejs官方提供了镜像但实践下来如果直接用官方的镜像，无法达到想要的效果，原因有以下几点

• nodejs项目初衷是用javascript作为后端预言，所以镜像主要是用于后端服务
• 镜像虽然自带了npm工具，但因为WORKDIR的关系无法正常编译，尝试过多种方法还是无法顺利编译
• 基于官方的镜像做二次构建成本很低，所以建议根据自己的需求做二次构建

我们先实现一个npm install功能的镜像

• 准备Dockerfile文件

from node:16.3.0
WORKDIR /user/app
ENTRYPOINT ["npm","install"]

WORKDIR必须指定，使用时将项目挂载到WORKDIR即可

• 构建镜像

docker build -t node-install:16.3.0 .

• 我们以编译这个项目为例

➜ docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -it --rm node-install:16.3.0

up to date, audited 615 packages in 12s

1 package is looking for funding
  run `npm fund` for details

63 vulnerabilities (17 low, 17 moderate, 27 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

顺利完成npm install，我们可以再制作一个build的镜像用户构建，不过我们可以将install和build放到一个镜像里。

• 准备脚本entrypoint.sh

#!/bin/bash
npm install
npm run build

• Dockerfile

from node
WORKDIR /user/app
COPY entrypoint.sh /
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

• 构建镜像

docker build -t node-build:16.3.0 .

• 测试

➜ docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -it --rm node-build:16.3.0

.....

> build
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: a6a2352d086bcda1ccb9                                                           
Version: webpack 2.5.1
Time: 2581ms
   Asset     Size  Chunks             Chunk Names
build.js  87.9 kB       0  [emitted]  main

这样我们就制作了一个非常方便的前端构建镜像

补充

前面提到过，因为WORKDIR的关系无法使用官方镜像进行编译项目，后面才知道docker在启动时可以指定WORKDIR，因此还可以通过指定WORKDIR进行编译

docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -w /user/app -it --rm node:16.3.0 npm install

docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -w /user/app -it --rm node:16.3.0 npm run build

参考

• 如何用docker编译java项目