修改 nginx proxy_pass 设置后我的 React 应用程序无法加载

Question

我有 React app Node JS 后端和 nginx。我已经获得证书并通过 Certbot 安装它。

我的应用程序发出获取和发布请求，但为此我需要设置 proxy_pass 设置。

我的服务器块文件：

server {

        root /var/www/nikolsoborsocial/html;
        index index.html index.htm index.nginx-debian.html;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        location / {
                try_files $uri $uri/ =404;
                               
        }
        
        


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}

server {
    if ($host = www.nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        
        return 404; # managed by Certbot


}

我需要添加 proxy_pass 设置吗？

proxy_pass http://localhost:3000;
include proxy_params;

如果我将其放入 433 服务器位置，插入 try_files $uri $uri/ =404; 我的 React 应用程序无法加载，并且我在浏览器中收到 Cannot GET / 错误。

Answer 1

您设置 nginx 配置文件以在“location /”服务器块中提供 React 文件。

因此，如果您尝试在“location /”块中添加 proxy_pass 设置，它将覆盖提供反应文件的代码。 Nginx 会将请求代理到运行在 localhost:3000 上的后端服务器。

如何解决此问题？

您必须在后端服务器中为此请求提供文件，或添加新的位置块。

这是添加新位置块的示例

server {
    root /var/www/nikolsoborsocial/html;
    index index.html index.htm index.nginx-debian.html;

    server_name nikolsoborsocial nikolsoborsocial.org www.nikolsoborsocial.org;

    location / {
        try_files $uri $uri/ =404;
    }

    # Proxy Pass settings
    location /app {
        proxy_pass http://localhost:3000;
        include proxy_params;
    }

    # SSL configuration
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}