Django/React 部署仅在我设置 DEBUG=True & STATICFILES_DIRS 而不是列表时才有效答案

【问题标题】：Django/React Deployment only works if I set DEBUG=True & STATICFILES_DIRS not a listDjango/React 部署仅在我设置 DEBUG=True & STATICFILES_DIRS 而不是列表时才有效
【发布时间】：2021-01-03 06:33:48
【问题描述】：

尝试将我的带有 django 后端的 react 前端部署到 pythonanywhere (PA)，但通过以下 3 个设置获得以下结果：

DEBUG=True, STATICFILES_DIRS=[os.path.join(BASE_DIR, 'build/static')] - （空白屏幕）

PA 服务器日志：

  File "/home/coot3/.virtualenvs/venv/lib/python3.8/posixpath.py", line 76, in join
    a = os.fspath(a)
TypeError: expected str, bytes or os.PathLike object, not list

Chrome 控制台：

Refused to execute script from 'http://mysite.pythonanywhere.com/static/js/main.446b4eaa.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

DEBUG=True, STATICFILES_DIRS=os.path.join(BASE_DIR, 'build/static') - （网站按预期工作）
DEBUG=False, STATICFILES_DIRS=os.path.join(BASE_DIR, 'build/static') - （空白屏幕）

PA 服务器日志中没有问题

Chrome 控制台：

Refused to execute script from 'http://mysite.pythonanywhere.com/static/js/main.446b4eaa.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我的 django 根文件夹中有 react app build 文件夹，并链接到 reacts index.html 作为 urls.py 中的模板视图。这是我的settings.py：

from pathlib import Path
import os
import environ

env = environ.Env(
    DEBUG=(bool, False)
)

environ.Env.read_env()

DEBUG = False

SECRET_KEY = env('SECRET_KEY')

BASE_DIR = Path(__file__).resolve(strict=True).parent.parent

HOSTS = ['coot3.pythonanywhere.com']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'store',
    'corsheaders',
    'rest_framework',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

STATIC_URL = '/static/'

STATICFILES_DIRS = os.path.join(BASE_DIR, 'build/static')

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CORS_ORIGIN_ALLOW_ALL = True

EMAIL_USE_TLS = True

EMAIL_HOST = 'smtp.gmail.com'

EMAIL_PORT = 587

EMAIL_HOST_USER = env('EMAIL_HOST_USER')

EMAIL_HOST_PASSWORD = env('EMAIL_HOST_PASSWORD')

【问题讨论】：

标签： reactjs django deployment pythonanywhere

【解决方案1】：

当 Django 不处于调试模式时，它不提供静态文件。因此，您必须配置 Web 应用程序的静态文件映射以提供静态文件。 PythonAnywhere 帮助页面上有大量关于静态文件的帮助。

【讨论】：

【解决方案2】：

也许我的回答迟了，但至少它会帮助其他人。对我来说，无论是部署在 heroku 还是 cPanel 上，我总是使用白噪声。

pip 安装白噪声
在 settings.py 中添加这些 MIDDLEWARE = ['whitenoise.middleware.WhiteNoiseMiddleware', ]

您可以通过link查看更多文档

确保在每次为 react 构建后，运行 python manage.py collectstatic :)

【讨论】：