Django+Reactアプリケーション開発の準備 ルーティング設定とReactのビルド自動化

はじめに
Djangoのプロジェクト内にReact appを作成するだけでは、それぞれ
Django => 8000 port
React => 3000 port
というポートで接続して確認することになります。
ReactのWelcomeページを8000番で表示
Bootstrapの適用
Reactのビルド自動化
までやりたいと思います。
(Djangoのサーバを起動したときに同時にビルドするようになります)
セットアップ
$ django-admin startproject project
$ cd project
$ create-react-app frontend
$ cd frontend
$ yarn run build
django project内にreact appを作成してビルドしました。
起動してみます。
$ ./manage.py runserver
このままの状態では、8000番ポートに出力されるのはdjangoプロジェクトのスタートページです。
まずこれをReactのWelcomeページにしたい。
ReactのWelcomeページを8000番で表示
設定ファイルを以下のように編集します。
project/settings.py
……
# DIRSを追記
TEMPLATES = [
{
‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
‘DIRS’: [
os.path.join(BASE_DIR, ‘frontend’, ‘build’),
],
‘APP_DIRS’: True,
‘OPTIONS’: {
‘context_processors’: [
‘django.template.context_processors.debug’,
‘django.template.context_processors.request’,
‘django.contrib.auth.context_processors.auth’,
‘django.contrib.messages.context_processors.messages’,
],
},
},
] ……
STATIC_URL = ‘/static/’
# STATICF

AINOW

人工知能専門メディアAINOW(エーアイナウ)です。人工知能を知り・学び・役立てることができる国内最大級の人工知能専門メディアです。2016年7月に創設されました。取材のご依頼もどうぞ。https://form.run/@ainow-interview

サイト名: Qiita

無料メールマガジン登録

週1回、注目のAIニュースやイベント情報を
編集部がピックアップしてお届けしています。

こちらの規約にご同意のうえチェックしてください。

規約に同意する