如何在宝塔的一个站点同时配置前后端

前面有文章介绍了如何在宝塔上运行SpringBoot工程和Vue工程：

如何在宝塔上运行SpringBoot工程

如何在宝塔上运行Vue工程

有个很大的问题，是前后端使用了不同的域名，而且必须创建两个站点，能不能在一个站点一个域名的情况下，同时运行SpringBoot工程和Vue工程呢？

答案是可以，用反向代理，不过得手写，宝塔工具实现不了

一、准备

1、将前后端工程分别上传到站点对应的目录下

2、用“Java一键部署”工具，分别添加Web项目和Springboot项目

端口那些参考的设置，请参考前文

二、配置反向代理

1、先给前端添加一个反向代理，即将域名的请求指向前端服务

添加成功后，配置文件如下：

location ^~ /
{
    proxy_pass http://域名:前端服务的端口/;
    proxy_set_header Host 域名;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    
    set $static_fileo6zf1iSa 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_fileo6zf1iSa 1;
    	expires 12h;
        }
    if ( $static_fileo6zf1iSa = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

2、点击“配置文件”进入编辑状态

复制一份上述反向代理，修改如下：

location ^~ /api/
{
    proxy_pass http://域名:后端服务的端口/;
    proxy_set_header Host 域名;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    
    set $static_fileo6zf1iSa 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_fileo6zf1iSa 1;
    	expires 12h;
        }
    if ( $static_fileo6zf1iSa = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

三、完成

如上就配置完成了，记得“Java项目一键部署”中保存前后端已成功启动。

前端请求后端时，域名和路径之前需要多加api，如https://域名/api/....

感觉还不错，终于省去了一个域名和一个站点！