部署单独的 React 前端和 Django DRF API答案

【问题标题】：Deploying Seprate React Frontend and Django DRF API部署单独的 React 前端和 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 中进行部署？

【问题讨论】：

标签： django reactjs create-react-app amazon-elastic-beanstalk

【解决方案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 目录下放置模板。