Развертывание производственной сборки приложения React в Google App Engine: сбой регистрации сервисного работника - PullRequest
Новая
       5

Развертывание производственной сборки приложения React в Google App Engine: сбой регистрации сервисного работника

0 голосов
/ 02 марта 2019

После создания рабочей сборки приложения React и следуя инструкциям по его развертыванию в Google App Engine у ​​меня возникли проблемы с регистрацией работника сервиса во всех браузерах.

Я пробовал разные конфигурациив app.yaml с последним из них: 

# [START runtime]
runtime: nodejs8
# [END runtime]

# [START handlers]
handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html

  - url: /
    static_dir: build

  - url: /service-worker.js
    static_files: build/service-worker.js
    upload: build/service-worker.js
    secure: always
# [END handlers]

Ошибка регистрируется в Firefox как 

Error during service worker registration: DOMException: "The operation is insecure." serviceWorker.js:97:6

Failed to register/update a ServiceWorker for scope ‘https://xxx.appspot.com/’: Bad Content-Type of ‘text/plain’ received for script ‘https://xxx.appspot.com/service-worker.js’.  Must be a JavaScript MIME type.

.. и Chrome 

The script has an unsupported MIME type ('text/plain').
Failed to load resource: net::ERR_INSECURE_RESPONSE
serviceWorker.js:97 Error during service worker registration: DOMException
(anonymous) @ serviceWorker.js:97
Promise.catch (async)
tn @ serviceWorker.js:96
(anonymous) @ serviceWorker.js:51
load (async)
(anonymous) @ serviceWorker.js:34
429 @ index.js:25
p @ (index):1
276 @ stylesheet.js:47
p @ (index):1
i @ (index):1
e @ (index):1
(anonymous) @ main.609507e8.chunk.js:1

Я не сделалне изменяйте регистрацию / конфигурацию работника сервиса по умолчанию, так как в этом не было необходимости.Это регистрируется в index.js.Нет проблем с регистрацией, когда производственная сборка обслуживается локально. 

ReactDOM.render(app, document.getElementById("root"));
serviceWorker.register();

Ответы [ 2 ]

0 голосов
/ 03 марта 2019

Проблема заключалась в том, что некоторые файлы .js, включая service-worker и package-manifest, обслуживались в виде простого text mime-типа, а не application/javascript.

Ориентация на определенные маршруты с шаблонами регулярных выражений, которыми я управлялперезаписать настройки по умолчанию и обслуживать файлы в правильном формате MIME, один из которых /service-worker.js, поскольку он запрашивается в процессе регистрации.

Вот окончательный вариант app.yaml

# [START runtime]
runtime: python27
api_version: 1
threadsafe: true
# [END runtime]

# [START handlers]
handlers:
  - url: '/service-worker.js'
    secure: always
    static_files: build/service-worker.js
    upload: build/service-worker.js
    mime_type: application/javascript

  - url: /(precache-manifest.*)$
    secure: always
    mime_type: application/javascript
    static_files: build/\1
    upload: build/(precache-manifest.*)$

  - url: /(.*\.js)$
    secure: always
    static_files: build/\1
    upload: build/.*\.js$
    mime_type: application/javascript

  - url: /(.*\.(css|map|png|jpg|svg|ico|json|txt|woff))$
    secure: always
    static_files: build/\1
    upload: build/.*\.(css|map|png|jpg|svg|ico|json|txt|woff)$

  - url: '/(.*)'
    secure: always
    static_files: build/index.html
    upload: build/index.html
# [END handlers]
0 голосов
/ 02 марта 2019

Отказ: не пользователь nodejs, отвечайте только на основе документов.

Поскольку вы используете раздел handlers для указания статических ресурсов в файле app.yaml, вам также необходимо добавить его сscript: auto.От Элемент обработчиков (выделено мной):

script

Необязательно.Указывает, что запросы к определенному обработчику должны быть нацелены на ваше приложение.Единственное допустимое значение для элемента script - auto, поскольку весь трафик обслуживается с помощью команды точки входа. Чтобы использовать статические обработчики, по крайней мере один из ваших обработчиков должен содержать строку script: auto для успешного развертывания. 

handlers:
- url: /images
  static_dir: static/images

- url: /.*
  secure: always
  redirect_http_response_code: 301
  script: auto

Примечание: у вас есть 2 обработчика дляшаблон /, 2-й никогда не будет совпадать / совпадать, вы всегда будете возвращать build/index.html за него.

...