Python部落(python.freelycode.com)組織翻譯，禁止轉(zhuǎn)載，歡迎轉(zhuǎn)發(fā)。

2020年4月7日星期二，馬修·西格爾

類別：Django

如果您要用Django REST開發(fā)web應(yīng)用程序后端，并使用React或Vue開發(fā)應(yīng)用程序前端。有很多方法實(shí)現(xiàn)。你需要做出很多選擇：

您的前端是獨(dú)立的靜態(tài)站點(diǎn)還是Django視圖？

你把后端和前端放在不同的子域上嗎？

您是單獨(dú)部署后端和前端，還是一起部署？

你怎么選擇？哪一種是“正確的方式”？

壞消息是，沒有正確的方式來做這件事，而且有很多東西要權(quán)衡。好消息是，我整理了三種不同的選擇，各有利弊。

選項(xiàng)1-將所有內(nèi)容塞進(jìn)Django

這是“默認(rèn)”方法，您有一個(gè)Django站點(diǎn)，只需添加React即可。所有HTML都通過Django視圖提供，所有JavaScript和CSS都和Django綁定在一起以靜態(tài)文件的形式提供。所有代碼，前端和后端，都在一個(gè)Git存儲庫中。您可以在單個(gè)域(如www.myapp.com)部署應(yīng)用程序。

部署代碼時(shí)，需要：

使用webpack或類似的工具構(gòu)建JavaScript和CSS資源，并將它們放入Django靜態(tài)文件目錄

像往常一樣部署Django

您將需要使用類似django webpack loader的東西來集成webpack的構(gòu)建資源和django的靜態(tài)文件系統(tǒng)和模板。除此之外，這是一個(gè)普通的Django部署。

優(yōu)點(diǎn)是：

最簡單的基礎(chǔ)設(shè)施。除了設(shè)置django webpack loader和在部署過程開始時(shí)添加webpack構(gòu)建之外，您無需對生產(chǎn)結(jié)構(gòu)執(zhí)行任何其他操作。沒有額外的創(chuàng)建，費(fèi)用，配置，調(diào)試或焦慮。

同時(shí)更新。如果您需要做出影響前端和后端的更改，那么您可以在一次Git提交中完成所有更改，并使用單個(gè)部署將更改導(dǎo)入生產(chǎn)環(huán)境。

更緊密的整合。通過此設(shè)置，您可以使用Django的視圖通過模板將上下文數(shù)據(jù)從后端傳遞到前端。此外，還可以進(jìn)行服務(wù)器端渲染(使用NodeJS進(jìn)行額外的處理)。

缺點(diǎn)是：

前端和后端的單一部署。通常您只想在前端部署一個(gè)小的CSS或內(nèi)容更改，或者只部署后端更改。通過此設(shè)置，您必須始終同時(shí)部署后端和前端。這意味著您需要等待前端生成，即使您沒有進(jìn)行任何前端更改！更糟糕的是，如果您使用持續(xù)集成實(shí)踐，則其他代碼庫中的失敗測試或linter錯(cuò)誤可能會導(dǎo)致部署失敗。您不希望僅僅因?yàn)橛腥送浽贘avaScript中使用分號而導(dǎo)致數(shù)據(jù)庫遷移部署失敗。

混亂的技術(shù)堆棧。后端開發(fā)人員需要知道一點(diǎn)React，前端開發(fā)人員需要知道一點(diǎn)Django才能使這個(gè)系統(tǒng)工作。

精密的django網(wǎng)頁包加載程序。在Webpack和Django之間建立集成對我來說是一個(gè)痛苦的過程。我不記得為什么，我只記得痛苦。事實(shí)上，這個(gè)列表中的每一個(gè)選項(xiàng)都會導(dǎo)致你想在某個(gè)時(shí)刻把你的計(jì)算機(jī)扔出窗口，而這個(gè)也不例外。

適用于：

你想讓你的基礎(chǔ)設(shè)施保持簡單

你不在乎部署時(shí)間

通常將前端和后端一起部署

您需要在前端和后端之間進(jìn)行緊密集成(例如，數(shù)據(jù)傳遞、服務(wù)器端呈現(xiàn))

選項(xiàng)2-完全獨(dú)立的基礎(chǔ)設(shè)施

這種方法在過去幾年中變得越來越流行。在這個(gè)設(shè)置中，您有兩個(gè)獨(dú)立的代碼庫，一個(gè)用于前端，一個(gè)用于后端，每個(gè)都有自己的Git存儲庫。

前端部署為一個(gè)“靜態(tài)站點(diǎn)”，僅包含HTML CSS和JavaScript文件。它單獨(dú)托管給Django，部署在在AWS S3 bucket、Netlify或類似的東西中。前端是獨(dú)立于后端構(gòu)建、測試和部署的。前端通過REST API調(diào)用從后端獲取數(shù)據(jù)。

后端是一個(gè)Django REST API，沒有HTML視圖(除了管理頁面)，并且不承載靜態(tài)內(nèi)容(除了管理所需的內(nèi)容)。它是獨(dú)立于后端構(gòu)建、測試和部署的。

重要的是，由于前端和后端在不同的服務(wù)器上，它們也將有不同的域名。后端可能位于api.myapp.com上，前端可能位于www.myapp.com上。

