jenkins部署前后端分离项目

### 使用 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 ``` ###