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

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

转载作者：行者123 更新时间：2023-12-04 07:44:22

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

我能够 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:

核心 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),
   ...
]

index.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>

settings.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 正确地提供生产静态 block css 和 js 文件？如果 Chrome 控制台能够在错误中找到文件，CDN 的路径和位置必须正确。

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

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

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

编辑:添加了赏金以提请注意此问题。我没有使用 Django webpack loader 和 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 错误的网关并且我的 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

最佳答案

为什么您的应用不在您的 CDN 上寻找您的静态文件

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

根据您的 TEMPLATES 设置，Django 正在从 npm run build(而不是 index.html 在问题中)。 index.html 中指向 CSS 和 JavaScript 文件(也由 React 构建)的 /static URL 由 React 而不是 Django 生成。

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

如果您在主机上提供静态文件或使用 {% static '' %}，您收到的错误将是一个问题。供引用:

为什么会出现 MIME 类型错误 (urls.py)

您的一个 URL 过于贪婪:

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

这将匹配:

static/css/main.ce8d6426.chunk.css

因此该 URL 将解析为您的 render_react View 并尝试为您的 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.

如果您想匹配除以 static 开头的所有 URI，您可以在正则表达式中使用否定先行:

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

关于javascript - 如何通过 Django 正确地服务于我的 React 生产构建。当前配置存在 MIME 类型问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67271401/

文章推荐： haskell - 从 Windows 10 中完全删除 Stack

文章推荐： ant - 如何在 ant 构建文件中指定 JAR 的路径？

文章推荐： php - 为什么 Apache RewriteRule 对 '&' 和 '?' 的处理方式相同

java - 如何使用method.inserAt();正确地
我在 Web 应用程序中尝试了一些字节码操作，到目前为止，效果很好。现在我需要在代码中的某些特定位置注入(inject)一些字节代码。我用 switch 语句和 method.inserAt(); 尝
javascript - 我怎样才能(正确地)求和并计算百分比？
我正在尝试对数组中的对象值求和，然后计算每个值相对于总数的百分比。这里是数组: [ { "ratiototale": [ [ { "0":
c# - 我如何对这个(正确地)抛出异常的异步方法进行单元测试？
我在接口(interface)中有以下方法.. Task> SearchAsync(TU searchOptions); 效果很好。现在我正在尝试进行单元测试以测试何时出现问题 - 代码会抛出异常。
jquery - 如何(正确地)在基础中包含 Reveal？
我似乎无法让 reveal 开始工作，我已经严格遵守所有内容，添加 modernizr，添加插件，添加 css(reveal 显然包含在 foundation 中)，在开始时初始化 foundatio
c - 如何从 golang 正确地 IOCTL
我正在尝试移植 raspberrypi's userspace 的位从 C 到 golang 的代码，我遇到了一个涉及 ioctl() 的程序。我在执行 C 代码时遇到了问题 #define MAJ
java - 我如何(正确地)在纯 Java 中以高帧率渲染
我一直在尝试用纯 Java 制作一个简单的游戏，但在绘图时遇到了问题。我正在尝试保持相对较高的帧速率，但是 JFrame.repaint() 不能被“强制”并且只是在下一个可用机会重绘帧的请求这一事实
python - 从字符串**正确地**创建一个 lambda 函数
给定一个字符串 "2*(i+j) = 20 我想返回 ((lambda x: x >= 20), ['i']) 我可以然后直接提供给 constraint。最佳答案您正在寻找 eval 的替代方法
javascript - 在 Javascript 中编程 OOP - 正确地
我对改进我的 javascript 代码以使其成为正确的 OOP 很感兴趣....目前我倾向于做这样的事情: jQuery(document).ready(function () { Page
javascript - 有没有办法让两个 jQuery 动画同时(正确地)运行？
我有一个调用两个动画 Action 的事件监听器。不幸的是，它们的开始有少量错开(例如，函数中的第一个首先开始)。有谁知道正确同步它们的方法吗？这是我的代码: $("#nav ul li a").
delphi - 如何*正确地*找出 Delphi XE2 上的目录是否存在？
我只需要检查目录是否存在!但是，如果目录是“E:\Test”，其中 E: 是 CD/DVD 驱动器，并且上面没有插入磁盘，我会看到以下 Delphi 和 Windows 问题。第一种方法: func
c# - 我如何(正确地)从 EWS 继承类，例如约会？
同样的问题: https://stackoverflow.com/questions/11294207/exchange-web-services-argumentexception-using-my
javascript - 如何 - 正确地 - 委托(delegate)类原型(prototype)
如果您跳转到 this question 中的第一个答案你会看到他使用 Employee.prototype = new Person(); 将 Person.prototype 继承到 Employ
java - 您如何从数组列表中提取项目并对它们进行计数，以便在 Java 中根据元素及其总计数(正确地)创建映射？
我需要知道如何正确地遍历元素的 ArrayList 并计算元素在列表中出现的次数，而无需事先知道该元素。我尝试了几种方法并且有一种目前有效，但我觉得它很丑陋且不合适。为了更深入地解释，我有一个 ja
python - 如何(正确地)在 AWS Lambda 函数中使用外部凭证？
我有一个用 Python 编写的(非常基本但工作完美的)AWS lambda 函数，但是它具有嵌入式凭证以连接到:1)外部网络服务2) DynamoDB 表。该函数的作用相当基本:它针对服务发布登录
twisted - 你如何*正确地*从 Tornado 查询 Redis？
我很好奇 Tornado 推荐的查询 Redis(或任何数据库)的方法是什么。我见过一些像 https://gist.github.com/357306 这样的例子但他们似乎都在使用对 redis
gradle - 如何使用 Bintray 用户存储库(正确地)作为 gradle 的依赖项？
这更像是一个“我做得对吗”的问题。快速背景故事:我已经构建了一个 gradle 插件(在一个独立的 gradle/groovy 项目中)。我在另一个 java 项目中使用它。客户项目通过以下方式引用
node.js - 为什么我不能用 sinon 正确地 stub twilio 库？
在我的代码中，我有: function handleMessage() { const twilio = require('twilio')(process.env.TWILIO_ACCOUNT_
linux - 如何使用 oob 正确地 nandwrite 一个 nanddump 的转储？
我正在努力在 Linux 中刷新嵌入式设备的先前 ROM 转储。我以前的转储包含 oob 数据。我是用nandwrite -n -N -o/dev/mtd0 backup.bin写的，然后再做一次RO
go - 如何使用 go 服务(正确地)一个 react-router？
我正在尝试使用 go 为 react-router 提供服务，我已经做到了，但我遇到了麻烦，我认为我做的方式不正确，或者不完整。我正在使用 Mux。我遇到的麻烦是当我按下时在我的应用程序中，它正确
javascript - 如何使用 bluebird 正确地 promise JSON.parse 方法
我正在尝试 promise JSON.parse 方法，但不幸的是没有任何运气。这是我的尝试: Promise.promisify(JSON.parse, JSON)(data).then((resu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城