App Engine app.yaml 用于构建 React 应用程序的处理程序

Question

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

运行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/service 时，包含正在部署的 app/service 的 app.yaml 文件的目录被认为是 app/service 的顶级目录和内容该目录是正在部署的目录。在你的情况下，这与我怀疑你所说的开发版本相匹配。

如果您希望 build 目录成为 app/service 的顶级目录，那么您需要：

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

注意：您需要调整该文件中的路径，因为应用目录中不再有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 正在做的事情。

此过程要求您运行 npm run build 在部署到 GAE 之前。这将为您提供 build 目录，但它不会自动为您运行构建过程，因此仍然必须这样做才能为 /src.[=23 中的最新代码提供服务=]

来源： 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"
}

Answer 3

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/
    upload: build/(.*)

App Engine app.yaml 用于构建 React 应用程序的处理程序

App Engine app.yaml handlers for built React app

google-app-engine

reactjs

google-cloud-platform

gcloud

app-engine-flexible