Next.js + API 在同一台服务器上

Question

看看下面的场景，我想知道这在架构方面是否可以被认为是一种好的做法：

一个使用 NextJS 框架在服务器上呈现的 React 应用程序。由于应用程序的数据经常变化，它使用服务器端渲染（“SSR”或“动态渲染”）。在代码方面，它在 getServerSideProps() 函数上获取数据。这意味着它会在每次请求时由服务器执行。
在同一个服务器实例中，并行有一个API应用程序运行（它可以是NodeJS API、Python Flask应用程序，... ).此应用程序负责查询数据库、准备模型并对数据应用任何转换。 API 可以从外部访问。

我的问题是：NextJS 如何在内部与 API 应用通信？它是通过本地主机端口发送请求的正确方法吗？如果不是，是否有替代方案不暗示 NextJS 将外部 HTTP 请求发送回同一服务器本身？

其中一个关键要求是每个应用程序必须保持独立。它们目前运行在同一台服务器上，但它们来自不同的代码存储库，每个都有自己的 SDLC 和发布过程。他们有自己的域 (URL)，将来他们可能生活在不同的服务器实例上。

我知道在 NextJS 中，您可以使用 Prisma 等库来查询数据库。但这不是一个选择。数据建模由 API 管理，我想避免重复工作。此外，一旦 NextJS 在客户端呈现，React 将继续通过普通 HTTP 请求调用 API 应用程序。那是为了保持动态的前端体验。

Answer 1

当前端应用程序运行独立于后端时，这是非常常见的情况。 Reverse proxy经常帮助我们。

这里是我想建议你使用的简单方法来实现（也是最好的方法之一）

为您的前端和后端应用程序使用不同的端口
所有 api 都应以特定的 url 开头，例如 /api 和您的前端路线不得以 /api
使用网络服务器（我主要使用 Nginx 这有助于我在虚拟主机、反向代理、负载平衡的情况下还有服务器静态内容）

所以在你的 Nginx 配置文件中，add/update 跟随 location/route

## for backend or api and assuming backend is running on 3000 port on same server
location /api {
    proxy_pass http://localhost:3000;
    ## Following lines required if you are using WebSocket,
    ## I usually add even not using WebSocket
    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;
} 


## for frontend and assuming frontend is running on 5000 port on same server
location / {
    proxy_pass http://localhost:5000;
}

Next.js + API 在同一台服务器上

Next.js + API on same server

architecture

rest

node.js

reactjs

next.js