Файлы GAE заблокированы из-за mimetype / неизвестного типа обработчика URL для js файлов с несколькими. - PullRequest
Новая
       39

Файлы GAE заблокированы из-за mimetype / неизвестного типа обработчика URL для js файлов с несколькими.

0 голосов
/ 04 августа 2020

Я зацикливался на развертывании моего приложения React / Django в GAE в течение последних двух дней, и я думаю, что изолировал проблему, но мне не удалось найти решение, которое работает. Когда я впервые развернулся, у меня были проблемы с mimetypes с каждым из моих файлов JS и CSS, встроенных в мой индекс. html блокировался сообщениями об ошибках, подобными этим, что заставило меня поверить, что он нашел файлы, но не обрабатывать их правильно:

(файл) был заблокирован из-за несоответствия типа MIME («текст / html») (X-Content-Type-Options: nosniff).

Как я понял из просмотра SO Проведенное исследование показало, что GAE обрабатывает их как файлы html и не выполняет их должным образом. Я начал играть с .yaml, чтобы применить типы mime из-за некоторых настроек, которые я видел в справочниках для GAE, и теперь я не могу развернуть и получить сообщение об ошибке: 

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 сборку сценариев выполнения после того, как я закончил работу с внешним приложением, но, тем не менее, я попытался развернуть копирование этого файла на домашнюю страницу. js и в том числе использовать это точное имя файла с путем без успех.

Я не знаю, был ли я на лучшем пути с первым файлом yaml, где он мог бы "найти" их (я думаю), а не гробить их, или со вторым yaml, где они не могли ' не найти? Проблема может заключаться в простом копировании всех файлов js и изменении их имен на домашнюю страницу. js и домашнюю страницу2. js, но я нервничаю, что могу все сломать, если go пойду по этому пути. Любая помощь приветствуется!

Файлы:

Первоначально мой файл 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

индекс. 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',
]

1 Ответ

1 голос
/ 04 августа 2020

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, которую вы видели, вероятно, была связана с вашими тегами в шаблоне. html файл. Правильные теги: 

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

или: 

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

Вы не хотите помещать text/html в эти теги.

...