優(yōu)點(diǎn)是：

獨(dú)立部署。部署前端時(shí)不需要等待后端，反之亦然。

關(guān)注點(diǎn)分離。后端開發(fā)人員只需要考慮API，而不需要考慮視圖或CSS。前端開發(fā)人員只需要考慮后端提供的API，而不需要考慮Django的內(nèi)部工作。您可以使用選項(xiàng)1來實(shí)現(xiàn)這一點(diǎn)，但此方法會更嚴(yán)格地執(zhí)行它。

如果后端壞了，前端仍然可以工作。您的用戶仍會遇到錯(cuò)誤，但網(wǎng)站不會徹底沒有響應(yīng)。

安全權(quán)限可以拆分。您可以允許部署前端與后端的人員分開，這通常意味著更多的人將有部署權(quán)限，從而使您的團(tuán)隊(duì)更具生產(chǎn)力。

缺點(diǎn)是：

更多的基礎(chǔ)設(shè)施。您將需要設(shè)置和維護(hù)靜態(tài)站點(diǎn)，外加一個(gè)額外的部署過程，這將需要更多的工作，更復(fù)雜。

跨域困境。您遇到了更多問題，因?yàn)榍岸伺c后端位于不同的子域上。您需要對Django進(jìn)行一些額外配置，以允許前端正確地與后端對話。顯然這是安全問題。如果不解決這個(gè)問題，您可能會遇到向后端發(fā)出API請求、接收cookies等問題。我不太明白。我不想太明白。我有比找出SESSION_COOKIE_DOMAIN，CORS_ORIGIN_REGEX_WHITELIST和friends的正確值更重要的事情要做。更糟糕的是，跨域問題不會出現(xiàn)在您的本地計(jì)算機(jī)上，因?yàn)橐磺卸际菑谋镜刂鳈C(jī)提供的，所以您需要在知道配置是否正確之前部署配置。

以下是一些跨域Django設(shè)置，希望您永遠(yuǎn)不需要考慮：

· SESSION_COOKIE_DOMAIN

· CSRF_COOKIE_DOMAIN

· CSRF_TRUSTED_ORIGINS

· CORS_ORIGIN_ALLOW_ALL

· CORS_ALLOW_CREDENTIALS

· CORS_ORIGIN_REGEX_WHITELIST

適用于：

您有獨(dú)立的前端和后端開發(fā)人員

要分別部署后端和前端

您希望完全分離后端和前端基礎(chǔ)結(jié)構(gòu)

您不介意再增加一點(diǎn)操作復(fù)雜性和配置

選項(xiàng)3-一臺服務(wù)器，單獨(dú)部署

這種方法試圖融合方案1和2。我們的想法是仍然將前端部署為一個(gè)單獨(dú)的靜態(tài)站點(diǎn)，但是您可以將所有內(nèi)容部署到一個(gè)服務(wù)器上，使用一個(gè)域名：

后端和前端分別有兩個(gè)獨(dú)立的代碼庫

兩個(gè)代碼庫都是獨(dú)立部署的，但是部署到同一個(gè)服務(wù)器上

兩個(gè)代碼庫都托管在一個(gè)域上，如www.myapp.com

您可以使用一個(gè)web服務(wù)器來管理它，比如NGINX，它處理所有傳入的請求。對URL path/api/get的請求被轉(zhuǎn)發(fā)到運(yùn)行Django應(yīng)用程序(傳統(tǒng)的反向代理設(shè)置)的WSGI服務(wù)器，而所有其他請求發(fā)送到前端，前端被設(shè)置為靜態(tài)站點(diǎn)并限定訪問的路徑(例如/var/www/)。

優(yōu)點(diǎn)是：

方案2的大部分好處。分離關(guān)注點(diǎn)和獨(dú)立部署仍然是可行的。

沒有“跨域困境”。因?yàn)樗械恼埱蠖际菑囊粋€(gè)域發(fā)出的，所以您不必在Django中處理那些可怕的跨域設(shè)置。

缺點(diǎn)是：

更多的基礎(chǔ)設(shè)施。這個(gè)設(shè)置仍然比“將所有內(nèi)容塞進(jìn)Django”選項(xiàng)更復(fù)雜。

需要完全控制主機(jī)Web服務(wù)器。您需要能夠安裝和配置NGINX，將文件部署到文件系統(tǒng)等來完成這項(xiàng)工作。如果您使用的是典型的云虛擬機(jī)，這很簡單，但如果您使用的是Heroku之類的東西，則可能會更加棘手(不確定)。

適用于：

你想把前端和后端分開，但你不需要完全分離基礎(chǔ)設(shè)施

您對主機(jī)Web服務(wù)器有足夠的控制權(quán)限

實(shí)際上，我從未嘗試過選項(xiàng)3(我以前使用過1+2)。我是在回復(fù)Reddit的帖子時(shí)想到的。不過，我想它會起作用的。祝你好運(yùn)！英文原文：https://mattsegal.dev/django-spa-infrastructure.html

譯者：阿布銩

總結(jié)

以上是生活随笔為你收集整理的react配合python_部署React前端和Django后端的3种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。