如何配置nginx代理服务器来服务react应用程序和node.js后端服务器？

Question

我在端口 3001 运行我的 Node.js 后端服务器，而我的 React.js 在端口 3000 运行我一直在尝试设置我的 nginx 服务器但无济于事，不断收到错误的网关或 cors 错误，请在下面提供帮助是我的 nginx 配置文件，请参考以下内容：

    listen 80;
    listen [::]:80;

    root /var/www/157.245.3.88/;

    # Add index.php to the list if you are using PHP
    index index.html;

    server_name 157.245.3.88:3000;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        # try_files $uri $uri/ =404;
        proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:3000;
                proxy_redirect http://127.0.0.1:3000 http://$server_name/;

    }   
}

server {
        listen 80;
        listen [::]:80;

        server_name 157.245.3.88:3001;

        location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:3001;
                proxy_redirect http://127.0.0.1:3001 http://$server_name/;

        }

        location /order-checkout {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header HOST $host;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:3001/order-checkout;
                proxy_redirect http://127.0.0.1:3001/order-checkout http://$server_name/;
        }

        location /api {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header HOST $host;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://127.0.0.1:3001/api;
                proxy_redirect http://127.0.0.1:3001/api http://$server_name/;
        }

}

Answer 1

root

指令采用静态文件所在的目录。我不认为

/var/www/157.245.3.88/

是目录。在

/var/www/<name>

中创建一个目录并将你的反应包放在那里。对于这个例子，我假设

/var/www/example_com/

并且我还将假设域名是

example.com

。

server_name

采用域名而不是IP地址。所以应该是

example.com

或/和

www.example.com

。

你不需要

proxy_redirect

。

proxy_pass

已经足够了。

worker_processes  auto;

events {
    worker_connections  1024;
}


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

    server_tokens off;
    sendfile        on;
    keepalive_timeout  65s;

    gzip  on;

    server {
        listen       80;
        listen      [::]:80;
        server_name    www.example.com example.com;

        location / {
          root /var/www/example_com/; # <- directory where react bundle is stored.
        }

        location ~ /api {
            proxy_pass http://127.0.0.1:3001; # don't put `/api`, nginx will append path for you.
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_cache_bypass $http_upgrade;
        }

        location ~ /order-checkout {
            proxy_pass http://127.0.0.1:3001; 
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_cache_bypass $http_upgrade;
        }
    }

}

一旦通过运行完成测试配置

nginx -t

然后重启nginx。

HeadsUp：对于您的问题，我尽可能保持配置简单，但您最终可能会添加更多配置。例如添加 ssl 证书规则、将

www.example.com

重定向到

example.com

（或反之亦然）、日志记录（访问/错误）等等。