Google Cloud Bucket和ReactJS应用访问

Question

使用ReactJS，我进行了构建（reactJs静态，npm构建）并将其上传到Google Cloud Storage Bucket，但是Path和Build文件夹文件出现问题。该应用程序（/静态网站）正在运行，但无法从存储区目录中获取index.html和徽标等文件。 （404或403错误）

结构：父级存储桶>生成文件夹（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 提到的完全相同的问题。我正在分享我的解决方案版本，以防其他人在这里结束。

如 OP 的屏幕截图所示，403 错误显示给我，因为 build/static 文件夹中的静态文件的 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

Answer 2

为了设置存储在Google Cloud Storage中的静态网站的路由，您需要为对象分配一个后缀。换句话说，使用后缀是配置网站的预期方式。您可以在Hosting a static website document中查看更多信息。

对于主索引页面，应设置MainPageSuffix，对于未找到的页面404.html，应将NotFoundPage设置为后缀。

您可以查看有关如何配置静态网站here

的更多信息。