用于内置React应用程序的App Engine app.yaml处理程序

Question

我正在尝试将生成的React应用程序（使用create-react-app创建）部署到gcloud app引擎灵活的环境中。

运行npm run build后，已创建构建文件夹：

这是我的app.yaml：

# [START runtime]
runtime: nodejs
env: flex
# [END runtime]

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

部署到App Engine时，版本配置显示：

runtime: nodejs
api_version: '1.0'
env: flexible
threadsafe: true
handlers:
  - url: /
    application_readable: false
    static_files: build/index.html
    require_matching_file: false
    upload: build/index.html
  - url: '/(.*)'
    application_readable: false
    static_files: "build/\\1"
    require_matching_file: false
    upload: 'build/.*'
automatic_scaling:
  min_num_instances: 2
  max_num_instances: 20
  cpu_utilization:
    target_utilization: 0.5

正在提供开发应用程序而不是构建文件夹中的生产版本。我究竟做错了什么？

Answer 1

部署GAE应用程序/服务时，包含正在部署的应用程序/服务的app.yaml文件的目录被视为应用程序/服务的顶级目录，该目录的内容是正在部署的内容。在您的情况下，哪个匹配我怀疑您正在调用开发版本。

如果您希望build目录成为您的应用程序/服务的顶级目录，那么您需要：

• 在app.yaml目录中创建一个build文件（手动或指示您的构建过程执行此操作） 注意：您需要调整该文件中的路径，因为应用程序目录中不再有build目录。或者尝试在其中创建一个build -> .符号链接到自身，可能允许使用现有的app.yaml内容，而不调整路径（不是100％确定这将工作，但）。
• 部署那个build/app.yaml文件，而不是顶部的那个（bsn）目录。

Answer 2

修改package.json中的脚本以使GAE使用serve来提供build目录而不是根目录。

部署后，GAE将运行npm start开始为您的应用程序提供服务。通过更改start脚本映射到的内容，您可以根据需要提供build目录。在使用此设置进行本地开发时，您将不得不使用npm run local，因为您正在更改npm start正在做的事情。

此过程要求您在部署到GAE之前运行npm run build。这将为您提供build目录，但它不会自动为您运行构建过程，因此仍必须在/src中提供最新代码。

资料来源：https://github.com/facebook/create-react-app/issues/2077

码：

"scripts": {
  "start": "serve -s build",
  "prestart": "npm install -g serve",
  "local": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}