时间戳

首页 > 解决方案 > 如何通过 Django 正确地为我的 React 生产构建提供服务。当前配置存在 MIME 类型问题

javascript - 如何通过 Django 正确地为我的 React 生产构建提供服务。当前配置存在 MIME 类型问题

问题描述

我正在尝试将我的 react/django web-app 部署到 linux-VM droplet。我没有为 JS 内容使用 webpack。相反，我npm run build通过 CDN 子域、数字海洋 s3 存储桶提供静态文件。

然后我可以python manage.py collectstatic将我的 react 生产构建文件夹推送到 CDN。

当我访问我的生产网站时，它目前只加载一个包含以下控制台错误的空白页面：

Refused to apply style from 'https://www.my_website_URL.com/static/css/main.ce8d6426.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to execute script from 'https://www.my_website_URL.com/static/js/2.ca12ac54.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'https://www.my_website_URL.com/static/js/main.220624ac.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

没有任何网络错误可以为此事提供任何有用的信息。

问题必须是服务器端（django）......我想。

项目设立：

在此处输入图像描述

react 生产版本位于我的核心 django 文件夹中。

这是我通过 django 链接我的 React 的方式：

core urls.py

def render_react(request):
    return render(request, "index.html") 
    #index.html being created by react, not django templates 
    
urlpatterns = [
   re_path(r"^$", render_react),
   re_path(r"^(?:.*)/?$", render_react),
   ...
]

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    {% comment %} <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> {% endcomment %}
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
    />
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

设置.py

import os


from pathlib import Path
from decouple import config
import dj_database_url

from datetime import timedelta

# Build paths inside the project like this: BASE_DIR / 'subdir'.
# BASE_DIR = Path(__file__).resolve().parent.parent
BASE_DIR = os.path.dirname(os.path.abspath(__file__))

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('DJANGO_SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['URL's']

SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_HTTPONLY = True


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


    # Third Party Apps #
    'django_filters',
    'corsheaders',
    'django_extensions',
    'drf_yasg',
    'storages',


    # Apps
    'users',
    'bucket',
    'bucket_api',
    
    #oauth
    'oauth2_provider',
    'social_django',
    'drf_social_oauth2',
]

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

ROOT_URLCONF = 'core.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',
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',
            ],
        },
    },
]

WSGI_APPLICATION = 'core.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': config('DJANGO_DB_NAME'),
        'USER' : config('DJANGO_DB_ADMIN'),
        'PASSWORD' : config('DJANGO_ADMIN_PASS'),
        'HOST' : config('DJANGO_DB_HOST'),
        'PORT' : config('DJANGO_DB_PORT'),
        'OPTIONS': {'sslmode':'disable'},
    }
}


db_from_env = dj_database_url.config(conn_max_age=600)
DATABASES['default'].update(db_from_env)


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',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'America/New_York'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

AWS_ACCESS_KEY_ID = config('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = config('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = config('AWS_STORAGE_BUCKET_NAME')
AWS_S3_ENDPOINT_URL = config('AWS_S3_ENDPOINT_URL')
AWS_S3_CUSTOM_DOMAIN = config('AWS_S3_CUSTOM_DOMAIN')
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}
AWS_LOCATION = config('AWS_LOCATION')
AWS_DEFAULT_ACL = 'public-read'


STATIC_URL = '{}/{}/'.format(AWS_S3_ENDPOINT_URL, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'


STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/templates'),
    os.path.join(BASE_DIR, 'build/static')
]

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

如何修复我的 Django 以从我的 CDN 正确提供生产静态块 css 和 js 文件？如果 chrome 控制台能够找到错误中的文件，CDN 的路径和位置必须正确。

如果您需要我方面的更多信息，请告诉我。目前卡住并且没有简单的解决方案来修复我的 MIME 类型错误并解决我的网站仅加载空白页面。

感谢您提供任何帮助/提示/或指导！

如果有人想知道，我正在使用 Gunicorn 和 Nginx。

编辑：添加了一个赏金来引起对这个问题的注意。我没有使用 Django webpack 加载器和 babel。我宁愿不依赖其他容易破坏事物的库。

