phpcms学校网站模板,wordpress 腾讯云oss,广州网站开发公司有哪些,零食网站源码原文 使用 Flask 部署 Next.js
Flask 和 Next.js 是两个独特的开源 Web 框架#xff0c;分别构建在 Python 和 JavaScript 编程语言之上。
您可以在没有 Next.js 的情况下构建 Flask 应用程序#xff0c;也可以在没有 Flask 的情况下构建 Next.js 应用程序。但是#xff0…原文 使用 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-applatest 这个装置会给我们一个“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.comyourdomainname.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。
