Google Cloud Bucket 和 ReactJS 应用程序访问

Question

我使用 ReactJS 制作了一个构建（reactJs static，npm build）并将其上传到 Google Cloud Storage Bucket，但路径和构建文件夹文件出现问题。应用程序（/静态网站）正在运行，但无法从存储桶目录中获取文件，例如index.html和徽标。（404 或 403 错误）

结构：父存储桶 > Build 文件夹（index.html、静态文件夹和 Build 内的其他文件）

任何人对此有任何建议。如何解决这个问题？

我是否需要为 GCS Bucket 或任何替代方案创建 app.yaml？

我已经阅读了非常相似的文章，但针对的是 AppEngine 而不是 Bucket。https://medium.com/google-cloud/how-to-deploy-a-static-react-site-to-google-cloud-platform-55ff0bd0f509。 我尝试过使用 app.yaml 文件，但对我不起作用。

Answer 1

我遇到了与OP提到的完全相同的问题。我正在分享我的解决方案版本，以防其他人最终来到这里。

build/static正如 OP 的屏幕截图所示，我出现了 403 错误，因为脚本未正确配置文件夹中静态文件的 URL react-scripts build。

例如：

文件的网址index.html为https://storage.googleapis.com/{bucket-name}/index.html。但是，当页面加载时，它请求具有 url https://storage.googleapis.com/static/js/main.f555c3e0.chunk.js的文件。它应该是 https://storage.googleapis.com/{bucket-name}/static/js/main.f555c3e0.chunk.js

发生这种情况是因为默认情况下react-scripts build假设您的文件将从主机的根文件夹提供服务。

package.json要解决此问题，请在项目中添加以下字段

"homepage": "https://storage.googleapis.com/{bucket-name}"

这告诉构建脚本它需要添加一个相对路径来提供静态文件。详细信息请参阅：https://create-react-app.dev/docs/deployment/#building-for-relative-paths