如何使用 GCP 部署 React Production Build？

Question

我正在尝试将我的 React 项目部署到生产，似乎 Google App Engine 正在构建开发而不是 Production Build 文件夹。也许我错过了一些非常简单的东西......

我首先运行“npm run build”，然后运行“npm run deploy”或“gcloud app deploy app.yaml --project [project_name]”

文件夹结构： 这是我的 app.yaml 文件

runtime: nodejs
env: flex

env_variables:
    APP_ENV: "production"

handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build
  - url: /static
    static_dir: build/static

automatic_scaling:
    min_num_instances: 2
    max_num_instances: 4
    cool_down_period_sec: 180
    cpu_utilization:
       target_utilization: 0.50

resources:
    cpu: 1
    memory_gb: 3.5 
    disk_size_gb: 10

这是我的 package.json：

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gcloud app deploy app.yaml --project ....",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

当它完成部署时，我仍然会发出开发警告，当我运行页面速度时 - js 文件没有被缩小/优化。我错过了什么？

Answer 1

当gcloud app deploy命令被执行时，它运行npm start命令来启动应用程序。这在Docs 中指定。

在您的情况下，npm start命令执行"react-scripts start"，这将启动开发服务器。

为了在生产环境中为您的应用程序提供服务，您的start命令应该启动一个 Web 服务器，该服务器为您的 React 应用程序的静态文件提供服务。为此，您可以执行以下操作：

npm install -s serve

然后，package.json从以下位置更改启动脚本：

"start": "react-scripts start"

到：

"start": "serve -s build -l 8080"

然后正常部署