宝塔部署若依前端出现502解决方法

一、前言

‌若依系统是一个基于Java语言的开源项目，旨在帮助开发者减少开发时间，特别适用于需要快速开发出一套具有用户管理、菜单管理、权限管理、定时任务、日志管理等功能的简单系统。‌ 系统分为前后端分离、分布式等架构

部署教程如下：前后端分离部署教程

然而通过宝塔来部署若依系统会遇见一些问题，特此在这里记录一下

二、前端出现502

网上说是反向代理的问题

需要再配置文件中配置以下代码：

    # 防止浏览器刷新页面丢失
    location / {
        index  你的dist文件的路径/index.html;
        # 防止浏览器刷新页面丢失
        try_files $uri $uri/ /index.html;
    }
    # 配置代理 要和你的后端对应上
    location /dev-api/ {
    	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;
        # 填写的内容要与若依前端代码中的target中的地址一致
    	proxy_pass ip:端口;
    	proxy_connect_timeout 6000s;
    	proxy_read_timeout  6000s;
    	proxy_send_timeout  6000s;
    }
    # 服务器访问时，f12进入检查时会自动带上的prod-api前缀，要和你的后端对应上
    location /prod-api/{
    	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;
        # 填写的内容要与若依前端代码中的target中的地址一致
    	proxy_pass ip:端口;
    	proxy_connect_timeout 6000s;
    	proxy_read_timeout  6000s;
    	proxy_send_timeout  6000s;
    }

将proxy_pas替换成前端写的target

module.exports = {
  devServer: {
    proxy: {
      '/dev-api': {
        target: 'http://你的后端域名',
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': ''
        }
      }
    }
  }
};

但是还是出现502错误

三、解决方法

因为我的后端同样部署在同一个服务器8080端口，我将proxy_pas替换为

proxy_pass  http://localhost:8080/;

前端依旧是以域名的形式
就解决了以上502问题

估计应该是无法配置域名，而需要ip+端口的形式配置