2026/4/6 2:20:24
网站建设
项目流程
可以发广告的网站,佛山市制作网站,网页设计图片怎么居中对齐,织梦网站图片修改不了Linux 环境下前后端分离项目手动部署指南 (以若依框架为例)
本指南详细记录了在 Linux 服务器上部署前后端分离项目#xff08;Spring Boot Vue#xff09;的完整流程#xff0c;涵盖环境准备、后端部署、前端部署及 Nginx 配置等核心步骤。
0. 环境准备
在开始部署前…Linux 环境下前后端分离项目手动部署指南 (以若依框架为例)本指南详细记录了在 Linux 服务器上部署前后端分离项目Spring Boot Vue的完整流程涵盖环境准备、后端部署、前端部署及 Nginx 配置等核心步骤。0. 环境准备在开始部署前请确保服务器已安装以下基础环境Redis: 缓存服务Nginx: 反向代理与静态资源服务器JDK: Java 运行环境 (建议 JDK 1.8)MySQL: 数据库服务1. 后端部署 (Spring Boot)1.1 源码打包在本地开发环境中使用 Maven 对后端项目进行打包。操作运行 Maven 的package命令。产物在target目录下生成.jar文件例如ruoyi-admin.jar。1.2 上传程序将打包好的 jar 包上传至服务器指定目录。建议创建规范的目录结构以便管理。推荐路径示例/home/www/project_name/server/操作示意1.3 启动服务使用nohup命令后台启动 Java 程序避免关闭终端后服务停止。详细启动脚本参考![[linux运行jar包]]常用启动命令# 基础启动命令 (根据实际 jar 包名称修改)# temp.txt 表示将日志输出重定向到 temp.txt 表示后台运行nohupjava-jarruoyi-admin.jartemp.txt1.4 进程管理与验证查看 Java 进程# 检查是否有 java 进程在运行ps-ef|grepjava关闭进程如果需要重启或停止服务先查询进程号 (PID)然后执行 kill 命令。# -9 表示强制终止kill-9进程号[!IMPORTANT]网络安全配置云服务器安全组需在云厂商控制台开放后端端口如8080。Linux 防火墙如果服务器开启了firewalld也需放行对应端口。部署验证后端启动成功后Swagger 或接口文档应可访问。2. 前端部署 (Vue)2.1 项目打包在本地前端项目根目录下构建生产环境代码。# 构建生产环境 (根据 package.json 中的脚本名称调整)npmrun build打包结果生成dist文件夹。包含index.html和static资源。2.2 上传静态资源将生成的dist文件夹上传至服务器。[!NOTE]目录规范建议建议重命名dist文件夹以区分不同项目或端如parking-back不要直接使用默认的dist名称。上传路径示例/home/www/parking-back/parking-back3. Nginx 配置 (核心步骤)Nginx 负责处理静态资源请求和将 API 请求反向代理到后端。3.1 修改配置文件编辑 Nginx 配置文件通常位于/usr/local/nginx/conf/nginx.conf或/etc/nginx/nginx.conf。配置示例与详解server { # 1. 监听端口 (前端访问入口) # 注意此端口(如9090)同样需要在安全组和防火墙中开放 listen 9090; # 2. 服务器域名或IP server_name localhost; # 3. 前端静态资源配置 location / { # 指定前端文件上传的绝对路径 root /home/www/parking-back/parking-back; # 默认首页 index index.html index.htm; # 4. 解决 Vue History 模式刷新 404 问题 (关键) # 尝试寻找 $uri找不到找 $uri/再找不到跳转 index.html try_files $uri $uri/ /index.html; } # 5. 后端接口反向代理配置 # 拦截以 /prod-api/ 开头的请求 location /prod-api/ { # 代理转发到后端服务地址 # 注意proxy_pass 结尾带 / 会去除 /prod-api/ 前缀 proxy_pass http://localhost:8080/; # 传递真实客户端 IP 等头部信息 proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 错误页面配置 error_page 500 502 503 504 /50x.html; location /50x.html { root html; } }3.2 重启 Nginx修改配置文件后必须重载或重启 Nginx 才能生效。# 进入 Nginx sbin 目录 (根据实际安装位置调整)cd/usr/local/nginx/sbin# 检查配置文件语法是否正确./nginx-t# 重载配置文件 (推荐无需停止服务)./nginx-sreload4. 最终验证在浏览器中访问http://服务器IP:前端端口例如http://x.x.x.x:9090。如果能正常显示页面且验证码/数据加载正常说明前后端部署及 Nginx 代理配置成功。