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

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 项目，其他项目思路基本雷同