将Reaction应用程序的生产版本部署到Google App Engine：服务人员注册失败 [英] Deploying a production build of React app to Google App Engine: Service worker registration fails

问题描述

生成Reaction应用程序的生产版本并按照说明将其部署到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();

推荐答案

问题在于，包括服务工作者和程序包清单在内的某些.js文件是以简单的textMIME类型提供的，而不是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]

这篇关于将Reaction应用程序的生产版本部署到Google App Engine：服务人员注册失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！