小薛博客

Appearance

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

image-20250730113107419

启停脚本一并上传

image-20250730113454996

2、新建流水线工程 ​

my-vue-app-docker

image-20250730113327879

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、运行成功 ​

image-20250730114615076