1、 初衷

最近做了几个前后端项目，在前后端项目链条的时候，发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错， npm install一直无法安装，但是我在linux系统下面安装了nodejs环境之后，执行npm install 很快成功了，于是我就把项目的开发环境转移到linux开发服务器下面去了，突然起了一个想法就是能不能使用docker来配置开发环境， 每一个项目都单独整一个开发运行环境来跑，抱着试试看的心态做了一下尝试， 发现成功了，现在把具体的操作进行一下记录，分享给同样爱折腾的童鞋~

2、环境准备

  • linux系统（我这里用的是CentOS7.9）
  • docker（预先安装docker服务，我之前写过安装docker的文章，感兴趣的童鞋可以去翻一翻）

3、搭建过程

3.1 准备Dockerfile脚本文件

这个Dockerfile文件最好放在vue项目的根目录下面， 类似这样

docker前端环境构建 docker 前端开发环境_开发环境

# 指定nodeJS版本镜像
FROM node:14.19
# 脚本维护者姓名 随意
MAINTAINER kkarma
# 创建vue项目根路径，需要在这个目录下运行npm run dev/serve命令
ADD . /rds/saturn-admin-web/
# 切换vue项目根路径为工作路径
WORKDIR /rds/saturn-admin-web/
# 安装项目依赖
RUN npm install
# 重新构建node-sass（防止node-sas安装失败）
RUN npm rebuild node-sass --force
# 设置项目运行的host
ENV HOST 0.0.0.0
# 设置项目运行的端口
ENV PORT 6300
# 设置项目对外暴露的端口
EXPOSE 6300
# 容器启动之后运行npm run dev命令把vue项目运行起来
CMD ["npm", "run","dev"]

3.2 构建镜像

切换到vue项目的根目录下， 就是Dockerfile脚本文件同级的目录，构建镜像

docker build -t greatwall-admin-web .

构建完成，看看镜像列表， 看看是否构建成功

docker image ls

docker前端环境构建 docker 前端开发环境_开发环境_02


这里可以看到， 我们的开发环境下的vue项目镜像已经创建好了

3.3 开发环境启动vue项目

docker run -d -p 6300:6300 saturn-admin-web

docker前端环境构建 docker 前端开发环境_docker vue_03


开发环境下的项目已经启动起来了， 部署是不是也很简单~， 大家自己试试！