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

Question

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

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

我把这个html文件和css文件上传到google cloud storage，并设置权限为public。

在我的应用程序中，用 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

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

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

Answer 1

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

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

• 从同一个存储桶中公开提供您的 index.html，您的其他静态文件（如 css）在哪里。这还具有将beeing用作更高效的CDN的好处。 （如果可能，这是我推荐的方式，唯一不能这样做的情况可能是当您想在将 index.html 文件发送回客户端之前计算服务器端 html 内容时，但很有可能可以做到这一点客户端）

• “动态”或“静态”在 index.html 中构建指向您的 css 资源的绝对路径，因此链接标签可能如下所示：

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

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