Nginx、React、Node 和让我们加密……如何将 Nginx 指向我的 React 应用程序

IT技术 javascript node.js reactjs ssl nginx
2021-05-24 14:36:27

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

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

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

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

这是我的 /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;
    }
}
1个回答

据我了解，您基本上是在问如何从目录中提供静态文件。为了让 React 应用程序（客户端）调用 Node 后端（服务器端），两者都需要公开。你应该像这样添加一个 NGINX 指令：

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

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

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作为根路由 ( /)的静态内容。

注意：您可能需要更改 React 配置以反映/api添加内容。

其它你可能感兴趣的问题
上一篇3D扫描仪数据采集 下一篇类型错误：无法解构“项目”的属性“名称”，因为它未定义