23、Jenkins容器化部署Vue应用

23、Jenkins容器化部署Vue应用

1、准备Dockerfile

将Dockerfile文件放入项目目录下

sh 复制代码
# 基础镜像
FROM registry.cn-hangzhou.aliyuncs.com/xx_blog/nginx:1.27.2

# author
MAINTAINER maintainer="xx@qq.com"

# 复制html文件到路径
COPY dist/ /usr/share/nginx/html

EXPOSE 80

启停脚本一并上传

2、新建流水线工程

my-vue-app-docker

3、执行脚本修改一下

sh 复制代码
node -v
yarn -v
yarn install
yarn build

SERVER_NAME=my-vue-app

chmod 777 stop_container.sh && bash stop_container.sh ${SERVER_NAME} $BUILD_NUMBER

docker build -t ${SERVER_NAME}:v${BUILD_NUMBER} .

docker tag ${SERVER_NAME}:v${BUILD_NUMBER} 112.74.160.27:8081/xx-blog/${SERVER_NAME}:v${BUILD_NUMBER}
echo "Harbor12345" | docker login 112.74.160.27:8081 -u "admin" --password-stdin
docker push 112.74.160.27:8081/xx-blog/${SERVER_NAME}:v${BUILD_NUMBER}

docker run -d --name=${SERVER_NAME} -p 80:80 ${SERVER_NAME}:v${BUILD_NUMBER}

4、运行成功

相关推荐
小白银子3 小时前
零基础从头教学Linux(Day 52)
linux·运维·服务器·python·python3.11
Y42583 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
从零开始的ops生活6 小时前
【Day 80】Linux-NAS 和 SAN 存储
linux·运维·php
不想上班只想要钱7 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
Wang's Blog7 小时前
Linux小课堂: 输入重定向与管道操作详解
linux·运维·服务器
岁月宁静7 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
python百炼成钢8 小时前
3.Linux 网络相关
linux·运维·网络·stm32·单片机
Jtti8 小时前
香港硬防服务器防御DDOS攻击的优点
运维·服务器·ddos
533_11 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js