由于具有多个 .'s 的 js 文件的 mimetype/unknown url 处理程序类型，GAE 文件被阻止

Question

在过去的两天里，我一直没能将我的 React/Django 应用程序部署到 GAE，我想我已经解决了这个问题，但我一直无法想出一个解决方案作品。当我第一次部署时，我运行遇到了我的每个 JS 和 CSS 文件中嵌入的 mimetypes 问题，这些文件被错误消息阻止，使我相信它找到了文件但没有正确处理它们：

(文件) 由于 MIME 类型 (“text/html”) 不匹配 (X-Content-Type-Options: nosniff) 而被阻止。

我通过浏览 SO 和进行研究了解到，GAE 将这些视为 html 文件并且没有正确执行它们。由于我在 GAE 参考资料中看到的一些设置，我开始使用 .yaml 来强制执行 MIME 类型，现在我无法部署并收到错误消息：

ERROR: (gcloud.app.deploy) An error occurred while parsing file: [(mysite)\app.yaml]
Unknown url handler type.
<URLMap
    static_files=None
    upload=None
    application_readable=None
    static_dir=None
    mime_type=text/css
    expiration=None
    require_matching_file=None
    http_headers=None
    position=None
    api_endpoint=None
    redirect_http_response_code=None
    url=/static/css\.css
    login=optional
    auth_fail_action=redirect
    secure=default
    script=None
    >
  in "(mysite)/app.yaml", line 8, column 1

我一直在浏览器中处理这些文件，我发现尽管知道文件在目录中，但当我尝试提取文件时出现 404 错误。 IE 在此处导航：https://acptconstruction.appspot.com/backend/static/js/2.738f0ca9.chunk.js 产生 404，但我可以在目录中看到它的确切文件名。由于这一点和部署时的错误消息，我认为 GAE 可能因为所有句点而无法解析文件名？文件名是在我完成前端应用程序后运行 npm 运行-scripts build 时构建的，但无论如何，我尝试部署将该文件复制到 homepage.js 并包括使用它带有路径的确切文件名没有成功。

我不知道我是否对第一个 yaml 文件走上了更好的轨道，它可以“找到”它们（我认为）而不是 grock 它们，或者第二个 yaml 找不到它们？这个问题可能就像复制所有 js 文件并将它们的名称更改为 homepage.js 和 homepage2.js 一样简单，但我很紧张，如果我沿着这条路走下去，我可能会破坏一切。感谢您的帮助！

文件：

最初，我的 app.yaml 文件如下所示：

runtime: python38

handlers:
- url: /static
  static_dir: static/
- url: /.*
  script: auto

更新的 YAML 给出了部署错误：

runtime: python38
 
handlers:
- url: /static/css/(.*)
  mime_type: text/css
 
- url: /static/js/(.*)
  mime_type: text/javascript

index.html:

<!doctype html><html lang="en" style="background-color:#f1f1f1"><head><base href="/"> <meta charset="utf-8"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="ACPT Construction"/><link rel="manifest" href="/manifest.json"/><title>ACPT Construction</title><link type="text/css" href="/backend/static/css/2.89e89512.chunk.css" rel="stylesheet"><link type="text/css" href="/backend/static/css/main.cfd2a7ed.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root" style="min-height:1000px"></div><script>!function(e){function t(t){for(var n,c,i=t[0],l=t[1],a=t[2],f=0,s=[];f<i.length;f++)c=i[f],Object.prototype.hasOwnProperty.call(o,c)&&o[c]&&s.push(o[c][0]),o[c]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var l=r[i];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=c(c.s=r[0]))}return e}var n={},o={1:0},u=[];function c(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=n,c.d=function(e,t,r){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)c.d(r,n,function(t){return e[t]}.bind(null,n));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/";var i=this.webpackJsonpacptconstruction=this.webpackJsonpacptconstruction||[],l=i.push.bind(i);i.push=t,i=i.slice();for(var a=0;a<i.length;a++)t(i[a]);var p=l;r()}([])</script><script type="application/javascript" src="/backend/static/js/2.738f0ca9.chunk.js"></script><script type="application/javascript" src="/backend/static/js/main.b160e3e4.chunk.js"></script></body></html>

文件结构：

acptconstruction
  backend
    settings.py
    manage.py (command to run server is python manage.py runserver)
    backend
        views.py (heres where index.html gets called)
    urls.py (url structure)
  acptconstruction (front end)
    build
        index.html
      manifest.json
  app.yaml
  static
    css
    js
    media

settings.py:

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 

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

ALLOWED_HOSTS = ['*']

# Application definition

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

MIDDLEWARE = [
    'whitenoise.middleware.WhiteNoiseMiddleware',
    '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 = 'backend.urls'

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


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

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/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


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

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'acptconstruction', 'build', 'static'),
]

if DEBUG: 
   STATIC_ROOT = os.path.join(BASE_DIR, 'backend','/static')
else:
   STATIC_ROOT = os.path.join(BASE_DIR, 'static') 

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 
EMAIL_HOST_USER = 
EMAIL_HOST_PASSWORD = 


CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
    'http://localhost:8000',
    'http://localhost:8080',
]

Answer 1

https://your_app.appspot.com/backend/static/js/2.738f0ca9.chunk.js 与您的 app.yaml 中的任何模式都不匹配。摆脱 url 的 /backend/ 部分，或者将处理程序添加到 app.yaml:

handlers:
- url: /static/css
  static_dir: static/css

- url: /backend/static/css
  static_dir: static/css

- url: /static/js
  static_dir: static/js

- url: /backend/static/js
  static_dir: static/js

而您看到的 mime_type 错误可能是由于您在 template.html 文件中的标记造成的。正确的标签是：

<link rel="stylesheet" href="styles.css">

或：

<link rel="stylesheet" type="text/css" href="styles.css">

您不想在这些标签中添加 text/html。

由于具有多个 .'s 的 js 文件的 mimetype/unknown url 处理程序类型，GAE 文件被阻止

GAE files blocked due to mimetype/unknown url handler type for js files with multiple .'s

django

google-app-engine

python-3.x

reactjs