直接从 Google Cloud Storage 提供 html 并解析相关链接

如何解决直接从 Google Cloud Storage 提供 html 并解析相关链接

我有一个简单的 html 文件，其中包含这样的 css：

<link rel="stylesheet" href="./css/style.css" />

我也上传了这个 html 文件和 css 文件到谷歌云存储，并将权限设置为公开。

在我用 node js 编写的应用程序中，我想在用户访问我的根页面时提供这个 html 文件。

在我的应用程序中，我有以下代码：

public async getPublicFile(opts: IGetFileOpts): Promise<File> {
    const bucket = this.storage.bucket(opts.bucket);

    return bucket.file(path.join(opts.type,opts.fileName));
}

@Get()
public async serveFile(@Res() response: Response) {
    const file = await this.storageService.getPublicFile({
        organization: organization,fileName: 'index.html',type: 'resources',});

   file.createReadStream().pipe(response);
}

这按预期工作。它将从存储桶中提供 index.html 服务。但是，由于这个 html 文件有相对于 css 文件的链接，它不会加载 css 文件，因为它找不到它。

我该如何解决这个问题，以便同时提供 css 文件？目前我在本地计算机上运行它，但它将部署到 Google Compute Engine。

我找到了 AppEngine https://cloud.google.com/appengine/docs/standard/go/serving-static-files

的链接

在 AppEngine 中，我可以像这样定义一些处理程序：

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

但据我所知，这在本地机器上不起作用。

另外，电子商务公司如何解决这个问题？例如，每家商店都可以有不同的可定制主题。所以我知道每个租户都有自己的存储桶，并且在租户存储桶中，这个可自定义的主题保存正确吗？所以我如何假设应该有和我一样的问题。遇到这种情况如何处理，如何处理？

解决方法

您当前正在尝试从 在您的 Google 应用引擎 url 上提供的 index.html 访问存储桶静态 css 文件。这不能开箱即用。

有很多方法可以解决这个问题：

从公共存储桶中提供您的 index.html，您的其他静态文件（如 css）在哪里。这也有蜜蜂作为 CDN 的好处，它更有效。（如果可能，这是我推荐的方式，您不能这样做的唯一情况可能是当您想在将 index.html 文件中的服务器端 html 内容发送回客户端之前计算它时，但很有可能做到这一点客户端）
在 index.html 中“即时”或“静态”构建您的 css 资源的绝对路径，因此链接标签可能如下所示：

<link rel="stylesheet" href="https://bucketurl.com/css/style.css" />

使用特殊路由以编程方式为您的应用提供所有内容，该路由将像使用 index.html 一样从存储桶中读取文件来提供静态内容。这应该可以让您保留其他静态文件的相对路径。