我有一个简单的html文件,其中包括这样的css:
<link rel="stylesheet" href="./css/style.css" />
我上传了这个html文件和css文件太谷歌云存储,并设置了公共权限。
在我用nodejs编写的应用程序中,我希望在用户访问我的根页面时提供这个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);
}
这是意料之中的事。它将从bucket中服务器index.html
。然而,由于这个html文件有到css文件的相对链接,它不会加载css文件,因为它找不到它。
我该如何解决这个问题,以便也提供css文件?目前我正在本地计算机上运行这个,但它将被部署到谷歌计算引擎上。
我找到了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
但据我所知,这在本地机器上不起作用。
此外,电子商务公司如何解决这些问题?例如,每个商店都可以有不同的主题,可以自定义。所以我知道每个租户都有自己的bucket,在租户bucket中,这个可定制的主题保存正确吗?那么,我认为他们应该和我一样有类似的问题。他们如何应对这种情况,如何处理?
您当前正试图从谷歌应用程序引擎url上提供的index.html访问bucket静态css文件。这是不可能开箱即用的。
有很多选项可以解决这个问题:
-
在公共的同一个bucket中提供你的index.html,你的其他静态文件(如css(在哪里。这也有作为CDN的好处,CDN更高效。(如果可能的话,这是我建议的方式,唯一不能做到这一点的情况可能是,在将index.html文件发送回客户端之前,你想计算服务器端html文件中的内容,但这很有可能在客户端完成(
-
在index.html中构建到css资源的绝对路径"在飞行中";或";静态地";所以链接标签可能看起来像:
<link rel="stylesheet" href="https://bucketurl.com/css/style.css" />
- 通过一个特殊的路由以编程方式为应用程序提供所有内容,该路由将通过从bucket中读取文件来提供静态内容,就像使用index.html一样。这应该可以让你为其他静态文件保留相对路径