Reactjs 将React应用程序的生产版本部署到Google应用程序引擎：服务人员注册失败

在构建了React应用程序的生产版本并遵循将其部署到Google应用程序引擎的说明后，我在所有浏览器中的服务人员注册方面都遇到了问题

我在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.

…和铬

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();

---

Displaimer：不是nodejs用户，只根据文档回答

由于您正在使用

处理程序

部分来指定

app.yaml

文件中的静态资源，因此还需要使用

script:auto

添加一个。来自（我的）：

脚本

可选。指定对特定处理程序的请求应 瞄准你的应用。

脚本

元素唯一可接受的值是

auto

，因为所有流量都使用entrypoint命令提供服务。 要使用静态处理程序，至少一个处理程序必须包含行

script:auto

，才能成功部署。

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

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

---

旁注：您有两个用于

/

模式的处理程序，第二个将永远不会匹配/命中，您将始终为其返回

build/index.html

。

显示者：不是nodejs用户，仅基于文档回答

由于您正在使用

处理程序

部分来指定

app.yaml

文件中的静态资源，因此还需要使用

script:auto

添加一个。来自（我的）：

脚本

可选。指定对特定处理程序的请求应 瞄准你的应用。

脚本

元素唯一可接受的值是

auto

，因为所有流量都使用entrypoint命令提供服务。 要使用静态处理程序，至少一个处理程序必须包含行

script:auto

，才能成功部署。

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

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

---

旁注：您有两个处理程序用于

/

模式，第二个将永远不会匹配/命中，您将始终为其返回

build/index.html

。

问题是，一些.js文件（包括服务人员和包清单）是以纯

文本
mime类型提供的，不是
应用程序/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]

问题是一些.js文件（包括服务工作者和包清单）是以普通的
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]

-url:/static\u文件：build/index.html上传：build/index.html安全：始终-url:/.*安全：始终重定向\u http\u响应\u代码：301脚本：auto
您的评论让我进入了文档，但我仍然没有找到解决方案。问题是，我的url/service-worker.js被用作文本，而不是application/javascript
-url:/service-worker.js静态\u文件：build/service-worker.js上传：build/service-worker.js mime\u类型：应用程序/javascript安全：始终
-url:/static\u文件：build/index.html上传：build/index.html安全：始终-url:/.*安全：始终重定向\u http\u响应\u代码：301脚本：auto
您的评论让我进入了文档，但我仍然没有找到解决方案。问题是，我的url/service-worker.js被用作文本，而不是application/javascript
-url:/service-worker.js静态_文件：build/service-worker.js上传：build/service-worker.js mime_类型：应用程序/javascript安全：始终