如何在同一个 Express 服务器上同时运行客户端和 API？

Question

我有一个使用React/Redux的应用程序，它使用API端点。目前我在一个服务器上呈现React/Redux客户端，而在另一个服务器上运行我的API - 两者都使用express。如何在同一台服务器上运行它们？我只需要为我的客户端提供静态目录，并像这样添加GET / POST等服务器功能：

//...

app.use(express.static('dist'));

app.get('/api/users', function(req, res) {
    //...
  })

app.post('/api/users', function(req, res) {
    //...
  })

const PORT = process.env.PORT || 3000;

app.listen(PORT, function() {
  console.log(`Listening on port ${PORT}...`);
});

非常感谢您的帮助。谢谢！（涉及IT技术，无法提供更多上下文）

- hidace

Answer 1

您提出的建议应该可行，这在Express文档中有详细说明。但是，如果您要提供静态文件，则建议将它们放在Nginx反向代理后面。 Nginx非常擅长提供静态文件服务。此外，如果您决定以后使用HTTPS，则只需为运行Nginx的机器获取证书，其余通信可以通过HTTP完成。

基本上，您需要安装Nginx并设置配置文件，大致如下：

upstream api_pool {
    server localhost:3000;
    # feel free to add as many other servers to this pool as you'd like
}

server {
    listen       80;
    server_name  localhost;

    root /www/static_stuff;

    location / {
    }

    location /api {
        proxy_pass http://api_pool;
        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_cache_bypass $http_upgrade;
    }
}

重新启动Nginx以使配置更改生效，将所有静态文件放在/www/static_stuff（或您决定的根目录）中，然后在端口3000上启动您的express服务器。

现在，假设您将一个名为style.css的文件放入/www/static_stuff。将web浏览器指向localhost/style.css将提供/www/static_stuff/style.css文件。将web浏览器指向localhost/api/some_express_route将与将web浏览器指向localhost:3000/some_express_route相同。

警告！我没有尝试过这个配置文件，但如果您决定采用Nginx路线并且它不起作用，请告诉我，我很乐意创建一个测试环境来帮助您运行。

- Brent Barbata