当前位置：首页 > news >正文

gitee_流水线搭配 Dockerfile 部署vue项目

news 2025/8/16 7:10:25

使用 gitee流水线搭配docker，编写Dockerfile文件进行自动部署Vue项目

gitee流水线

基本配置跟另外一篇文章中类似

gitee_配置自动部署vue项目-CSDN博客

需要修改的只是脚本执行

# 构建阶段脚本echo '清理旧文件'
rm -rf dist
echo '配置 Git 参数'
git config --global http.postBuffer 524288000
git config --global core.compression 0
git config --global url."https://gitee.com".insteadOf "https://github.com"
echo '拉取最新代码'
git pull origin develop --progress --verbose || git clone --depth 1 -b develop git@gitee.com:Ren-qiang1764/vue2_project.git .echo '设置NPM源，提升安装速度'
npm config set registry https://registry.npmmirror.comecho 执行编译命令
npm install && npm run build:special_effectsecho '列举当前目录'
lsecho '拷贝Dockerfile文件 到 打包文件中'
# 项目中 Dockerfile 文件的路径
cp ./projects/special_effects/Dockerfile ./dist/special_effects/#echo '列举文件'
#cd dist/special_effects/ && ls

# 部署阶段脚本mkdir -p /root/test_git/nginx/dist # 新建目录
rm -rf /root/test_git/nginx/dist
tar zxvf ~/gitee_go/deploy/output.tar.gz -C /root/test_git/nginx # 解压内容
cd /root/test_git/nginx/dist # 进入
mv special_effects/* ./ # 将打包结果移动到该目录下
rm -rf special_effects
chmod -R 777 /root/test_git/nginx/dist # 设置目录访问权限，防止nginx访问403
# docker restart nginx_vue2_special_effects # 重启dockerecho 输出文件列表 /root/test_git/nginx/dist
cd /root/test_git/nginx/dist && lsecho 强制删除旧镜像和容器（避免冲突）
#docker rm -f nginx_vue_develop 2>/dev/null || true
#docker rmi nginxbuild 2>/dev/null || true# 定义基础名称和日期
IMAGE_BASE="nginxbuild"
DATE_TAG=$(date +"%Y%m%d")  # 例如 20250815# 查找当天已构建的镜像数量（确定序号）
COUNT=$(docker images --filter=reference="${IMAGE_BASE}_${DATE_TAG}_*" --format "{{.Tag}}" | wc -l)
SEQ=$(printf "%02d" $((COUNT + 1)))  # 格式化为两位数，如 01echo 根据Dockerfile文件构建镜像
IMAGE_TAG="${IMAGE_BASE}_${DATE_TAG}_${SEQ}"
docker build -t "${IMAGE_TAG}" -f Dockerfile .# 打印构建的镜像版本
echo "构建成功！镜像版本: ${IMAGE_TAG}"# 1. 停止并删除旧容器
docker stop nginx_vue_develop && docker rm nginx_vue_develop# 2. 用新镜像启动容器
docker run --name nginx_vue_develop -itd -p 8083:80 \-v /root/test_git/nginx/nginx.conf:/etc/nginx/nginx.conf \-v /root/test_git/nginx/conf/conf.d:/etc/nginx/conf.d \-v /root/test_git/nginx/log:/var/log/nginx \-v /root/test_git/nginx/dist/:/usr/share/nginx/html/ \"${IMAGE_TAG}"echo 'Hello Gitee Go!'

在项目指定位置添加Dockerfile文件

FROM nginx:latest
# 工作区
WORKDIR /root/test_git/nginx/dist
# COPY package*.json ./
# RUN npm install
# 从宿主机当前路径 复制 到容器运行路径
COPY ./ /usr/share/nginx/html
# 开放端口
EXPOSE 8083

查看全文

http://www.xdnf.cn/news/1301635.html