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

【问题标题】：App Engine app.yaml handlers for built React app用于构建的 React 应用的 App Engine app.yaml 处理程序
【发布时间】：2019-05-07 02:00:37
【问题描述】：

我正在尝试将 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

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

【问题讨论】：

标签： reactjs google-app-engine google-cloud-platform gcloud app-engine-flexible

【解决方案1】：

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

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

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

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

【讨论】：

为了部署，你部署的文件夹中必须有一个 app.yaml 文件，如果你在构建文件夹中运行 gcloud app delpoy，你会得到一个错误，因为没有包.json 文件在那里。 gcloud app deploy 默认运行 npm start 或查找 server.js 文件。这就是为什么从项目文件夹部署以开发模式运行应用程序的原因。您是建议仍然部署整个 repo 还是建议仅部署 build 文件夹，如果是，那么在设置 server.js 文件和 package.config 时缺少步骤。你能复制你的指令吗？
@DmitriLarionov 你可能是对的，我只查看了 app.yaml 的含义（我是 python 运行时用户，对其他 node.js 细节不太熟悉）。

【解决方案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"
}

【讨论】：

【解决方案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/\1
    upload: build/(.*)

【讨论】：