部署 Seprate React 前端和 Django DRF API

Question

我有一个用 create-react-app 制作的 React 前端来部署我刚刚做的生产构建 npm run build。我的应用程序使用 Django Rest FrameWork API 后端。

如何设置应用程序以在单个服务器上部署。有没有一种方法可以存储 React 前端并在 Django 中路由到它，并让来自前端的请求命中 api/ 视图或端点。

部署这样的东西的最佳策略是什么，还是将前端和后端拼命地托管在不同的服务器上更好？

基本上：如何将我的 React 前端构建结合到 Django DRF 中进行部署？

Answer 1

我所做的是在提供静态内容（构建的 React 应用程序）之后，在 DRF API 中有入口点，它有一个模板，设置服务器上下文（如果你想设置任何）在 clientConfig 对象中。

此外，您需要为每个端点创建一个单独的 "initializer" 脚本，其中包含反应路由，为其提供您将在 Django 模板中提及的正确选择器。

URL: 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")
);

Answer 2

您可以使用 django 作为您的 React 应用程序的容器。运行 "npm 运行 build" 在你的 React 项目根文件夹中。它将生成构建目录并捆绑所有 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' 或本机提取 api 从 React 应用进行 api 调用。

在此之后，每当您为 django 项目点击 url 时，它都会被重定向到 React 应用程序。您可以使用 apache wsgi 托管它。适合我。

关注 link 可能会有所帮助： https://alphacoder.xyz/dead-simple-react-django-setup/

部署 Seprate React 前端和 Django DRF API

Deploying Seprate React Frontend and Django DRF API

django

reactjs

amazon-elastic-beanstalk

create-react-app