如何使用 GCP 部署 React 生产构建？

【问题标题】：How do I deploy a React Production Build with GCP?如何使用 GCP 部署 React 生产构建？
【发布时间】：2020-06-01 21:34:18
【问题描述】：

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

我首先运行“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 文件没有被缩小/优化。我错过了什么？

【问题讨论】：

标签： reactjs google-app-engine deployment web-deployment

【解决方案1】：

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

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

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

npm install -s serve

然后，将 package.json 中的启动脚本更改为：

"start": "react-scripts start"

收件人：

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

然后正常部署

【讨论】：