使用 Flask 部署 Next.js

原文 使用 Flask 部署 Next.js

Flask 和 Next.js 是两个独特的开源 Web 框架，分别构建在 Python 和 JavaScript 编程语言之上。

您可以在没有 Next.js 的情况下构建 Flask 应用程序，也可以在没有 Flask 的情况下构建 Next.js 应用程序。但是，您可能会发现自己使用 Flask 构建了一个应用程序，然后决定使用 Next.js 进行服务器端渲染。

那么，此时你会怎么做？

您可以尝试的一件事是逐步采用 Next.js 或 Flask。在本文中，我将向您展示如何使用 Next.js 增量采用设计使 Next.js 与 Flask API 无缝协作，以及如何在 Ubuntu 服务器上使用 Nginx 部署它。

要在本文中继续前进：

• 在 Next.js 和 Flask 中构建应用程序

• 使用重写将 Flask API 集成到 Next.js

• 设置 Nginx

• 将 Flask API 和 Next.js API 作为服务运行

• 使用 PM2 运行 Next.js 应用程序

在 Next.js 和 Flask 中构建应用程序

需求_

• 节点.js v12

• Python

让我们从构建一个示例 Next.js 应用程序开始。按照官方Next.js 文档，运行以下命令在您的计算机上安装 Next.js ：. 按照说明设置基本应用程序。npx create-next-app@latest

这个装置会给我们一个“Hello, World!” 应用程序，准备部署。如果一切顺利，您可以yarn run dev在终端上运行并访问您的浏览器以确认它可以正常工作。您应该看到如下内容：localhost:3000

这就是现在的全部内容。接下来，让我们构建一个基本的 Flask API。我假设您已经安装了 Python，但如果您没有安装，您可以按照操作系统官方文档中的说明进行安装。

首先，让我们创建并激活一个虚拟环境来包含 Python 应用程序。

python3 -m venv env & source ./env/bin/activate _ _ _ _

接下来，通过在终端中运行以下命令来安装 Flask 。我们将使用 Flask-RESTful 创建一个 RESTful API：

pip install Flask flask -宁静

然后，创建一个名为的文件并将以下代码添加到其中：hello.py

from flask import Flask from flask_restful import reqparse , Api , Resource 
app = Flask ( __name__ ) 
api = Api ( app ) ​
解析器= reqparse 。RequestParser ()
解析器。add_argument （'task'）类消息（资源）：def get （self ）：return { “message”：'Hello World' } 
api 。add_resource (消息, '/api/hello' )​
如果__name__ == '__main__'：应用程序。运行（调试=真） 

现在，我们已经设置了 Flask 和 Next.js 应用程序。让我们继续让它们一起工作。

使用重写将 Flask API 集成到 Next.js

Next.js 重写允许您将传入请求路径映射到不同的目标路径。

进入我们刚刚创建的 Next.js 应用的目录，打开文件，将内容替换为以下代码：next.config.js

模块。export = () => { const rewrites = ( ) = > { return [ { source : " / hello / :path*" , destination : "http://localhost:5000/hello/:path*" , }, ] ; }; 返回{重写, }; };   

通过这种集成，我们可以直接从 Next.js 访问我们所有的 API 路由，就好像 API 与 Next.js 客户端在同一个域和端口中一样。这意味着我们只需要调用，就可以间接访问端口的 API。http://localhost:3000/api/``5000

让我们看一个例子。

打开文件并将其组件替换为“Hello, World!” 下面的组件：/pages/index.js

从'../styles/Home.module.css'导入样式从' react'导入{ useEffect ，useState } ​
导出默认功能Home (   ) { const [ message , setMessage ] = useState ( "" ); const [加载, setLoading ] = useState ( true ); ​useEffect ( () => { fetch ( '/hello/' ) . then ( res => res . json ()) . then ( data => { setMessage ( data . message ); setLoading ( false ); }) }, [])  ​return ( < div className = { styles.container } > < p > { ! loading ? message : " Loading .." } </ p > </ div > ) } 

上面的代码是一个简单的 Next.js 组件，它使用 Fetch 与 Flask API 对话。分身有术App，微信无限多开神器，支持虚拟定位和机型模拟等！如您所见，我们不必将确切的 URL 放入 API 调用中。Next.js 根据我们最初设置的设置来理解它。

当然，你也可以选择直接调用 Flask API。

设置 Nginx

