为什么 NGINX 不能用正确的 css 和 js 文件加载我的反应应用程序答案

【问题标题】：Why can NGINX not load my react app with the right css & js files为什么 NGINX 不能用正确的 css 和 js 文件加载我的反应应用程序
【发布时间】：2020-01-22 18:25:42
【问题描述】：

所以我面临的问题非常令人沮丧，因为我不清楚问题是什么。我会尽我所能描述它。

我有一个在 Azure 中运行的 Kubernetes 集群。我有两个组件正在运行，一个是 nginx 入口负载均衡器，另一个是也在 nginx 服务器上运行的反应应用程序。这两个服务都在自己的 pod 上运行。负载均衡器通过 HTTPS 将流量引导到我的反应应用程序。

在此实现之前，我将 React 应用程序直接暴露在互联网上。这很好用，没有任何问题，因为我正在使用负载均衡器，我的反应应用程序不再工作了。

这是我得到的错误： error1 error2

错误的意思是 js 和 css 文件是用 index.html 代码加载的，所以这就是我的 react 应用程序无法加载的原因。我试图弄清楚为什么会发生这种情况，但没有任何成功。我还检查了服务器上的文件，它们没有显示 index.html 文件的内容。他们正在显示我的 react 构建中出现的内容，这是正确的。

这是我的 nginx 配置文件：

server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

我的html文件夹的内容：

希望有人可以帮助我，在此先感谢，如果您需要更多信息，请告诉我。

【问题讨论】：

标签： reactjs nginx https

【解决方案1】：

所以问题在于我的 nginx 入口。这个注释弄乱了我的前端应用程序的路由：

nginx.ingress.kubernetes.io/rewrite-target

我的网站正在运行！

【讨论】：

非常感谢。从 kubernetes 配置文件中删除它是可行的。

【解决方案2】：

尝试将try_files 添加到您的位置块：

location / {
  root   /usr/share/nginx/html;
  index  index.html index.htm;
  try_files $uri /index.html =404;
}

它将首先在您的root 目录中查找文件。

如果找不到文件，它将提供您的 index.html 文件，这是您想要的单页应用程序。

否则，它将回退到 404。

我希望这会有所帮助。

【讨论】：

【解决方案3】：

映射静态文件所需的静态块

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name my_server_name;

    proxy_read_timeout 300;
    proxy_connect_timeout 300;
    proxy_send_timeout 300;

    location / {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_bind 127.0.0.1;
        proxy_pass http://localhost:3000/;
        proxy_ssl_session_reuse off;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }


    location /static/ {
       root /home/myusername/my-react-app-dir/build/;
    }
}

【讨论】：