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

Posted

技术标签:

【中文标题】Next.js + API 在同一台服务器上【英文标题】:Next.js + API on same server 【发布时间】:2021-11-26 20:21:33 【问题描述】:

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

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

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

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

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

【问题讨论】:

【参考方案1】:

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

以下是我想建议您使用的简单方法来实现(这也是最好的方法之一)

    为您的前端和后端应用程序使用不同的端口 所有 api 都应该以特定的 URL 开头,例如 /api 和你的前端 路线不能以/api 开头 使用网络服务器(我主要使用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;

【讨论】:

以上是关于Next.js + API 在同一台服务器上的主要内容,如果未能解决你的问题,请参考以下文章

Next.js API |在生产服务器上获取数据 | URL 路径

Cors 问题 API 不在同一台服务器上

我应该在同一台服务器上托管网站和 REST API 还是拆分?

Next Js 服务端 Api 读写 JSON

如何配置 apache 在同一台机器上使用 FE 和 BE?

为啥在将 next.js 与环境变量一起使用时我的 API 密钥可见?