Google Cloud Bucket 和 ReactJS 应用访问答案

【问题标题】：Google Cloud Bucket and ReactJS app AccessGoogle Cloud Bucket 和 ReactJS 应用访问
【发布时间】：2020-03-13 15:26:41
【问题描述】：

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

结构：Parent Bucket > 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 文件，但对我不起作用。

【问题讨论】：

您好，请记住，托管网站表单 App Engine 与托管存储桶中的静态网站无关。您想在哪里托管您的网站？如果您从存储桶托管您的网站，您应该关注this guide
嗨 Debayan，你的问题有点令人困惑。我不确定您是在 App Engine 上部署网站，还是尝试将网站单独托管在存储桶中（根本不使用 App Engine）。你能澄清一下你想做什么吗？
嗨 Chris32，它是本地环境中的 reactJS 静态页面。它是一个 npm 本地构建（如和 .image），并且构建被上传到 gcs 存储桶。它正在运行，但由于路径而无法获取存储桶内的文件。它在我的描述中进行了解释。我想知道如何声明存储桶中的路径，以便 index.html 可以加载文件。

标签： reactjs google-cloud-storage

【解决方案1】：

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

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

例如：

index.html 文件的 URL 是 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

【讨论】：

赞成您的调查和良好的解释。
另外，如果您没有将元数据 Cache-Control 设置为 no-store。当您尝试请求时，它可能仍会提供旧版本的 index.html。

【解决方案2】：

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

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

您可以查看更多关于如何配置静态网页的信息here

【讨论】：

将此答案与@havish 1 的答案结合起来对我有用。设置“主页”：“。”在 package.json 2. 通过单击溢出菜单中的“编辑网站配置”为您的 GCP 存储桶设置 MainPageSuffix 和 NotFoundPage。我将两者都设置为 index.html（我们可以有不同的未找到页面）。