现在我们有了一个有效的集成，让我们继续在 Nginx 中进行部署。在你的服务器酷我音乐车机版App，专为汽车开发的听歌软件，所有歌曲免登无限制畅听和下载！（在我们的例子中是一个 Ubuntu 服务器）上安装 Nginx，为你的 Nginx 配置创建一个配置文件，我们将调用它nextflask，并将以下代码添加到文件中：

/**
/etc/nginx/sites-available/nextflask
**/ 
server { server_name yourdomainname . com www 。你的域名。com ; 听80 ;
​location / hello / { proxy_pass http://127.0.0.1:5000/hello/ ; proxy_http_version 1.1 ; proxy_set_header连接“升级”；proxy_set_header主机$host ; proxy_set_header升级$http_upgrade ; proxy_set_header X -真实- IP $remote_addr ; proxy_set_header X -转发-对于$proxy_add_x_forwarded_for ；}位置/ {  proxy_pass http://0.0.0.0:3000 ; proxy_http_version 1.1 ; proxy_set_header连接“升级”；proxy_set_header主机$host ; proxy_set_header升级$http_upgrade ; proxy_set_header X -真实- IP $remote_addr ; proxy_set_header X -转发-对于$proxy_add_x_forwarded_for ；} } 

上面的 Nginx 配置将在根域上为您的 Next.js 应用程序提供服务，并在.yourdomainname.com``yourdomainname.com/api/hello

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

添加此配置后，通过运行以下命令启动 Nginx：

sudo systemctl 启动 nginx 。服务

这就是设置 Nginx 来为我们的 Flask API 和 Next.js 服务器提供服务。将 Flask 和 Next.js 代码推送到服务器，安装依赖项，然后分别运行它们。分享5个比较有趣独特的网站，全是小众宝藏级别，建议收藏起来备用！哦，等等，我们需要对它们进行守护。

您可以使用Supervisor或Gunicorn来守护 Flask 应用程序，这两种流行的 Python 应用程序部署工具。

我们将在 Flask 中使用 Gunicorn，在 Next.js 中使用 PM2。

将 Flask API 和 Next.js API 作为服务运行

让我们从使用 Gunicorn 运行 Flask API 开始。确保您的服务器上安装了正常工作的 Python，然后创建一个虚拟环境来安装 Gunicorn。

创建虚拟环境：

python3 - m venv 环境

然后，安装 Gunicorn 和 Flask：

pip 安装 gunicorn 烧瓶

设置 Gunicorn 以服务于 Flask 应用程序

首先，在根目录下创建一个文件。这将作为应用程序的入口点。将以下代码添加到文件中：wsgi.py

// wsgi . pyfrom hello import app如果__name__ == "__main__"：应用程序。运行（） 

接下来，为 Gunicorn 创建配置文件并将以下配置添加到其中：sudo vim /etc/systemd/system/hello.service

[单位]描述= Gunicorn实例服务于你好
之后=网络。目标[服务] User = ezeGroup = www - dataWorkingDirectory =/ path / to / your / app / directoryExecStart = / path / to / gunicorn / bin / gunicorn --workers 3 --bind unix ：你好。袜子-m 007 wsgi ：应用程序[安装] WantedBy =多用户。_ 目标

注意参考路径。最后，通过在终端中运行以下命令来启动并启用 Gunicorn：

sudo systemctl start hello & sudo systemctl enable hello

要检查操作是否成功，请运行以下命令查看状态：

须藤系统控制状态

如果一切顺利，我们的 Flask 应用程序应该在端口500和根域中启动并运行，.yourdomainname.com

使用 PM2 运行 Next.js 应用程序

PM2是 Node.js 应用程序的进程管理工具。要使用它，请使用以下命令全局安装 PM2：

pm2 安装- g pm2

接下来，在包含 Next.js 代码的目录中运行此命令：

pm2 start "npm run start" --命名 nextapp 

您的 Next.js 应用程序将开始在端口3000和根域中工作，.yourdomainname.com

恭喜！您已经使用 Flask API 成功部署了 Next.js 前端。起初它可能看起来很复杂，但您不必在未来的部署中重复此过程，解析机器人App，支持国内外短视频平台解析下载，支持下载音乐MV！因为这为您的应用程序正常工作设置了基本环境。您可能只需要推送您的代码并重新启动您的服务器，这可以通过您的CI/CD 管道进行管理。

结论

新技术总是来来去去，现在可能是您选择使用 Flask 部署 Next.js 以改进应用程序的一般工程的时候了。我希望你觉得这篇文章有帮助。

就个人而言，我有一个旧的 Flask API，但我想继续使用 Next.js 进行开发，同时保留一些 Python 后端实现。我发现它很容易切换而不会中断或破坏我现有的 API。