Question

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

说我的React应用程序位于/ www / ReactApp / dist /，如何在端口5000上指向Nginx而不是我的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;
    }
}

Answer 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代理/var/www，同时以/的静态内容作为根路由（/api）。

注意：您可能需要更改React配置以反映!-- Enter your HTML code here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Buttons"> </div> <script> var index = 21; var Buttons = $('#Buttons'); for (var i = 1; i <index; i++) { Buttons.append('<input ty<pe="button" onclick="myFunction()" id="button" ' + i + '" value="Button' + i + '"/>'); } function myFunction() { for (var i = 0; i <index; i++) { document.getElementById("button").value; } } </script>添加。

Nginx，React，Node＆amp;让我们加密...如何在我的React应用程序中指向Nginx

1 个答案: