关于前端:如何通过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 我的项目