1、 初衷
最近做了几个前后端项目,在前后端项目链条的时候,发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错,npm install
一直无法安装,但是我在linux系统下面安装了nodejs环境之后,执行npm install
很快成功了,于是我就把项目的开发环境转移到linux开发服务器下面去了,突然起了一个想法就是能不能使用docker来配置开发环境, 每一个项目都单独整一个开发运行环境来跑,抱着试试看的心态做了一下尝试, 发现成功了,现在把具体的操作进行一下记录,分享给同样爱折腾的童鞋~
2、环境准备
linux系统(我这里用的是CentOS7.9)docker(预先安装docker服务,我之前写过安装docker的文章,感兴趣的童鞋可以去翻一翻)3、搭建过程
3.1 准备Dockerfile脚本文件
这个Dockerfile
文件最好放在vue项目的根目录下面, 类似这样
# 指定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# 设置项目运行的hostENV 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
这里可以看到, 我们的开发环境下的vue项目镜像已经创建好了
3.3 开发环境启动vue项目
docker run -d -p 6300:6300 saturn-admin-web
开发环境下的项目已经启动起来了, 部署是不是也很简单~, 大家自己试试!