Javascript 在同一台服务器上托管React前端和NodeJs后端

我制作了一个完整的应用程序，它的前端由React制作，server.js由

nodejs（Express）

编写，我使用

Postgres

作为我的数据库。我曾经这样做过一次，并将我的网站托管在Heroku上

不同之处在于，在Heroku上，我的前端和后端分别位于不同的URL上，因此在react应用程序中我可以这样做

fetch('http://localhost:3005/url',{
    method: 'get',
    headers: {'Content-Type': 'application/json'},
})
.then(response => response.json())

上面的代码是在我通过npm start在笔记本电脑上运行react和节点时编写的

我的server.js将是

app.get('/url', (req, res) => {
    db.insert({
       page_url: req.body.urlInfo,
       user_visit_id: req.body.visitID,
    })
    .into('pageurl')
    .then((id) => {
        res.json(id);
    }).catch(err => res.status(400).json('unable to write'))
})

在Heroku中，我只需将前端反应线更改为：

fetch('http://**Ther  URL where my server.js is**/url',{
    method: 'get',
    headers: {'Content-Type': 'application/json'},
})
.then(response => response.json())

这将运行得非常好。 现在的问题是，我必须将应用程序部署到学校服务器。服务器已经运行了nginx，我已经得到了这个项目的一个域

前端托管在nginx上，每当我访问我的域时，我都会看到前端showsup，但鉴于我必须将server.js与nginx托管的react应用程序放在同一台服务器上，如何将其连接到server.js端点。我对nginx完全陌生，对解决这个问题没有具体的想法。我使用pm2在服务器上运行node server.js

但这现在几乎没有什么用处，因为我的前端抓取执行localhost:3005/url，它查找访问域的设备的端口3005中的url点，而不是承载前端和节点server.js的实际服务器

我还尝试将server.js中的

localhost:3005/url

替换为使用服务器的ip，但该地址似乎只有在我使用学校的wifi连接时才可以访问

如果我通过数据连接更改并输入手机的ip地址，则无法访问该地址。因此，我假设

“ipaddress:3005/url”

也不是正确的方法。我在这一点上迷失了方向，任何建议都将是一个巨大的帮助！！！理想情况下，我希望在服务器上的nginx上运行主机前端，并让pm2运行server.js

我只需要一种连接前端和后端端点的方法。我需要

my server.js参与的URL

fetch（'http://我的server.js所在的其他URL/URL'{ 方法：“get”， 标题：{'Content-Type'：'application/json'}， }) .then（response=>response.json（））

我现在的nginx配置文件如下所示：

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

    root /var/www/example.com/html/build;
    index index.html index.php index.htm index.nginx-debian.html;
    server_name example.com www.example.com;

    location ~ \.php$ {
       include snippets/fastcgi-php.conf;
       # With php-fpm (or other unix sockets):
       fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
       # With php-cgi (or other tcp sockets):
       # fastcgi_pass 127.0.0.1:9000;
    }


    location / {
    try_files $uri /index.html;
    #try_files $uri $uri/ =404;
    }
}

目前，此nginx配置仅用于前端。此外，在上述代码中，real domain.com被example.com替换

---

谢谢

我要做的是在另一个端口上的nginx中设置一个虚拟主机，它将所有请求代理到您的nodejs应用程序，如：

server {
    listen 8080;
    server_name example.com;
    location / {
        proxy_pass http://127.0.0.1:3005;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
}

在本例中，做出了以下假设：

example.com是学校分配给您的项目的域

端口8080是您将在头版中打开并设置的端口：

fetch（'http://example.com:8080“，{}）

您的nodejs应用程序在端口3005上运行

---

另外，我只能通过ssh访问学校服务器。我在上面的帖子中添加了我当前的nginx配置文件。我的问题是，您包含的服务器块是否与我在下面发布的配置文件位于同一个配置文件中？那么，我将有一个包含两个服务器块的文件？我还将使用端口80，而不是端口8080，对吗？您将有2个服务器块。端口80上的一个仍然保留，因为这是您面向公众的应用程序，您也可以指向浏览器。第二种是API类型，公共页面在其中发出请求。有没有办法在前端和后端使用相同的端口80？如果是的话，它有什么缺点吗？没有缺点，你可以用它。唯一的区别是您必须将位置设置为“文件夹”，如so

fetch（'http://example.com/api/getSomething“，{}）

例如。您的

位置将有一点变化：
位置^/api/（.*）${proxy\u passhttp://127.0.0.1:3005/$1；}
location~^/api/（.*）$
将是\u my\u server.js\u所在的位置
~^/u文件夹/（.*）$
<代码>提取（'http://example.com/api/getSomething“，{}）

my fetch也将类似于api替换server.js的文件夹路径，getSomething是我在server.js中的端点？谢谢