部署单独的 React 前端和 Django DRF API
Posted
技术标签:
【中文标题】部署单独的 React 前端和 Django DRF API【英文标题】：Deploying Seprate React Frontend and Django DRF API 【发布时间】：2019-04-30 05:39:46 【问题描述】：我有一个用create-react-app 制作的反应前端来部署这个我只是在npm run build 做的生产版本。我的应用使用 Django Rest FrameWork API 后端。
如何设置应用程序以在单个服务器上部署。有没有办法我可以在 Django 中存储 React 前端并路由到它，并让来自前端的请求命中 api/ 视图或端点。
部署此类东西的最佳策略是什么，或者将前端和后端拼命地托管在不同的服务器上更好？
基本上：如何将我的 react 前端构建组合到 Django DRF 中进行部署？
【问题讨论】：
【参考方案1】：您可以使用 django 作为您的 react 应用程序的容器。 在您的反应项目根文件夹中运行“npm run build”。它将生成构建目录并捆绑所有 javascript 文件。 将此构建文件夹放在 django 项目的根目录中。并在 settings.py 文件中进行以下更改：
STATICFILES_DIRS = (
...
os.path.join(BASE_DIR, 'build/static'),
os.path.join(BASE_DIR, 'build')
...
)
并在 urls.py 中创建如下条目：-
url(r'^$', mView.login, TemplateView.as_view(template_name = 'index.html'))
使用“axios”或本机 fetch api 从 react 应用程序调用 api。
在此之后，每当您点击 django 项目的 url 时，它都会被重定向到 react 应用程序。您可以使用 apache wsgi 托管它。适合我。
以下链接可能会有所帮助： https://alphacoder.xyz/dead-simple-react-django-setup/
【讨论】：
【参考方案2】：我所做的是在提供静态内容（构建反应应用程序）之后，DRF API 中有入口点，它有一个模板，在 clientConfig 对象中设置服务器上下文（如果你想设置的话） .
此外，您需要为每个端点创建一个单独的“初始化程序”脚本，其中包含反应路由，为其提供您将在 Django 模板中提到的正确选择器。
网址：path('foobars', views.FooBarsView.as_view(), name='foobars')
查看：
class FooBarsView(TemplateView):
template_name = 'foobars.html'
def get_context_data(self):
return
"client_config":
模板 (foobars.html)：
% load static from staticfiles %
<head>
<link rel="stylesheet" href="% static 'dist/css/foobars.css' %"/>
</head>
<main class="foobars"></main>
<script type="text/javascript">
var clientConfig = client_config|safe ;
</script>
<script type="text/javascript" src="% static "dist/js/foobars.min.js" %"></script>
您必须对 React 应用程序进行一些更改，即在 render 方法中使用选择器 .foobars。
初始化器：
ReactDOM.render(
<Provider store=store>
<Router history=history>
<Switch>
<Route name="index" exact path="/" component=FooBarComponent />
</Switch>
</Router>
</Provider>,
document.querySelector(".foobars")
);
【讨论】：
看起来很棒！谢谢 - 你能给我一个文件系统的例子吗？ ``` /frontend/ foobars.html dist/ - 我所有的 JS 文件 ``` 在 Django 中 根据示例，您必须创建一个dist 目录，其中包含根据每个目录名称的文件的img、css 和js 目录。跨度>
现在，这个foobars 是一个新的应用程序，用于api 端点foobars，您将在templates 目录下放置模板。以上是关于部署单独的 React 前端和 Django DRF API的主要内容，如果未能解决你的问题，请参考以下文章
将单独的 Dyno 用于反应前端和 Django 后端时的 Cookie