问题描述
<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 一样从存储桶中读取文件来提供静态内容。这应该可以让您保留其他静态文件的相对路径。