原文 使用 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 以改进应用程序的一般工程的时候了。我希望你觉得这篇文章有帮助。文章来源:https://www.toymoban.com/news/detail-651974.html
就个人而言,我有一个旧的 Flask API,但我想继续使用 Next.js 进行开发,同时保留一些 Python 后端实现。我发现它很容易切换而不会中断或破坏我现有的 API。文章来源地址https://www.toymoban.com/news/detail-651974.html
到了这里,关于使用 Flask 部署 Next.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!