Nginx发布web和配置反向代理

Nginx发布web和配置反向代理

本文内容如下：
- 1.将通过nginx将前端打包的文件发布为web；
- 2.将本地后端的rest接口通过nginx映射到外网；
- 3.通过nginx解决跨域问题；
- 4.url映射解析；

---

上配置

>server {
        listen       80;
        server_name  localhost;#域名或IP
location / {
        #root   D:\dist;
        root \html\dist;
        index  index.html index.htm;
        }
        #“http://192.168.1.180或域名/rest/”
location /rest/ {
        proxy_pass http://localhost:9100/;
        proxy_set_header   Host    $host; 
        proxy_set_header   X-Real-IP   $remote_addr; 
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for; 
        }
  ｝

看解释

上述配置第一段实现发布web，可以将本地前端打包发布的静态文件发布为web，可以配置相对路径和绝对路径，但是有个注意点是如果打算将静态文件发布到nginx目录下，请发布到默认的目录\html下面，例如我的包是dist，否则会发布不成功。
上述配置第二段将本地的后端服务rest接口反向代理通过80端口映射出去，示例中是本地90端口，原来接口地址为“http://localhost:9100/”，发布出去后的接口地址为“http://192.168.1.180或域名/rest/”。

那么是如何解决的前后端分离后的跨域问题呢？
1.前端web和后端服务都通过nginx代理出去，所以域名IP地址是一样的，那么浏览器端下载静态JS的地址和JS访问后端REST的地址也就是一致的，也就不会存在跨域的问题了。

注意点

在反向代理过程中，语法要注意，很容易搞错url的/问题：
在nginx中配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走;如果没有/，则会把匹配的路径部分也给代理走。

下面四种情况分别用http://192.168.1.4/proxy/test.html 进行访问。
第一种：

location /proxy/ {
     proxy_pass http://127.0.0.1:81/;
}

会被代理到http://127.0.0.1:81/test.html 这个url

第二咱(相对于第一种，最后少一个 /)

location /proxy/ {
     proxy_pass http://127.0.0.1:81;
}

会被代理到http://127.0.0.1:81/proxy/test.html 这个url

第三种：

location /proxy/ {
     proxy_pass http://127.0.0.1:81/ftlynx/;
}

会被代理到http://127.0.0.1:81/ftlynx/test.html 这个url。

第四种情况(相对于第三种，最后少一个 / )：

location /proxy/ {
     proxy_pass http://127.0.0.1:81/ftlynx;
}

会被代理到http://127.0.0.1:81/ftlynxtest.html 这个url