Sapper / Svelte.js - Как указать расположение активов на стороне клиента?

У меня есть приложение Sapper.js, которое я успешно запустил на AWS Lambda. Lambda может доставлять сгенерированный на стороне сервера HTML-код, созданный Sapper, в AWS API Gateway, который затем обслуживает приложение для пользователя. Я использую S3 для размещения ресурсов на стороне клиента (скриптов, фрагментов веб-пакетов и т. Д.). Корзина S3 находится в другом домене, чем API Gateway.

Проблема, с которой я столкнулся, заключается в том, что мне нужно установить префикс ресурса для этих скриптов, чтобы 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 javascript amazon-s3 svelte sapper
person mrstack999    schedule 14.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Думаю, я разобрался.

Пришлось поменять два саперных файла. Сначала я вошел в 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 указывала на ведро следующим образом:

...

const main = `https://AWS_S3_BUCKET_ENDPOINT.com/client/${file}`;

...

Тестируя базовый шаблон веб-пакета sapper, я могу подтвердить, что скрипты загружаются из корзины s3 успешно. Пока все выглядит хорошо. Я буду возиться с командой sapper build рядом, чтобы я мог передать эти хаки в качестве аргументов командной строки, чтобы мне не приходилось каждый раз жестко их кодировать.

Я не уверен, что это будет продолжаться, когда приложение станет более сложным. Заглянув в файл sapper/runtime/server.mjs, я вижу, что на свойство req.baseUrl есть ссылки в нескольких разных местах, и я не знаю, вызовут ли мои взломы какие-либо проблемы с этим. Или где-нибудь еще в сапере, если на то пошло.

Если кто-то с большим опытом работы с внутренностями Sapper читает, дайте мне знать в комментариях, если я что-то напортачил ????

person mrstack999    schedule 14.12.2019