ruoyi 若依 VUE 宝塔 Nignx部署 伪静态配置

<think>嗯，用户想在宝塔面板中配置Nginx来部署若依项目。首先，我需要回忆一下若依项目的结构。若依是一个前后端分离的框架，前端可能用Vue，后端用Spring Boot。所以用户可能需要同时配置前端和后端的Nginx设置。 根据用户提供的引用，引用[1]提到将前端文件上传到Nginx的html目录下，并修改配置文件。引用[2]提到在宝塔中添加PHP项目，但这里可能适用于静态前端项目。若依的前端是Vue，所以可能需要类似的处理，比如上传到指定目录，并配置代理到后端API。 然后，后端部分可能需要反向代理。引用[3]提到了Nginx反向代理WebSocket，这在若依中可能用得到，比如消息推送功能。需要设置Upgrade和Connection头。另外，引用[4]是关于Django的，但里面提到收集静态资源，这可能和Spring Boot的静态资源处理不同，但配置反向代理的思路是类似的。 用户可能需要分步骤指导：上传前端文件，配置前端Nginx，设置后端API的反向代理，以及可能的WebSocket配置。还要注意SSL证书的配置，如果启用了HTTPS，可能需要调整代理设置。另外，若依后端可能运行在某个端口，比如8080，Nginx需要将/api的请求转发过去。 可能需要检查配置文件中的路径是否正确，比如root目录是否指向前端dist文件夹，proxy_pass是否正确指向后端地址。还有跨域问题，是否需要在Nginx中添加CORS头。此外，伪静态配置可能用于Vue的路由模式，确保history模式正常工作。 用户可能遇到的常见问题包括403错误（路径或权限问题）、接口404（代理配置错误）、WebSocket连接失败（缺少Upgrade头配置）。需要提醒用户检查日志，重启Nginx服务，以及确保后端服务正常运行。 最后，应该生成相关问题，帮助用户深入解决可能的问题，比如性能优化、HTTPS配置、负载均衡等。</think>### 宝塔面板中若依项目Nginx配置步骤 #### 1. **前端部署配置** - **上传前端文件** 将若依前端（Vue项目）编译后的`dist`文件夹上传至宝塔Nginx默认目录： ```bash /www/server/nginx/html/ruoyi-ui ``` 引用[1]中提到的静态资源目录适用此场景[^1]。 - **配置前端Nginx** 在宝塔面板中创建新站点，域名填写前端访问地址（如`ruoyi.yourdomain.com`），根目录指向`/www/server/nginx/html/ruoyi-ui`，PHP版本选择**纯静态**。 添加以下关键配置（伪静态规则）： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 此配置支持Vue路由的History模式[^2]。 #### 2. **后端接口代理配置** - **反向代理设置** 若依后端（Spring Boot）默认运行在`localhost:8080`，需通过Nginx反向代理暴露接口。 在宝塔网站配置文件中添加： ```nginx location /prod-api/ { # 若依默认接口前缀 proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 引用[3]的代理逻辑适用于此步骤[^3]。 #### 3. **WebSocket代理（可选）** 若项目含WebSocket功能（如消息推送），需额外配置： ```nginx map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { location /ws/ { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } } ``` 此配置基于引用[3]的WebSocket映射指令[^3]。 #### 4. **HTTPS配置（可选）** 在宝塔面板的**SSL**选项卡中申请免费证书，并强制HTTPS跳转。需确保代理配置包含： ```nginx proxy_set_header X-Forwarded-Proto $scheme; ``` #### 5. **完整配置示例** ```nginx server { listen 80; server_name ruoyi.yourdomain.com; root /www/server/nginx/html/ruoyi-ui; # 前端路由 location / { try_files $uri $uri/ /index.html; } # 后端接口代理 location /prod-api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 静态资源缓存 location ~* \.(js|css|png|jpg)$ { expires 30d; add_header Cache-Control "public"; } } ``` #### 6. **验证与调试** - 执行`nginx -t`测试配置语法 - 重启Nginx服务 ```bash systemctl restart nginx ``` - 查看错误日志定位问题： ```bash tail -f /www/server/nginx/logs/error.log ``` ### 常见问题排查 1. **403 Forbidden** - 检查`ruoyi-ui`目录权限是否为`755` - 确认`index.html`存在且可读 2. **接口返回404** - 确认后端服务已启动并监听`8080`端口 - 检查`proxy_pass`路径结尾是否包含`/` 3. **WebSocket连接失败** - 验证`Upgrade`和`Connection`头是否正确传递[^3]