jenkins前后端部署配置

本文详细介绍了前端Vue项目和后端项目的部署流程,包括前端文件的SSH操作、服务器上旧文件的清理、前端项目的构建与打包,以及后端项目的端口管理、服务器上的项目更新和jar包的运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 前端(vue)项目配置

填写代码的svn+@HEAD

 

SSH操作,删除服务器之前打包的前端文件

 

bat命令如下

@echo off

echo 删除目录

set base=F:\project_run\

set run=%1%

rd /s /Q %base%%run%

exit

 

 

构建,前端打包

 

打包的文件SSH到服务器的目录下

 

 

 

 

 

 

 

 

 

 

 

 

  • 后端项目配置

填写代码的svn+@HEAD

 

打包前干掉服务器的端口

bat文件如下

@echo off

set port=%1%

echo 关闭的端口为:%port%

for /f "tokens=1-5" %%i in ('netstat -ano^|findstr ":%port%"') do ( taskkill /pid %%m /F )

exit

 

 

 

 

pom.xml maven打包项目

 

把打包的项目目录下的jar包SSH到服务器的项目目录。然后运行jar包

 

### 使用 Jenkins 部署前后端分离项目的解决方案 在使用 Jenkins 部署前后端分离项目时,通常需要分别处理前端和后端的构建与部署流程。以下是一个完整的解决方案,结合了提供的引用内容和专业实践。 #### 1. 后端项目部署 后端项目通常以 JAR 或 WAR 包的形式进行打包和部署。以下是具体步骤: - **下载并启动后端项目** 将后端项目的 WAR 或 JAR 包上传到服务器,并通过命令启动。例如: ```bash nohup java -jar jenkins.war > ../logs/jenkins.log 2>&1 & ``` 此命令将后台运行后端项目,并将日志输出到指定文件中[^2]。 - **Jenkins 配置后端项目** 在 Jenkins 中创建一个自由风格的项目,配置如下: - 输入 Git 地址并添加 Git 账户。 - 增加构建步骤,调用 Maven 目标(如 `clean package`)以生成 JAR 包。 - 如果需要,增加额外的构建步骤执行 Shell 脚本,用于停止旧服务并启动新服务。 - **Shell 脚本示例** 用于停止旧服务并启动新服务的脚本可以参考以下内容: ```bash # 停止旧服务 ps aux | grep vueblog-0.0.1-SNAPSHOT.jar | grep -v "grep" | awk '{print "kill -9 "$2}' | sh # 启动新服务 export BUILD_ID=dontKillMe nohup java -jar /path/to/vueblog-0.0.1-SNAPSHOT.jar > logTest.log 2>&1 & ``` 注意:`export BUILD_ID=dontKillMe` 是为了防止 Jenkins 杀死子进程[^3]。 #### 2. 前端项目部署 前端项目通常基于 Vue、React 等框架,需要通过构建工具(如 npm 或 yarn)生成静态资源文件。以下是具体步骤: - **安装依赖环境** 确保服务器上已安装 Node.js 和相关构建工具(如 npm)。可以在 Jenkins 的全局工具配置中设置 Node.js 的路径。 - **Jenkins 配置前端项目** 创建一个新的自由风格项目,配置如下: - 输入 Git 地址并添加 Git 账户。 - 增加构建步骤,执行 npm 构建命令(如 `npm run build`)以生成静态资源文件。 - 增加额外的构建步骤,将生成的静态资源文件复制到目标路径(如 Nginx 的 html 目录)。 - **Shell 脚本示例** 用于前端项目构建和部署的脚本可以参考以下内容: ```bash cd /path/to/frontend npm install npm run build # 将生成的 dist 文件夹复制到 Nginx 的 html 目录 rsync -av --delete ./dist/ /usr/share/nginx/html/ # 重新加载 Nginx 配置 /usr/local/nginx/sbin/nginx -s reload ``` #### 3. 自动化流程整合 为了实现一键部署,可以将前端和后端的 Jenkins 项目关联起来,通过以下方式实现: - 在后端项目的 Jenkins 配置中,添加“构建后操作”,触发前端项目的构建。 - 确保前后端项目的 Git 地址正确,并且构建步骤无误。 #### 4. 示例完整脚本 以下是一个完整的前后端部署脚本示例: ```bash # 后端部署 echo "Stopping old backend service..." ps aux | grep vueblog-0.0.1-SNAPSHOT.jar | grep -v "grep" | awk '{print "kill -9 "$2}' | sh echo "Starting new backend service..." export BUILD_ID=dontKillMe nohup java -jar /path/to/vueblog-0.0.1-SNAPSHOT.jar > logTest.log 2>&1 & # 前端部署 echo "Building frontend project..." cd /path/to/frontend npm install npm run build echo "Copying frontend files to Nginx directory..." rsync -av --delete ./dist/ /usr/share/nginx/html/ echo "Reloading Nginx configuration..." /usr/local/nginx/sbin/nginx -s reload ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值