适用于内置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

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

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应用程序/服务时，包含正在部署的应用程序/服务的constructor(props) { super(props); //Video properties this.state = { repeat: false, paused: false, }; //VIDEO index variable global.currentVideo = 0; } nextVideo() { //Skip video when button is pressed to next video in list if (global.currentVideo != VIDEOS.length-1) { global.currentVideo = global.currentVideo + 1; } else { global.currentVideo = 0; } } render() { return ( <View style={styles.container}> <View style={styles.video}> <Video source={{uri: VIDEOS[global.currentVideo]}} ref={(ref) => {this._player = ref}} style={styles.video} /> </View> <View style={styles.button}> <Button onPress={this.nextVideo} /> </View> </View> ); 文件的目录被视为应用程序/服务的顶级目录，该目录的内容即为正在部署的内容。就您而言，这与我怀疑您所说的开发版本相符。

如果您想将app.yaml目录作为应用程序/服务的顶级目录，则需要：

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

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

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

Answer 3

修改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"
}