Nginx、React、Node 和让我们加密...如何将 Nginx 指向我的 React 应用程序 [英] Nginx, React, Node & Let's Encrypt... How to point Nginx at my React app

问题描述

我有一个 React 应用程序，我需要与运行在端口 5000(通过 pm2)上的 Node 服务器通信并成为 root我网站的目录.Node 服务器从 API 获取一些数据并将其返回给客户端.现在我让 Nginx 直接指向端口 5000(我按照教程进行了测试).

I have a React app that I need to talk to a Node server running on port 5000(via pm2) and be the root directory of my site. The Node server fetches some data from an API and returns it to the client. Right now I have Nginx pointing right at port 5000 (I followed a tutorial to get to this point as a test).

假设我的 React 应用程序位于/www/ReactApp/dist/，我如何将 Nginx 指向那个而不是端口 5000 上的 Node 服务器?

Say my React app is located at /www/ReactApp/dist/, how do I point Nginx at that instead of my Node server on port 5000?

基本上我只需要访问 myapp.com 时提供的/www/ReactApp/dist/的内容，但使用现有的 SSL 证书.

Node server.js 将在后台运行，我的 React 应用程序将调用它以获取数据.

The Node server.js will just run in the background and my React app will make calls to it to get data.

这是我的/etc/nginx/sites-enabled/default 的内容:

Here is the contents of my /etc/nginx/sites-enabled/default:

# HTTP — redirect all traffic to HTTPS
server {
    listen 80;
    listen [::]:80 default_server ipv6only=on;
    return 301 https://$host$request_uri;
}

# HTTPS — proxy all requests to the Node app
server {
    # Enable HTTP/2
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name myapp.com;

    # Use the Let’s Encrypt certificates
    ssl_certificate /etc/letsencrypt/live/myapp.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem;

    # Include the SSL configuration from cipherli.st
    include snippets/ssl-params.conf;

    location / {
        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_pass http://localhost:5000/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

推荐答案

据我所知，您基本上是在问如何从目录中提供静态文件.为了让 React 应用程序(客户端)调用 Node 后端(服务器端)，两者都需要公开.您应该像这样添加 NGINX 指令:

From what I understand, you're basically asking how to serve static files from a directory. In order for a React app (client-side) to call the Node backend (server-side), both need to be exposed. You should add a NGINX directive like so:

location / {
    # Set this to the directory containing your React app's index.html.
    root /var/www/;
    try_files $uri /index.html;
}

然后，对于 Node 服务器，您将保留现有的内容，但将其放在不同的路径上，如下所示:

Then, for the Node server you would keep what you have but put it at a different path, like so:

location /api {
    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_pass http://localhost:5000/;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

这将 /api 代理到您的 Node 服务器，同时将 /var/www 的静态内容作为根路由 (/) 提供服务.

This proxies /api to your Node server while serving the static contents of /var/www as the root route (/).

注意:您可能需要更改 React 配置以反映 /api 添加.

NOTE: You might need to change your React configuration to reflect the /api addition.

这篇关于Nginx、React、Node 和让我们加密...如何将 Nginx 指向我的 React 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！