Django + React Build

2022年4月17日日曜日
React ProjectをDjangoにバインドするために、挿入後にこの問題を解決しました.

n/a.ターゲット

# [ React Path ]
/home/project/js/sagi-front/

# [ Django Path ]
/home/project/python/sagi-back/

REACT Pathで糸でできたインデックスを作りました今日の目標はhtmlと静的ファイルをDjangoファミリーに配布することです.
Debug=Falseのとき!!!!

質問する

Debug=Trueでは通常静的ファイルがロードされますが、Falseではhtmlファイル以外のすべてのファイルはロードされません.

解決策

レスポンスの設定

# [React Path]/package.json
{
    // ...
    "homepage": "assets/web/"
    // ...
    "scripts": {
        "build": "BUILD_PATH='[Django Path]/build' react-scripts build"
    }
}

# Bash
> yarn build
> npm run build

# 파일 이동
[Django Path]/build/index.html
=> [Django Path]/template/index.html

Django設定

# [Django Path]/mysite/settings.py

# Templates
TEMPLATES = [
    {
        # ...
        'DIRS': [
            os.path.join(BASE_DIR, 'template')
        ],
        # ...
    },
]

# Static files (CSS, JavaScript, Images)
STATIC_ROOT = BASE_DIR / 'staticfiles'
STATIC_URL = '/assets/'
STATICFILES_DIRS = [
    ( 'web', os.path.join( BASE_DIR, 'build' ) ),
]

# Bash
> python manage.py collectstatic

# [Django Path]/mysite/urls.py
from django.conf import settings
from django.conf.urls.static import static

from django.contrib import admin
from django.urls import path, re_path

from django.views.generic import TemplateView
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'^assets/(?P<path>.*)$', serve, { 'document_root': settings.STATIC_ROOT }),
    re_path(r'.*', TemplateView.as_view(template_name = 'index.html'), name="react-web"),
]

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

コンセプトアレンジ

STATIC_URL

# [Django Path]/mysite/settings.py
STATIC_URL = ‘/assets/’

Webページで使用する静的ファイルのトップレベルのURL.
文字列は「/」で終わる必要があります.
前述したように、Webページから静的ファイルをロードする場合/setabets/...に登録します.

STATICFILES_DIRS

# [Django Path]/mysite/settings.py
STATICFILES_DIRS = [
    ( 'web', os.path.join( BASE_DIR, 'build' ) ),
]

「開発」(DEBUG Mode)で使用する静的ファイルパス
複数のパスを指定してlistまたはtupleでマウントすればいいです.
プレフィックスを追加した場合(前例では「web」)、ファイルの読み込み時に/STATIC URL/web/...に登録します.

STATIC_ROOT

# [Django Path]/mysite/settings.py
STATIC_ROOT = BASE_DIR / 'staticfiles'

Djangoプロジェクトで使用されるすべての静的ファイルを1つの場所のパスに集約します.
開発段階では適用されず、実際のサービス環境で使用されます.

# Bash
> python manage.py collectstatic

このコマンドを入力すると、STATIC ROOTで指定したフォルダにstatic fileを入れます.

SERVE View

# [Django Path]/mysite/urls.py
from django.conf import settings
from django.urls import re_path
from django.views.static import serve

urlpatterns = [
    re_path(r'^assets/(?P<path>.*)$', serve, { 'document_root': settings.STATIC_ROOT }),
]

serve view関数
サーバ上のファイルを読み込む-open(fullpath,“rb”)
Streamingで答える-StreamingHttpResponse
欠点は、パフォーマンスがWebサーバの直接サービスに及ばないことです.

コメントサイト

https://gaussian37.github.io/python-django-non-debug-mode/
https://blog.hannal.com/2015/04/start_with_django_webframework_06/