使用 Flask 部署 Next.js

这篇具有很好参考价值的文章主要介绍了使用 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。文章来源地址https://www.toymoban.com/news/detail-651974.html

到了这里,关于使用 Flask 部署 Next.js的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python项目结构示例(python代码结构、python目录结构)与python部署结构、python部署目录、flask项目结构、flask目录

    myproject/ :项目的根目录,也是Python包的根目录。 myproject/__init__.py :一个空的 __init__.py 文件,用于将 myproject 目录标记为一个Python包。 myproject/module1.py 、 myproject/module2.py 等:项目的模块文件,包含项目的核心代码。 tests/ :测试目录,包含用于测试项目代码的测试文件。

    2024年02月12日
    浏览(57)
  • 使用宝塔面板部署flask环境

    之前部署采用编译式,费时又费力,这次咱们采用简便的方法,就是采用宝塔面板进行安装。首先什么是宝塔面板呢,就是linux可视化管理工具,所以需要安装一下,这里说一下centos系统的安装 一、输入如下命令 接下来等几分钟,等出现下面的画面就是安装完成了 其中user

    2024年02月02日
    浏览(55)
  • 使用Flask简单部署深度学习模型

    当客户端想要获取资源时,一般会通过浏览器发起HTTP请求。 此时,Web服务器会把来自客户端的所有请求都交给Flask程序实例。 程序实例使用Werkzeug来做路由分发(URL请求和视图函数之间的对应关系)。 根据每个URL请求,找到具体的视图函数并进行调用。在Flask程序中,路由的

    2023年04月25日
    浏览(36)
  • python Flask web项目uwsgi + nginx部署

    略 2.1安装vertualenv 2.2创建虚拟环境 创建保存环境的目录: 创建虚拟环境: 查看虚拟环境: 2.3激活虚拟环境 activiate是激活虚拟环境的命令脚本,在虚拟环境的bin目录下 执行activate激活环境 3.1安装uwsgi 激活虚拟环境,安装uwsgi 3.2基于uwsgi运行flask项目 3.2.1命令的方式 3.2.2配置文

    2024年02月10日
    浏览(48)
  • 使用 docker 快速部署 flask接口服务 一

    以前没有使用过docker,近期需要使用部署自己的服务,因此需要学习,先从简单的使用起来,后面专门整理一篇 如何部署 模型的方法。 理论知识就不说了,网上很多,咱直接上步骤 整理逻辑分为: 基于dockerfile创建镜像 使用 docker-compose 创建容器 后台启动 当然这些步骤完全

    2024年01月17日
    浏览(46)
  • 搭建部署属于自己的基于gpt3.5的大语言模型(基于flask+html+css+js+mysql实现)

    本项目是一个基于GPT-3.5模型的聊天机器人网站,旨在为用户提供一个简便、直接的方式来体验和利用GPT-3.5模型的强大功能。项目以Flask为基础,构建了一个完整的Web应用程序,其中包含了多个前端页面和后端API接口,能够处理用户输入并与GPT-3.5模型进行交互来生成响应。 一

    2024年02月07日
    浏览(61)
  • 【小沐学Python】Python实现Web服务器(Flask打包部署上线)

    🍺基于Python的Web服务器系列相关文章编写如下🍺: 🎈【Web开发】Python实现Web服务器(Flask快速入门)🎈 🎈【Web开发】Python实现Web服务器(Flask案例测试)🎈 🎈【Web开发】Python实现Web服务器(Flask部署上线)🎈 🎈【Web开发】Python实现Web服务器(Tornado入门)🎈 🎈【Web开

    2024年02月12日
    浏览(56)
  • fastdeploy部署多线程/进程paddle ocr(python flask框架 )

    部署参考:https://github.com/PaddlePaddle/FastDeploy/blob/develop/tutorials/multi_thread/python/pipeline/README_CN.md 安装 cpu: pip install fastdeploy-python gpu : pip install fastdeploy-gpu-python 命令: 多线程 多进程 文件:multi_thread_process_ocr.py 原始代码:270行 修改为如下,去掉1 因为安装包不对,fastdeploy与

    2024年02月11日
    浏览(39)
  • Jenkins参数化构建项目(Git+docker部署+Python+flask项目)

    使用 Jenkins 进行 CI/CD 自动化部署,参数化构建 Git 代码拉取, docker 镜像打包, docker 部署 flask 项目一体化流程。 准备工作:jenkins平台部署、项目部署服务器docker安装(这里也可以直接使用jenkins直接部署) 服务器 IP地址 备注 Jenkins 192.168.2.143 docker部署Jenkins 部署服务器 192.168

    2024年03月10日
    浏览(74)
  • 将Python项目(Flask)打包成Docker镜像,部署到微软云---Azure

    前情提要:首先创建一个简单的Flask项目,参考上一篇文章 链接: 将 Python (Flask) Web应用部署到Azure应用服务 下载链接:Install Docker Desktop on Windows 如果出现以上弹窗,点击链接,安装Linux 内核更新包 运行下载的更新包(系统将提示你提供提升的权限,选择“是”以批准此安装

    2024年02月09日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包