原文?使用 Flask 部署 Next.js

Flask 和 Next.js 是兩個(gè)獨(dú)特的開源 Web 框架，分別構(gòu)建在 Python 和 JavaScript 編程語言之上。

您可以在沒有 Next.js 的情況下構(gòu)建 Flask 應(yīng)用程序，也可以在沒有 Flask 的情況下構(gòu)建 Next.js 應(yīng)用程序。但是，您可能會(huì)發(fā)現(xiàn)自己使用 Flask 構(gòu)建了一個(gè)應(yīng)用程序，然后決定使用 Next.js 進(jìn)行服務(wù)器端渲染。

那么，此時(shí)你會(huì)怎么做？

您可以嘗試的一件事是逐步采用 Next.js 或 Flask。在本文中，我將向您展示如何使用 Next.js 增量采用設(shè)計(jì)使 Next.js 與 Flask API 無縫協(xié)作，以及如何在 Ubuntu 服務(wù)器上使用 Nginx 部署它。

要在本文中繼續(xù)前進(jìn)：

• 在 Next.js 和 Flask 中構(gòu)建應(yīng)用程序

• 使用重寫將 Flask API 集成到 Next.js

• 設(shè)置 Nginx

• 將 Flask API 和 Next.js API 作為服務(wù)運(yùn)行

• 使用 PM2 運(yùn)行 Next.js 應(yīng)用程序

在 Next.js 和 Flask 中構(gòu)建應(yīng)用程序

需求_

• 節(jié)點(diǎn).js v12

• Python

讓我們從構(gòu)建一個(gè)示例 Next.js 應(yīng)用程序開始。按照官方Next.js 文檔，運(yùn)行以下命令在您的計(jì)算機(jī)上安裝 Next.js ：. 按照說明設(shè)置基本應(yīng)用程序。npx create-next-app@latest

這個(gè)裝置會(huì)給我們一個(gè)“Hello, World!” 應(yīng)用程序，準(zhǔn)備部署。如果一切順利，您可以yarn run dev在終端上運(yùn)行并訪問您的瀏覽器以確認(rèn)它可以正常工作。您應(yīng)該看到如下內(nèi)容：localhost:3000

這就是現(xiàn)在的全部?jī)?nèi)容。接下來，讓我們構(gòu)建一個(gè)基本的 Flask API。我假設(shè)您已經(jīng)安裝了 Python，但如果您沒有安裝，您可以按照操作系統(tǒng)官方文檔中的說明進(jìn)行安裝。

首先，讓我們創(chuàng)建并激活一個(gè)虛擬環(huán)境來包含 Python 應(yīng)用程序。

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

接下來，通過在終端中運(yùn)行以下命令來安裝 Flask 。我們將使用 Flask-RESTful 創(chuàng)建一個(gè) RESTful API：

pip install Flask flask -寧靜

然后，創(chuàng)建一個(gè)名為的文件并將以下代碼添加到其中：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__'：應(yīng)用程序。運(yùn)行（調(diào)試=真） 

現(xiàn)在，我們已經(jīng)設(shè)置了 Flask 和 Next.js 應(yīng)用程序。讓我們繼續(xù)讓它們一起工作。

使用重寫將 Flask API 集成到 Next.js

Next.js 重寫允許您將傳入請(qǐng)求路徑映射到不同的目標(biāo)路徑。

進(jìn)入我們剛剛創(chuàng)建的 Next.js 應(yīng)用的目錄，打開文件，將內(nèi)容替換為以下代碼：next.config.js

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

通過這種集成，我們可以直接從 Next.js 訪問我們所有的 API 路由，就好像 API 與 Next.js 客戶端在同一個(gè)域和端口中一樣。這意味著我們只需要調(diào)用，就可以間接訪問端口的 API。http://localhost:3000/api/``5000

讓我們看一個(gè)例子。

打開文件并將其組件替換為“Hello, World!” 下面的組件：/pages/index.js

從'../styles/Home.module.css'導(dǎo)入樣式從' react'導(dǎo)入{ useEffect ，useState } ?
導(dǎo)出默認(rèn)功能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 > ) } 

上面的代碼是一個(gè)簡(jiǎn)單的 Next.js 組件，它使用 Fetch 與 Flask API 對(duì)話。分身有術(shù)App，微信無限多開神器，支持虛擬定位和機(jī)型模擬等！如您所見，我們不必將確切的 URL 放入 API 調(diào)用中。Next.js 根據(jù)我們最初設(shè)置的設(shè)置來理解它。

當(dāng)然，你也可以選擇直接調(diào)用 Flask API。

設(shè)置 Nginx

