时间戳

首页 > 解决方案 > Next.js + API 在同一台服务器上

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

问题描述

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

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

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

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

标签： node.jsreactjsrestarchitecturenext.js

解决方案

当前端应用程序独立于后端运行时，这是非常常见的场景。反向代理通常会帮助我们。

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

  1. 为您的前端和后端应用程序使用不同的端口
  2. 所有 api 都应该以特定的 url 开头，/api并且您的前端路由不能以/api
  3. 使用网络服务器（我主要使用Nginx来帮助我处理虚拟主机、反向代理、负载平衡以及服务器静态内容）

因此，在您的 Nginx 配置文件中，添加/更新以下位置/路线

## 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;
}

推荐阅读