docker 构建前端项目, 公共 node_modules 镜像

copy_left

发布于 2019-12-16 17:50:05

2.9K1

发布于 2019-12-16 17:50:05

文章被收录于专栏：方球

docker 构建前端项目, 公共 node_modules 镜像

目的

通过docker 快速搭建项目开发环境
防止node_modules 重复安装, 及安装成功率

基础项目结构

宿主机
- f:/project
  - package.json
  - postcess.config.js
  - ....
容器
- project
  - package.json
  - postcess.config.js
  - node_modules
  - source

1. 构建基础node环境, 设置共享卷, 设置 NODE_PATH

docker run -it --env NODE_PATH=/project/node_moduels -v /f/project:/project/source  node /bin/bash

// 这里将 f:/project 映射到容器的 /project/source 目录

2. 构建 node_modules

// 拷贝文件 package.json postcss.config.js
cp ./source/package.json ./package.json
cp ./source/postcess.config.json /postcess.config.json

// 构建node_modules
npm i

// 创建 node_modules 软连
ln -s /project/node_modules /project/source/node_modules

3. 创建镜像

// docker commit [容器id] [镜像名称]
docker commit 2df7591d9c08 vue-project/node_modules

测试

// 构建新容器时，需要重新挂载本地卷
docker run -it -v /f/project:/project/source  vue-project/node_modules /bin/bash

// 启动前端项目
cd project/source

yarn serve

总结

将项目源文件通过 volume 挂载到容器中，方便源文件可被随时修改并保存
node_modules 与镜像绑定，通过软连及制定NODE_PATH 的方式共享 node_modules, 保证拉取镜像后可直接使用.
这里为了保证构建及包的正常使用，将 package.json postcess.config.json 放到 node_modules 同级目录,更新配置时，需要注意文件的同步更新
这里使用的是vue 项目，其他项目思路基本雷同

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

node.js