Question

关于如何做到这一点，到处都有指南和问题，但从来没有真正令人满意的具体答案。基本上，我想知道是否可以在GCP云存储中托管静态SPA（HTML / CSS / JS）。

主要的警告是SPA有自己的路由系统（ReactRouter），所以我希望所有路径都由index.html提供。

大多数指南都会告诉您将ErrorDocument设置为index.html而不是404.html。虽然这是一个聪明的黑客，它会导致网站的HTTP响应代码为404，这对SEO或监控工具来说是一场灾难。只要我可以更改响应代码，这样就行了。

有没有办法让这项工作？我已经启动并运行了CloudFlare，但据我所知，没有办法修剪路径或改变响应状态。

Answer 1

这里的一个好方法是使用Google App Engine来托管静态SPA。 https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website

您可以使用app.yaml文件将网址映射到静态文件。这是一个例子：

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: www/\1
  upload: www/(.*)

app.yaml https://cloud.google.com/appengine/docs/standard/python/config/appref

的文档

Answer 2

根据This blog，您可以通过使用Web配置将主页和错误页面都指向index.html来实现。我没有亲自尝试过，我现在使用Firebase托管。但是让我知道它是否有效。

Answer 3

解决该问题的一种方法是使用服务器端呈现。在SSR中，所有客户端请求都将传递到后端应用程序，因此不需要由Cloud Storage托管的index.html。

这当然有其自身的复杂性，但是我们避免了上述404 hack或求助于App Engine之类的任何其他依赖项。

或者，您可以使用hash-based routing，即https://example.com/#some-path之类的路径。

Answer 4

如果您使用Cloudflare，则可以使用Cloudflare Worker覆盖来自Google Cloud Storage错误页面的404状态代码。

Worker的代码应如下所示：

addEventListener('fetch', event => {
    event.respondWith(fetchAndLog(event.request))
})

async function fetchAndLog(req) {
    const res = await fetch(req)
    console.log('req', res.status, req.url)

    if (res.status === 404 && req.method === 'GET') {
        console.log('overwrite status', req.url)
        return new Response(res.body, {
            headers: res.headers,
            status: 200
        })
    }
    return res
}

我在Cloudflare社区中here找到了它。

在Google云端存储中托管带有路由的静态网站单页应用

4 个答案: