Jenkins 自动打包项目镜像部署到服务器 ---（前端项目）

news/2025/2/27 7:22:45

Jenkins 新增前端项目Job

指定运行的节点

选择部署运行的节点标签，dev标签对应开发环境
在这里插入图片描述
在这里插入图片描述
节点的远程命令执行配置
jenkins完整流程

配置源码 拉取

在这里插入图片描述

Credentials添加

触发远程构建

配置后可以支持远程触发jenkins构建（比如自建的CICD自动化发布平台），不需要远程构建的可以不配置
在这里插入图片描述
token生成配置

Build Steps

采用shell脚本模式

# jenkins服务Job运行的工作空间项目存放地址
codeRootDir="/data/jenkins/workspace/Dev.xx.Web"
# 项目部署远程服务器地址
remoteHost="10.30.222.11"
# 远程部署服务器存放镜像地址
remoteRootDir="/data/websites/images"
# 生成的项目镜像名称
dockerImageName="img.xx.web.dev"
# 运行的容器名称
containerName="xx.web.dev"

# 确保工作空间拥有该目录
mkdir -p ${codeRootDir}
# 切换到工作目录
cd ${codeRootDir}

echo build start
#指定镜像地址
npm config set registry https://registry.npmmirror.com/
#安装Vue项目依赖
npm install @vue/cli-plugin-eslint@latest --legacy-peer-deps
# 打包（根据Vue项目中的配置来）
npm run build
echo build end

echo "Building Docker image..."
# 开始构建镜像（注意dockerfile 要在codeRootDir目录下）
docker build -t "${dockerImageName}:latest" "${codeRootDir}"
echo "Docker image built successfully."

#压缩保存镜像到codeRootDir目录下
echo "Saving Docker image to file..."
docker save "${dockerImageName}:latest" | gzip > "${codeRootDir}/${dockerImageName}.tar.gz"
echo "Docker image saved successfully."

# 远程传输到目标服务器
echo "Uploading Docker image to server..."
scp -C "${codeRootDir}/${dockerImageName}.tar.gz" root@"${remoteHost}":"${remoteRootDir}/"
echo "Upload completed."

# 远程执行命令
echo "Deploying on remote server..."
ssh root@"${remoteHost}" "
cd ${remoteRootDir} &&
# 解压镜像，并加载镜像到本地
gunzip -c ${dockerImageName}.tar.gz | docker load &&
# 查询当前是否有该镜像服务运行，有则删除该镜像后从新运行镜像
docker ps -q --filter 'name=${containerName}' | grep -q . && docker rm -f ${containerName} || true &&
docker run -d --name ${containerName} --privileged=true --restart=always -p 8090:80 ${dockerImageName}:latest
"
echo "Deployment completed."

Vue项目代码对应改造

在这里插入图片描述
在项目package.json同级目录下创建 Dockerfile、nginx.conf、nginx.default.config 文件

package.json

定义的install 、 bulid 、run命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:report": "vue-cli-service build --report",
    "globle": "npm install -g cnpm --registry=https://registry.npm.taobao.org&&cnpm i rimraf npm-check-updates nrm -g&&rimraf node_modules&&cnpm i",
    "lint": "eslint --fix --ext .js,.vue src",
    "lint:style": "stylelint-config-prettier-check",
    "inspect": "vue-cli-service inspect",
    "template": "plop",
    "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
    "use:npm": "nrm use npm",
    "use:taobao": "nrm use taobao",
    "update": "ncu -u --reject sass-loader,sass,screenfull,eslint&&cnpm i",
    "update:globle": "ncu -g --concurrency 10 --timeout 80000",
    "push": "start ./push.sh",
    "deploy": "start ./deploy.sh"
  },

Dockerfile

FROM nginx

MAINTAINER vue-admin-beautiful
LABEL description=本项目基于vue-admin-beautiful开源版构建
LABEL qq=783963206

# 环境变量
ENV TZ=Asia/Shanghai \
    RUN_USER=nginx \
    RUN_GROUP=nginx \
    DATA_DIR=/data/web \
    LOG_DIR=/data/log/nginx

# 工作目录
WORKDIR ${DATA_DIR}

# 日志输出
RUN ["echo","vue-admin-beautiful - UI building..."]

# 切换为上海时区
RUN ln -sf /usr/share/zoneinfo/$TZ /etc/localtime \
    && echo $TZ > /etc/timezone

# 创建日志文件夹
RUN mkdir ${LOG_DIR} -p
RUN chown nginx.nginx -R ${LOG_DIR}

# 拷贝dist包文件
COPY ./dist ./

# 拷贝nginx配置文件
ADD nginx.conf /etc/nginx/nginx.conf
ADD nginx.default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

nginx.conf

user  nginx;
worker_processes  auto;
pid        /var/run/nginx.pid;

