nginx 配置域名前缀访问 react 项目

说明一下：我是使用域名转发访问的，访问流程如下：

浏览器 =》 服务器1 =》 服务器2

由于服务器1已经为 https 的访问方式做了 ssl 证书等相关配置，然后转发到服务器2， 所以在服务器2中不需要再配置 ssl 证书相关的东西了，就和配置 http 的方式一样就行。

我使用 https://abc.tyler.com/xxx 访问前端项目， 我的 nginx 配置如下：

user  root;
worker_processes  auto;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        off;
    tcp_nopush     on;
    server_tokens   off;
    keepalive_timeout  65;

    client_max_body_size 1000m;
    client_header_buffer_size 512k;
    large_client_header_buffers 4 512k;

    server {
        listen       80;
        server_name  abc.tyler.com;
        # server_name  10.188.17.26;

        gzip on;
    	gzip_min_length 1k;
    	gzip_buffers 4 16k;
    	gzip_comp_level 6;
    	gzip_vary on;
    	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location /xxx{
            add_header X-Frame-Options "SAMEORIGIN";
            add_header Cache-Control "no-cache";
            root    html/dist;
            index   index.html;
            try_files $uri $uri/ /index.html;
        }

        location /static/ {
            alias html/dist/static/;
        }

		# 后端接口以 /aaa/bbb/ 开头，代理到后端接口
        location /aaa/bbb/ {            
            proxy_pass http://10.188.17.26:8090;
        }
    }
}

注意这段配置：

location /static/ {
            alias html/dist/static/;
        }

一开始我没有配，然后在浏览器控制台查看到访问静态资源报 404，

后来才发现我在服务器1中配置了静态资源去掉了前缀 /xxx 访问，所以要在 nginx 配置中处理一下静态资源的访问。

不过这样配置是不够的，还需要看看代码中是否是相应的前缀才行。

首先这个 webpack 中的 publicPath 很关键，我这里直接配置的是 " / "

然后在 App.jsx 文件中的路由配置很重要：这里的 basename 一定要和nginx 配置中的 /xxx 匹配上，否则将加载页面失败。

最后就是代码中用到这个前缀的地方也需要确保是一样的，比如这里进行跳转，需要确保以 /xxx 开头

上面这些都正确的话，应该就能够通过域名前缀正确访问到前端项目了。