如何通过docker编译vue项目

wls1036
English

介绍

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

参考

阅读 1k

yaya平台
记录yaya平台技术细节

幸福是奋斗出来的

254 声望
72 粉丝
0 条评论

幸福是奋斗出来的

254 声望
72 粉丝
文章目录
宣传栏