events {
    use epoll;
    worker_connections 51200;
    multi_accept on;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server_names_hash_bucket_size 512;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 50m;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    tcp_nopush     on;
    tcp_nodelay on;

    keepalive_timeout  65;

    # gzip 压缩
    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

    limit_conn_zone $binary_remote_addr zone=perip:10m;
    limit_conn_zone $server_name zone=perserver:10m;

    include /etc/nginx/conf.d/*.conf;
}

nginx.default.conf

server {
    listen       80;
    server_name  localhost;

    access_log  /data/log/nginx/access.log  main;
    error_log   /data/log/nginx/error.log;

    # 静态资源
    location / {
        root   /data/web;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 前端代理(注意这里需要填写 真实后端ip)
    location /api/ {
   		//注意 http:ip:8090/ 和http:ip:8090的区别
   		// http:ip:8090/会去掉/api这一层 
   		// http:ip:8090 不会去掉/api这一层
        proxy_pass http://~~真实后端ip:8090~~ ;
       
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Credentials: true;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;

        proxy_http_version 1.1;
        # 连接延时
        proxy_connect_timeout 3600s;
        proxy_read_timeout 3600s;
        proxy_send_timeout 3600s;
        # IP 穿透
        proxy_set_header        Host $proxy_host;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        # WebSocket 穿透
        proxy_set_header Origin "";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

网络请求路径

部署前端项目地址
remoteHost=“10.30.222.11”
在这里插入图片描述

// 服务的地址+8090 根据nginx配置对应转发到真实的ip中

vue项目默认请求前缀
http://10.30.222.11:8090/api
在这里插入图片描述

构建部署

在这里插入图片描述

部署成功日志

在这里插入图片描述

访问路径

10.30.222.11:8090
在这里插入图片描述


http://www.niftyadmin.cn/n/5869711.html

相关文章

爬虫获取 t_nlp_word 文本语言词法分析接口：技术实现与应用实践

爬虫获取 t_nlp_word 文本语言词法分析接口：技术实现与应用实践

在自然语言处理（NLP）领域，文本语言词法分析是理解文本内容的基础。通过分词、词性标注和命名实体识别等功能，开发者可以深入挖掘文本数据的价值。本文将详细介绍如何通过爬虫技术结合 t_nlp_word 文本语言词法分析接口&#xff0c…
阅读更多...
ubuntu上boost卸载和安装

ubuntu上boost卸载和安装

boost官方：Version 1.68.0 下载boost_1_68_0.tar.gz或可能其它版本 tar xzvf boost_1_68_0.tar.gz cd boost_1_68_0/ sudo apt-get update sudo apt-get install build-essential autotools-dev libicu-dev ibbz2-dev #卸载旧版本 # uninstall dpkg sudo apt --pu…
阅读更多...
《昇腾推理服务器+DeepSeek大模型》技术培训在图为科技成功举办

《昇腾推理服务器+DeepSeek大模型》技术培训在图为科技成功举办

2月17日，华为政企业务团队受邀莅临图为科技深圳总部，并成功举办了一场聚焦于《昇腾推理服务器DeepSeek大模型》的专业知识培训。 此次培训活动不仅深化了双方的技术交流，更标志着昇腾AI与DeepSeek大模型的全面融合应用即将迈入实质性落地的新…
阅读更多...
小程序类目调整汇总公告

小程序类目调整汇总公告

各位小程序开发者： 为进一步加强平台的规范管理，优化开发者类目选择体验，现对以下类目进行调整，请各位开发者知悉。 类目新增 非个人主体 #【交通服务-国际客运】 现资质要求 （2选1）： 1…
阅读更多...
LSM-Tree (日志结构合并树)

LSM-Tree (日志结构合并树)

LSM-Tree（日志结构合并树）是一种高效处理写操作的存储结构，广泛应用于NoSQL数据库如LevelDB和RocksDB。其核心思想是将随机写入转换为顺序写入，提升吞吐量。以下是其原理及Java实现示例： ### **LSM-Tree 原理** 1. **…
阅读更多...
HarmonyOS+Django实现图片上传

HarmonyOS+Django实现图片上传

话不多说，直接看代码： HarmonyOS部分代码 import { router } from "kit.ArkUI" import PreferencesUtil from "../utils/PreferencesUtil" import { photoAccessHelper } from "kit.MediaLibraryKit" import fs from oh…
阅读更多...
AI如何通过大数据分析提升制造效率和决策智能化

AI如何通过大数据分析提升制造效率和决策智能化

人工智能（AI）与大数据技术的融合，不仅重新定义了生产流程，更让企业实现了从“经验驱动”到“数据智能驱动”的跨越式升级。 从“模糊经验”到“精准洞察”​​ 传统制造业依赖人工经验制定生产计划，但面对复杂多变的市…
阅读更多...
排序算法（3）：

排序算法（3）：

这是我们的最后一篇排序算法了，也是我们的初阶数据结构的最后一篇了。 我们来看，我们之前已经讲完了插入排序，选择排序，交换排序，我们还剩下最后一个归并排序，我们今天就讲解归并排序，另外我们还…
阅读更多...
最新文章

Copyright @ 2022~2023