Как я могу запустить приложение Svelte / Sapper через HTTPS / SSL?

Кажется, я ничего не могу найти о запуске приложений Svelte через https. Я хотел бы использовать https как для разработчиков, так и для продуктов. Я могу изменить порт с помощью аргумента --port в скриптах в package.json, но, очевидно, это не меняет протокол с http на https.


person jspinella    schedule 20.01.2020    source источник
comment
Здесь есть решение, использующее Devilbox и значение по умолчанию шаблон Svelte.   -  person lowtechsun    schedule 01.08.2020


Ответы (3)


Вам необходимо создать сертификаты SSL откуда-нибудь (например, ZeroSSL). Если у вас уже есть certificate.crt & private.key файлы, отредактируйте свой server.js файл.

Оригинальные исходные коды <sapper project directory>/src/server.js:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

polka() // You can also use Express
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

Вы можете добавить и изменить некоторые коды этого файла (server.js) следующим образом:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const { createServer } = require('https');
const { readFileSync } = require('fs');
const ssl_port = 443;

const options = {
  // The path & file names could be different.
  key: readFileSync('/home/ubuntu/ssl/private.key'),
  cert: readFileSync('/home/ubuntu/ssl/certificate.crt')
};

const { handler } = polka()
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .get('*', (req, res) => {
        res.end(`POLKA: Hello from ${req.pathname}`);
    });

// Mount Polka to HTTPS server
createServer(options, handler).listen(ssl_port, _ => {
    console.log(`> Running on https://localhost:${ssl_port}`);
});

Добавленные коды:

const { createServer } = require('https');
const { readFileSync } = require('fs');
const ssl_port = 443;

const options = {
  // The path & file names could be different.
  key: readFileSync('/home/ubuntu/ssl/private.key'),
  cert: readFileSync('/home/ubuntu/ssl/certificate.crt')
};

Измененные коды:

const { handler } = polka()
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .get('*', (req, res) => {
        res.end(`POLKA: Hello from ${req.pathname}`);
    });

// Mount Polka to HTTPS server
createServer(options, handler).listen(ssl_port, _ => {
    console.log(`> Running on https://localhost:${ssl_port}`);
});

И затем вам нужно запускать свои приложения Svelte / Sapper с sudo из-за разрешения порта 443. (например: sudo npm run dev или sudo npm run start)

После запуска sudo npm run dev вы можете увидеть сообщения:

$ sudo npm run dev

> [email protected] dev /home/ubuntu/ensayar-sapper
> sapper dev

✔ server (2.1s)
✔ client (2.1s)
> Running on https://localhost:443
✔ service worker (42ms)
> Server is not listening on port 3000

Вы можете игнорировать сообщение Server is not listening on port 3000.

person Mincheol Kang    schedule 22.06.2020
comment
Связано с разработчиками, использующими Devilbox. Спасибо, что указали на это! Я расскажу, как исправить ситуацию с помощью шаблона Svelte по умолчанию, а также с помощью Svelte HMR. В противном случае, если вы не против добавить код для этих шаблонов, вы знаете, что делать. ;) - person lowtechsun; 01.07.2020
comment
Вау, черт возьми, полный ответ. Спасибо. - person mtyson; 22.02.2021

Это не связано с сапером. Просто используйте параметры вашей серверной инфраструктуры. Вы пользуетесь экспрессом или полькой? Следуйте их инструкциям!

person Jean-Claude Schmidig    schedule 15.02.2020
comment
Более зрелые фреймворки, такие как React и Angular, сразу же поддерживают запуск режима разработки с SSL / HTTPS. Похоже, Svelte еще нет (или лучше сказать sirv-cli). Вы абсолютно правы, для продукции мы можем использовать Express, Polka и т. Д. - person jspinella; 19.02.2020
comment
@jspinella, мне нравится использовать инструменты, которые сосредоточены на своей цели. Я никогда не использую https в режиме разработки, а на производстве настоятельно рекомендуется использовать обратный прокси-сервер, который заботится обо всех деталях безопасности. - person Jean-Claude Schmidig; 20.02.2020

Похоже, что на данный момент единственный способ сделать это - запустить обратный прокси (например, nginx) перед приложением Svelte / Sapper.

Э: извините ... какое-то время это был единственный ответ. Это удалить что ли?

person jspinella    schedule 25.01.2020
comment
ofc можно использовать Sapper по https. Sapper использует промежуточное ПО Express, которое имеет множество опций. - person Mark Homer; 05.06.2020
comment
он ответил на свой вопрос с лучшими знаниями, которые у него были в то время, давайте его! - person jspinella; 01.07.2020