現(xiàn)在我們有了一個(gè)有效的集成，讓我們繼續(xù)在 Nginx 中進(jìn)行部署。在你的服務(wù)器酷我音樂車機(jī)版App，專為汽車開發(fā)的聽歌軟件，所有歌曲免登無限制暢聽和下載?。ㄔ谖覀兊睦又惺且粋€(gè) Ubuntu 服務(wù)器）上安裝 Nginx，為你的 Nginx 配置創(chuàng)建一個(gè)配置文件，我們將調(diào)用它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連接“升級(jí)”；proxy_set_header主機(jī)$host ; proxy_set_header升級(jí)$http_upgrade ; proxy_set_header X -真實(shí)- IP $remote_addr ; proxy_set_header X -轉(zhuǎn)發(fā)-對(duì)于$proxy_add_x_forwarded_for ；}位置/ { ?proxy_pass http://0.0.0.0:3000 ; proxy_http_version 1.1 ; proxy_set_header連接“升級(jí)”；proxy_set_header主機(jī)$host ; proxy_set_header升級(jí)$http_upgrade ; proxy_set_header X -真實(shí)- IP $remote_addr ; proxy_set_header X -轉(zhuǎn)發(fā)-對(duì)于$proxy_add_x_forwarded_for ；} } 

上面的 Nginx 配置將在根域上為您的 Next.js 應(yīng)用程序提供服務(wù)，并在.yourdomainname.com``yourdomainname.com/api/hello

超過 20 萬開發(fā)人員使用 LogRocket 來創(chuàng)造更好的數(shù)字體驗(yàn)了解更多 →

添加此配置后，通過運(yùn)行以下命令啟動(dòng) Nginx：

sudo systemctl 啟動(dòng) nginx 。服務(wù)

這就是設(shè)置 Nginx 來為我們的 Flask API 和 Next.js 服務(wù)器提供服務(wù)。將 Flask 和 Next.js 代碼推送到服務(wù)器，安裝依賴項(xiàng)，然后分別運(yùn)行它們。分享5個(gè)比較有趣獨(dú)特的網(wǎng)站，全是小眾寶藏級(jí)別，建議收藏起來備用！哦，等等，我們需要對(duì)它們進(jìn)行守護(hù)。

您可以使用Supervisor或Gunicorn來守護(hù) Flask 應(yīng)用程序，這兩種流行的 Python 應(yīng)用程序部署工具。

我們將在 Flask 中使用 Gunicorn，在 Next.js 中使用 PM2。

將 Flask API 和 Next.js API 作為服務(wù)運(yùn)行

讓我們從使用 Gunicorn 運(yùn)行 Flask API 開始。確保您的服務(wù)器上安裝了正常工作的 Python，然后創(chuàng)建一個(gè)虛擬環(huán)境來安裝 Gunicorn。

創(chuàng)建虛擬環(huán)境：

python3 - m venv 環(huán)境

然后，安裝 Gunicorn 和 Flask：

pip 安裝 gunicorn 燒瓶

設(shè)置 Gunicorn 以服務(wù)于 Flask 應(yīng)用程序

首先，在根目錄下創(chuàng)建一個(gè)文件。這將作為應(yīng)用程序的入口點(diǎn)。將以下代碼添加到文件中：wsgi.py

// wsgi . pyfrom hello import app如果__name__ == "__main__"：應(yīng)用程序。運(yùn)行（） 

接下來，為 Gunicorn 創(chuàng)建配置文件并將以下配置添加到其中：sudo vim /etc/systemd/system/hello.service

[單位]描述= Gunicorn實(shí)例服務(wù)于你好
之后=網(wǎng)絡(luò)。目標(biāo)[服務(wù)] User = ezeGroup = www - dataWorkingDirectory =/ path / to / your / app / directoryExecStart = / path / to / gunicorn / bin / gunicorn --workers 3 --bind unix ：你好。襪子-m 007 wsgi ：應(yīng)用程序[安裝] WantedBy =多用戶。_ 目標(biāo)

注意參考路徑。最后，通過在終端中運(yùn)行以下命令來啟動(dòng)并啟用 Gunicorn：

sudo systemctl start hello & sudo systemctl enable hello

要檢查操作是否成功，請(qǐng)運(yùn)行以下命令查看狀態(tài)：

須藤系統(tǒng)控制狀態(tài)

如果一切順利，我們的 Flask 應(yīng)用程序應(yīng)該在端口500和根域中啟動(dòng)并運(yùn)行，.yourdomainname.com

使用 PM2 運(yùn)行 Next.js 應(yīng)用程序

PM2是 Node.js 應(yīng)用程序的進(jìn)程管理工具。要使用它，請(qǐng)使用以下命令全局安裝 PM2：

pm2 安裝- g pm2

接下來，在包含 Next.js 代碼的目錄中運(yùn)行此命令：

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

您的 Next.js 應(yīng)用程序?qū)㈤_始在端口3000和根域中工作，.yourdomainname.com

恭喜！您已經(jīng)使用 Flask API 成功部署了 Next.js 前端。起初它可能看起來很復(fù)雜，但您不必在未來的部署中重復(fù)此過程，解析機(jī)器人App，支持國(guó)內(nèi)外短視頻平臺(tái)解析下載，支持下載音樂MV！因?yàn)檫@為您的應(yīng)用程序正常工作設(shè)置了基本環(huán)境。您可能只需要推送您的代碼并重新啟動(dòng)您的服務(wù)器，這可以通過您的CI/CD 管道進(jìn)行管理。

結(jié)論

新技術(shù)總是來來去去，現(xiàn)在可能是您選擇使用 Flask 部署 Next.js 以改進(jìn)應(yīng)用程序的一般工程的時(shí)候了。我希望你覺得這篇文章有幫助。

就個(gè)人而言，我有一個(gè)舊的 Flask API，但我想繼續(xù)使用 Next.js 進(jìn)行開發(fā)，同時(shí)保留一些 Python 后端實(shí)現(xiàn)。我發(fā)現(xiàn)它很容易切換而不會(huì)中斷或破壞我現(xiàn)有的 API。文章來源地址http://www.zghlxwxcb.cn/news/detail-651974.html

到了這里，關(guān)于使用 Flask 部署 Next.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！