logo标签列表

部署独立的React前端和Django DRF API

djangoreactjscreate-react-appamazon-elastic-beanstalk
8
我有一个使用create-react-app制作的React前端，要部署到生产环境中只需要运行npm run build命令即可。我的应用程序使用Django Rest FrameWork API后端。
如何在单个服务器上设置应用程序以进行部署？我能不能将React前端存储并在Django中进行路由，并使来自前端的请求命中api视图或端点？
针对此类部署，最佳策略是什么？还是更好地在不同的服务器上分别托管前端和后端？
总之：如何将我的React前端构建与Django DRF合并以进行部署？
2个回答
5

您可以将Django用作React应用程序的容器。 在React项目的根目录中运行“npm run build”。它将生成build目录并捆绑所有JavaScript文件。 将此build文件夹放入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/

0
我所做的是在提供静态内容（构建的React应用程序）之后，DRF API中有入口点，其中包含一个模板，在clientConfig对象中设置服务器上下文（如果您想要设置任何内容）。
此外，您需要为每个具有反应路由的端点创建单独的“初始化器”脚本，并为其提供正确的选择器，您将在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")
);
看起来很不错！谢谢 - 您能给我一个文件系统的示例吗？ /frontend/ foobars.html dist/ - 我所有的JS文件Django内部 - Alexa
根据示例，您需要创建一个名为“dist”的目录，在其中放置包含每个目录名称的文件的“img”、“css”和“js”目录。 - Sachin
现在，这个 foobars 是一个新的应用程序，用于 foobars API 端点，在其中您将把模板放置在 templates 目录下。 - Sachin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接