Однажды, когда вы закончите разработку проекта, вам понадобится отправить его на продакшн. То есть, найти хостинг, залить туда файлы, добавить настройки, запустить сайт и так далее. Чтобы вы потом не бегали с горящей задницей, не зная что делать, я подготовил полноценную инструкцию, которая решит все эти проблемы.
Сегодня мы будем деплоить проект, написанный на Svelte, в облачную PaaS-платформу – Heroku. Будем называть её просто “хостинг”.
Начнем с создания базовой структуры, то есть с чистого листа.
За основу возьмем этот бойлерплейт: svelte-boilerplate
Склонируем проект в нужную папку.
Перейдем в директорию svelte и запустим команду для установки зависимостей
Запускаем проект
Если всё прошло успешно, сайт будет доступен по ссылке , откроем её в браузере.
Теперь попробуем собрать проект. По идее у нас должна создаться папка public , в которой будут html , css и js файлы, они будут сжаты и оптимизированы, их мы и будем использовать на продакшне.
Команда для сборки проекта
Итог должен быть таким:
Подготовка сервера
Скажу сразу: запускать проект на хостинге через команду npm run start:dev плохая идея. Вот почему:
- Файлы и картинки не будут оптимизированы и сжаты
- Сервер для разработки не стабилен и не предназначен для больших нагрузок
- Нет возможности добавить настройки для сервера
- И куча других проблем.
Мы же сделаем всё как надо и запустим наш проект на простеньком Express.js сервере.
Установим пакет
В корне проекта создадим файл server.js , в него поместим код ниже
Главное – указать переменную с портом, чтобы Heroku мог подставить нужный порт при старте.
А так сервер очень простой, при запуске он всего лишь будет рендерить index.html из папки public . Проверим
В консоли должно появиться сообщение об успешном старте
И если перейти по ссылке , мы увидим стартовую страницу сайта.
С файлами для продакшна разобрались, сервер подготовили, далее займемся настройкой Heroku CLI .
Установка и настройка Heroku CLI
Heroku CLI – это консольная утилита для удаленной работы с Heroku .
Начнем с установки. У них на сайте есть подробная инструкция . Идём читать.
Обычно раздела “Download and install ” достаточно
Пробуем установить. Если всё нормально, наберём в консоли команду heroku. Результат должен быть примерно таким
Это говорит нам о том, что Heroku доступен и готов к работе. Попробуем с помощью него запустить наш сервер. Так же в корне проекта, где находится файл server.js , запустим команду
У меня результат такой. Сайт работает
Далее в корне проекта нужно создать Procfile . Он поможет определить, как запустить приложение. Heroku в первую очередь будет искать именно его. Если в проекте отсутствует этот файл, heroku попытается запустить веб-сервер с помощью стартового скрипта (npm start) в вашем package.json.
Вставим кусок кода в Procfile
И попытаемся снова запустить сайт
На этот раз никаких ошибок в консоли нет.
Ну и последним шагом добавим в package.json команду для сборки проекта на стороне heroku
Подготовка проекта
Ну вот мы и подошли к самому главному – будем отправлять всё, что получилось, на хостинг heroku.
Для этого есть два способа:
- Залить проект в репозиторий heroku , и он уже сам добавит нужные настройки
- Залить на github и в настройках heroku указать ссылку
Мы пойдем по второму пути.
Надеюсь, рассказывать, как заливать проект на github , не нужно?
Я залил сюда .
Если вам всё же интересно почитать про первый способ, вот ссылка . Он особо ничем не отличается, разве что тем, что код будет храниться на стороне heroku .
Возможно, у вас нет аккаунта на github , и этот способ окажется даже проще. Пробуйте.
Настройка хостинга
Когда залили проект на github , переходим в дашборду heroku , чтобы создать новый проект.
На этой странице будут находиться все ваши проекты. Чтобы создать новый, сверху справа нажмите на кнопку New , далее на Create new app. Откроется новая страница, на которой нужно ввести данные о новом проекте.
После завершения проект будет создан и нас перенаправит во вкладку Deploy . Там сразу перейдем в настройки github
Находим нужный нам репозиторий и коннектим
Далее выберем ветку, за которой будет наблюдать heroku , и нажмём на большую тёмную кнопку.
Теперь, когда вы зальёте что-то в ветку master , heroku будет подтягивать изменения и обновлять сайт.
На данный момент heroku не успел еще ничего стянуть, поэтому воспользуемся кнопкой ручного обновления
После того как сборка завершится (процесс можно отслеживать во вкладке Activity ), нажимаем на кнопку Open app
Откроется новая вкладка, и мы снова увидим стартовую страницу нашего сайта, но уже на хостинге heroku . Сайт готов к продакшну, осталось только купить домен. Купить можно тут .
Поменять во вкладке Settings , в секции Domains
В этой же вкладке вы можете настраивать env переменные, устанавливать различные плагины и т.д. Советую изучить все вкладки, чтобы иметь полное представление о возможностях этого хостинга.
Я считаю, что цель статьи была выполнена и можно заканчивать. По всем остальным вопросам обращайтесь в официальную документацию .
Спасибо!
Ранее статья была опубликована тут.