如何将create-react-app部署到Google Cloud？求推荐方案及教程

我来帮你理清这个问题——其实Google Cloud官方针对Create React App（CRA）的部署，有两种靠谱的方案，结合你遇到的React Router刷新404问题，Google App Engine（GAE）标准环境是更推荐的选择，能完美适配SPA路由；当然Cloud Storage也能用，但需要额外配置来解决路由问题。下面给你详细的步骤：

这种方式既能托管你的React静态文件，又能通过配置解决React Router的SPA路由问题，而且如果之后需要和你的Express后端整合（比如同域名部署）也更方便。

步骤1：准备项目配置 #

1. 在你的CRA项目根目录下，创建一个 app.yaml 文件，粘贴以下内容：

runtime: nodejs20  # 替换成你本地使用的Node.js版本，比如nodejs18
service: react-frontend  # 自定义服务名，方便和你的Express后端服务区分
handlers:
  # 处理CSS、JS、图片等静态资源
  - url: /static
    static_dir: build/static
  # 处理favicon.ico、manifest.json这类静态文件
  - url: /(.*\.(json|ico|txt))$
    static_files: build/\1
    upload: build/.*\.(json|ico|txt)$
  # 核心配置：所有其他请求都指向index.html，解决刷新404问题
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

2. 确保你已经安装了Google Cloud SDK（gcloud CLI），完成登录并设置好你的项目：

# 登录你的Google账号
gcloud auth login
# 设置要部署的项目ID
gcloud config set project YOUR_PROJECT_ID

步骤2：构建并部署 #

1. 先构建CRA的生产版本：

npm run build

2. 执行部署命令：

gcloud app deploy

部署完成后，访问 https://YOUR_PROJECT_ID.uc.r.appspot.com 就能看到你的React应用了，此时刷新任意路由页面都不会出现404错误。

如果你更倾向用Cloud Storage，也可以通过配置Cloud CDN的自定义错误页面来修复刷新404的问题，步骤如下：

步骤1：上传静态文件到存储桶 #

1. 在Google Cloud Console创建一个Cloud Storage存储桶（命名要符合规则，比如 your-react-app-static-bucket）
2. 把build文件夹的所有内容上传到存储桶：

gsutil -m cp -r build/* gs://your-react-app-static-bucket/

3. 设置存储桶为公开可读，这样用户才能访问：

gsutil iam ch allUsers:objectViewer gs://your-react-app-static-bucket

步骤2：配置Cloud CDN解决路由问题 #

1. 为你的存储桶创建一个Cloud CDN分发（在Cloud Console的「CDN」页面操作，选择存储桶作为源）
2. 在分发的「错误页面」配置中，添加一条规则：
   • 错误代码：404
   • 重定向目标：/index.html
   • 状态码：保持200（确保返回正常的页面内容）
3. 等待CDN配置生效（大概几分钟），之后通过CDN的访问域名打开应用，刷新路由页面就会正常加载了。

• 如果你的Express后端也部署在GAE，可以通过不同的service来区分前后端，或者在同一个app.yaml中配置不同的handler，实现前后端同域名部署（适合需要避免跨域的场景）。
• 部署前记得核对Node.js版本，确保app.yaml里的runtime版本和本地开发环境一致，避免不必要的兼容性问题。

内容的提问来源于stack exchange，提问作者0xh8h