Nginx之前端代理Laravel

前置条件：

1，业务服务器 http://127.0.0.1:8000端口
2，前端服务器 http://127.0.0.1:8080端口

目标要求：

访问 http://127.0.0.1:8080/three，即访问 http://127.0.0.1:8000

配置

开始

location /three/ {
    proxy_pass http://127.0.0.1:8000/;
 }

• http://127.0.0.1:8000/ 最后的斜杠/的作用：

1. 带斜杠/ 访问http://127.0.0.1:8080/three/login，相当于访问 http://127.0.0.1:8000/login
2. 不带斜杠，http://127.0.0.1:8080/three/login，相当于访问 http://127.0.0.1:8000/three/login
3. 业务服务器没有 three 信息，所以我们的配置要带/

问题

这里边第一个问题如下图：

image.png

问题描述：我们访问的是8080端口，但这里css文件下载路径，确变成了8000端口，相当于暴露了我们想隐藏的服务器。

调整配置，增加 proxy_set_header Host $host:$server_port;

location /three/ {
    proxy_pass http://127.0.0.1:8000/;
    proxy_set_header Host $host:$server_port;
}

image.png
这回所有链接确实指现8080，但文件不能下载。
拿app.css举例，浏览器访问的是 http://127.0.0.1:8080/css/app.css，文件不存。 但我们知道正确的路径应该是 http://127.0.0.1:8080/three/css/app.css

这是一个因为绝对路径引起的问题，有点尴尬。Laravel默认的输出，是以http开头的绝对路径

image.png

要么我们改掉输出的代码，统一采用相对路径。（方案确实可行，但放到最后，在nginx实在没有办法的时候再用，这属于王炸）
要么在代理层面上把这些绝对路径改成正确喽。

更新配置

location /three/ {
    proxy_pass http://127.0.0.1:8000/;
    proxy_set_header Host $host:$server_port;
    sub_filter '//$host:$server_port' '//$host:$server_port/three';
    sub_filter_once  off;
}

使用一个 sub_filter，可以将原有的输出文本内容修改掉，替换为我们知道的正确的地址。 sub_filter可以配置多条，用以替换很多很多内容，也可以写的很细致。

貌似可以了

貌似可以了，那让我们输入用户名和密码测试一下喽，

又是很让人崩溃的

用户名密码正确，服务器将页面重定向到home页面，但是， 路径中又少一个可爱的three 继续配置nginx，让其可以调整重定向的地址

location /three/ {
    proxy_pass http://127.0.0.1:8000/;
    proxy_set_header Host $host:$server_port;
    sub_filter '//$host:$server_port' '//$host:$server_port/three';
    sub_filter_once  off;

    proxy_redirect http://$host:$server_port http://$host:$server_port/three;
}

终于OK了

总结

搞起来还是挺麻烦的，所有配置修改不要忘了重启nginx，nginx -s reload，然后就是耐心，细心。

最后的配置保留

location /three/ {
    proxy_pass http://127.0.0.1:8000/;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # 下边这三句是搭档。 
    # 第一句，让隐藏的服务器不暴露自己的真实端口。 
    # 第二名，nginx自动将绝对路径修改，增加代理的关键字，让路径可以找到
    # 第三句，让服务器返回302，跳转路径自去增加代理的关键字
    proxy_set_header Host $host:$server_port;
    sub_filter '//$host:$server_port' '//$host:$server_port/three';
    proxy_redirect http://$host:$server_port http://$host:$server_port/three;
    sub_filter_once  off;
}