编辑#2：我已经添加了我的 NGINX 配置文件，我应该在这里将流量重定向到我的 CDN 路径吗？

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    return 301 https://my_website_URL.io$request_uri;
}
server {
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    server_name my_website_URL.com www.my_website_URL.com;

   #  Let's Encrypt parameters
    ssl_certificate /etc/letsencrypt/live/my_website_URL.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my_website_URL.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location = /favicon.ico { access_log off; log_not_found off; }




    location / {
        proxy_pass         http://unix:/run/gunicorn.sock;
        proxy_redirect     off;

        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto https;
        }

编辑 编辑 编辑：我添加了我的 gunicorn 文件，因为我得到一个 502 bad gateway 并且我的 gunicorn 服务给了我这个错误：

● gunicorn.socket - gunicorn socket
     Loaded: loaded (/etc/systemd/system/gunicorn.socket; enabled; vendor preset: enabled)
     Active: failed (Result: service-start-limit-hit) since Wed 2021-04-28 23:44:16 UTC; 1min 2s ago
   Triggers: ● gunicorn.service
     Listen: /run/gunicorn.sock (Stream)

这是我的 gunicorn 配置：

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=alpha
Group=www-data
WorkingDirectory=/home/user/srv/project/backend
ExecStart=/home/user/srv/project/backend/venv/bin/gunicorn \
          --access-logfile - \
          --workers 3 \
          --timeout 300 \
          --bind unix:/run/gunicorn.sock \
          core.wsgi:application

[Install]
WantedBy=multi-user.target

标签： javascriptpythonreactjsdjangodigital-ocean

解决方案

为什么您的应用不在 CDN 中查找静态文件

静态文件 URL 是由 React 而不是 Django 生成的。因此，即使STATIC_URL设置正确，静态文件的 URL 也不会在 Django 中进行模板化，例如使用{% static '' %}.

根据您的设置，Django 正在提供fromTEMPLATES的构建版本（而不是问题中的）。您的 CSS 和 JavaScript 文件（也由 React 构建）的URL是由 React 而不是 Django 生成的。index.htmlnpm run buildindex.html/staticindex.html

要让 React 生成具有正确前缀的 URL，您可以PUBLIC_URL在运行之前设置环境变量npm run build。目前它将使用默认设置（即/主机的根目录）。

如果您在主机上提供静态文件或使用{% static '' %}. 以供参考：

为什么您会收到 MIME 类型错误 (urls.py)

您的网址之一太贪心：

re_path(r"^(?:.*)/?$", render_react),

这将匹配：

static/css/main.ce8d6426.chunk.css

因此，该 URL 将解析为您的render_react视图并尝试提供您的index.html文件，因此它认为 MIME 类型为text/html：

Refused to apply style from 'https://www.my_website_URL.com/static/css/main.ce8d6426.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

如果您想匹配除以您开头的 URI 之外的所有 URI，static则可以在正则表达式中使用负前瞻：

re_path(r"^(?!static)(?:.*)/?$", render_react),

为什么 Django 找不到你的静态文件 (settings.py)

在您的 settings.py 中，您正在覆盖STATIC_URL将 Django 定向到您的 CDN 以获取静态文件的设置：

STATIC_URL = '{}/{}/'.format(AWS_S3_ENDPOINT_URL, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'


STATIC_URL = '/static/'   # <------- REMOVE

此外STATIC_URL需要在前面加上https://和使用AWS_S3_CUSTOM_DOMAIN（不是AWS_S3_ENDPOINT_URL）：

STATIC_URL = f'https://{AWS_S3_ENDPOINT_URL}/{AWS_LOCATION}/'

为什么您收到 502 Bad Gateway 错误

你的 NGINX 和 Gunicorn 配置很好。您的 Django 应用程序可能无法正确启动，例如，由于配置错误：

检查日志：

journalctl -u gunicorn.service

运行一个简单的冒烟测试也很有用（它会打开吗？）：

./manage.py runserver

推荐阅读