Question

我有一个已在AWS Lambda上成功运行的Sapper.js应用程序。 Lambda能够将由Sapper创建的服务器端生成的HTML交付到AWS API Gateway，然后由该API为用户提供服务。我正在使用S3托管客户端资产（脚本，Webpack块等）。 S3存储桶与API网关位于不同的域上。

我遇到的问题是，我需要为这些脚本设置资产前缀，以便Sapper可以找到它们。当前，我所有的客户端脚本都包含相对链接，并且看起来像这样：<script src="/client/be33a1fe9c8bbaa6fa9d/SCRIPT_NAME.js"></script>我需要让它们看起来像这样：<script src="https://AWS_S3_BUCKET_ENDPOINT.com/client/be33a1fe9c8bbaa6fa9d/SCRIPT_NAME.js"></script>

在Sapper docs中，我看到可以为客户端和服务器指定基本URL。但是，更改此基本URL会破坏我的应用程序，并导致Lambda渲染页面返回404错误。

我知道在使用Next.js时，我可以通过修改next.config.js文件以使其包括以下内容来实现此目的：

module.exports = {
  assetPrefix: "https://AWS_S3_BUCKET_ENDPOINT.com/client",
}

但是我不知道如何在Sapper中做到这一点。我是否需要修改捆绑程序（使用webpack）配置？还是有其他方法？

谢谢。

Answer 1

我想我已经解决了。

我不得不更改两个Sapper文件。首先，我进入<div class='main-content'> <div id='Navbar_Link-Toggle' style='font-size: 20px'> <i id='main' class='fas fa-bars'></i> </div> <div class='container'> <div class='Navbar'> <a class='links' href=''>FOOD</a> <a class='links' href=''>FUN</a> <img id='center-logo' src='img/SAMO.png'> <a class='links' href=''>HISTORY</a> <a class='links' href=''>LOCATION</a> </div> </div> <div class='header'> <img id='food' src='img/food.jpg'> </div> </div> <div class='colors'> <div id='top'> <div id='blue'></div> <div id='dark-green'></div> </div> <div id='bottom'> <div id='green'></div> <div id='orange'></div> </div> </div>并进行了如下修改：

sapper/dist/webpack.js

然后我必须修改'use strict'; var __chunk_3 = require('./chunk3.js'); var webpack = { dev: __chunk_3.dev, client: { entry: () => { return { main: `${__chunk_3.src}/client` }; }, output: () => { return { path: `${__chunk_3.dest}/client`, filename: '[hash]/[name].js', chunkFilename: '[hash]/[name].[id].js', // change this line to point to the s3 bucket client key publicPath: "https://AWS_S3_BUCKET_ENDPOINT.com/client" }; } }, server: { entry: () => { return { server: `${__chunk_3.src}/server` }; }, output: () => { return { path: `${__chunk_3.dest}/server`, filename: '[name].js', chunkFilename: '[hash]/[name].[id].js', libraryTarget: 'commonjs2' }; } }, serviceworker: { entry: () => { return { 'service-worker': `${__chunk_3.src}/service-worker` }; }, output: () => { return { path: __chunk_3.dest, filename: '[name].js', chunkFilename: '[name].[id].[hash].js', // change this line to point to the s3 bucket root publicPath: "https://AWS_S3_BUCKET_ENDPOINT.com" } } } }; module.exports = webpack; //# sourceMappingURL=webpack.js.map，以使sapper/runtime/server.mjs变量像这样指向存储桶：

main

使用基本的Sapper Webpack模板进行测试，我可以确认脚本已成功从s3存储桶加载。到目前为止，这一切看起来都不错。我将弄乱旁边的... const main = `https://AWS_S3_BUCKET_ENDPOINT.com/client/${file}`; ...命令，以便我可以将这些hack作为命令行参数传递进来，这样我就不必每次都对其进行硬编码。

现在，我不确定随着应用程序变得更加复杂，这种情况是否会持续下去。查看sapper build文件，我发现sapper/runtime/server.mjs属性在几个不同的位置被引用，并且我不知道我的黑客是否会对此造成任何问题。或在其他事情上都可以解决。

如果有对Sapper内部有更多经验的人正在阅读，请在注释中告知我是否弄错了东西?

Sapper / Svelte.js-如何指定客户端资产位置？

1 个答案: