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

Question

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

运行之后npm run build，将创建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 将运行npm start以运行您的 React 应用程序。因此，您需要配置您的 package.json 以告诉 GAE 为您的构建文件夹提供服务：

  "scripts": {
    "start": "serve -s build",
    ...
  },

还需要相应地配置您的.yaml文件：

handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /(.*)$
    static_files: build/\1
    upload: build/(.*)

Answer 2

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

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

• app.yaml在build目录中创建一个文件（手动或指示您的构建过程执行此操作）

  注意：您需要调整该文件中的路径，因为build应用程序目录中不再有目录。或者尝试在其中创建一个build -> .指向自身的符号链接，可能允许按app.yaml原样使用现有内容，而无需调整路径（虽然不是 100% 确定这会起作用）。

• 部署该build/app.yaml文件，而不是顶部 ( bsn) 目录中的文件。

Answer 3

修改其中的脚本，package.json以使GAE可以使用serve该build目录而不是根目录。

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

此过程要求您先运行，npm run build然后再部署到GAE。这将为您提供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"
}