最初のアプローチは、DjangoアプリとReactアプリを個別に構築することです。Djangoは、Django RESTフレームワークを使用して構築されたAPIの提供を担当し、Reactは、AxiosクライアントまたはブラウザーのフェッチAPIを使用してこれらのAPIを使用します。開発用と本番用の2つのサーバーが必要です。1つはDjango（REST API）用で、もう1つはReact（静的ファイルを提供するため）用です。
2番目のアプローチは、フロントエンドアプリとバックエンドアプリが結合される点で異なります。基本的に、Djangoを使用して、Reactフロントエンドを提供し、REST APIを公開します。したがって、ReactとWebpackをDjangoと統合する必要があります。これらは、そのために実行できる手順です
最初にDjangoプロジェクトを生成し、次にこのプロジェクトディレクトリ内でReact CLIを使用してReactアプリケーションを生成します
Djangoプロジェクトの場合、pipを使用してdjango-webpack-loaderをインストール します。
pip install django-webpack-loader
次に、インストールしたアプリにアプリをsettings.py追加し、次のオブジェクトを追加して構成します
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': '',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
次に、Reactアプリケーションのマウントに使用され、Djangoによって提供されるDjangoテンプレートを追加します
{ % load render_bundle from webpack_loader % }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Django + React </title>
</head>
<body>
<div id="root">
This is where React will be mounted
</div>
{ % render_bundle 'main' % }
</body>
</html>
次に、urls.pyこのテンプレートを提供するURLを追加します
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView
urlpatterns = [
url(r'^', TemplateView.as_view(template_name="main.html")),
]
この時点でDjangoサーバーとReactサーバーの両方を起動すると、Django webpack-stats.jsonが存在しないというエラーメッセージが表示されます。したがって、次に、Reactアプリケーションで統計ファイルを生成できるようにする必要があります。
Reactアプリ内を移動してインストールします webpack-bundle-tracker
npm install webpack-bundle-tracker --save
次に、Webpack構成をイジェクトし、次に移動してconfig/webpack.config.dev.js追加します
var BundleTracker = require('webpack-bundle-tracker');
//...
module.exports = {
plugins: [
new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
]
}
これにより、BundleTrackerプラグインがWebpackに追加さwebpack-stats.jsonれ、親フォルダーで生成するように指示されます。
config/webpack.config.prod.js本番環境でも同じようにしてください。
これで、Reactサーバーを再実行すると、Reactサーバーwebpack-stats.jsonが生成され、Djangoはそれを消費して、React開発サーバーによって生成されたWebpackバンドルに関する情報を見つけることができます。
他にもいくつかあります。詳細については、このチュートリアルをご覧ください。