Как развернуть проект на Heroku

Деплой Svelte приложения на хостинг Heroku

Oднажды, когда вы закончите разработку проекта, вам понадобится отправить его на продакшн. То есть, найти хостинг, залить туда файлы, добавить настройки, запустить сайт и так далее. Чтобы вы потом не бегали с горящей задницей, не зная что делать, я подготовил полноценную инструкцию, которая решит все эти проблемы.

Сегодня мы будем деплоить проект, написанный на Svelte, в облачную PaaS-платформу – Heroku. Будем называть её просто “хостинг”.

Начнем с создания базовой структуры, то есть с чистого листа.

За основу возьмем этот бойлерплейт: svelte-boilerplate

Склонируем проект в нужную папку.

git clone https://github.com/pankod/svelte-boilerplate.git svelte

Перейдем в директорию svelte и запустим команду для установки зависимостей

cd svelte && npm install

Запускаем проект

npm run start:dev

Если всё прошло успешно, сайт будет доступен по ссылке, откроем её в браузере.

Стартовая страница бойлерплейта Pankod

Теперь попробуем собрать проект. По идее у нас должна создаться папка public, в которой будут html, css и js файлы, они будут сжаты и оптимизированы, их мы и будем использовать на продакшне.

Команда для сборки проекта

npm run build

Итог должен быть таким:

Папка с файлами html, css и js

Подготовка сервера

Скажу сразу: запускать проект на хостинге через команду npm run start:dev плохая идея. Вот почему:

1. Файлы и картинки не будут оптимизированы и сжаты
2. Сервер для разработки не стабилен и не предназначен для больших нагрузок
3. Нет возможности добавить настройки для сервера
4. И куча других проблем.

Мы же сделаем всё как надо и запустим наш проект на простеньком Express.js сервере.

Установим пакет

npm i express

В корне проекта создадим файл server.js, в него поместим код ниже

const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 5000;
app.use(express.static('public'));
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});
app.listen(port, () =>
  console.log(`Server is running on: http://localhost:${port}`));

Главное – указать переменную с портом, чтобы Heroku мог подставить нужный порт при старте.

const port = process.env.PORT || 5000;

А так сервер очень простой, при запуске он всего лишь будет рендерить index.html из папки public. Проверим

node server.js

В консоли должно появиться сообщение об успешном старте

> node server.js
Server is running on: http://localhost:5000

И если перейти по ссылке, мы увидим стартовую страницу сайта.

Стартовая страница бойлерплейта Pankod

С файлами для продакшна разобрались, сервер подготовили, далее займемся настройкой Heroku CLI.

Установка и настройка Heroku CLI

Heroku CLI – это консольная утилита для удаленной работы с Heroku.

Начнем с установки. У них на сайте есть подробная инструкция . Идём читать.

Обычно раздела “Download and install” достаточно

Установка heroku на локальную машину

Пробуем установить. Если всё нормально, наберём в консоли команду heroku. Результат должен быть примерно таким

> heroku
CLI to interact with Heroku
VERSION
  heroku/7.49.0 linux-x64 node-v12.16.2
USAGE
  $ heroku [COMMAND]
COMMANDS
  access          manage user access to apps
  addons          tools and services for developing, extending, and operating your app
  apps            manage apps on Heroku
  auth            check 2fa status
  authorizations  OAuth authorizations
  autocomplete    display autocomplete installation instructions
  buildpacks      scripts used to compile apps
  certs           a topic for the ssl plugin
  ci              run an application test suite on Heroku
  clients         OAuth clients on the platform
  config          environment variables of apps
  container       Use containers to build and deploy Heroku apps
  domains         custom domains for apps
  drains          forward logs to syslog or HTTPS
  features        add/remove app features
  git             manage local git repository for app
  help            display help for heroku
  keys            add/remove account ssh keys
  labs            add/remove experimental features
  local           run Heroku app locally
  logs            display recent log output
  maintenance     enable/disable access to app
  members         manage organization members
  notifications   display notifications
  orgs            manage organizations
  pg              manage postgresql databases
  pipelines       manage pipelines
  plugins         list installed plugins
  ps              Client tools for Heroku Exec
  psql            open a psql shell to the database
  redis           manage heroku redis instances
  regions         list available regions for deployment
  releases        display the releases for an app
  reviewapps      manage reviewapps in pipelines
  run             run a one-off process inside a Heroku dyno
  sessions        OAuth sessions
  spaces          manage heroku private spaces
  status          status of the Heroku platform
  teams           manage teams
  update          update the Heroku CLI
  webhooks        list webhooks on an app

Это говорит нам о том, что Heroku доступен и готов к работе. Попробуем с помощью него запустить наш сервер. Так же в корне проекта, где находится файл server.js, запустим команду

heroku local web

У меня результат такой. Сайт работает

> heroku local web
[WARN] ENOENT: no such file or directory, open 'Procfile'
[OKAY] package.json file found - trying 'npm start'
8:10:03 PM web.1 |  > @pankod/svelte-boilerplate@0.0.1 start
8:10:03 PM web.1 |  > node server.js
8:10:03 PM web.1 |  Server is running on: http://localhost:5000

Далее в корне проекта нужно создать Procfile. Он поможет определить, как запустить приложение. Heroku в первую очередь будет искать именно его. Если в проекте отсутствует этот файл, heroku попытается запустить веб-сервер с помощью стартового скрипта (npm start) в вашем package.json.

Вставим кусок кода в Procfile

web: node server.js

И попытаемся снова запустить сайт

> heroku local web
8:30:31 PM web.1 |  Server is running on: http://localhost:5000

На этот раз никаких ошибок в консоли нет.

Ну и последним шагом добавим в package.json команду для сборки проекта на стороне heroku

"heroku-postbuild": "npm run build"

Команда для сборки проекта

Подготовка проекта

Ну вот мы и подошли к самому главному – будем отправлять всё, что получилось, на хостинг heroku.

Для этого есть два способа:

1. Залить проект в репозиторий heroku, и он уже сам добавит нужные настройки
2. Залить на github и в настройках heroku указать ссылку

Мы пойдем по второму пути.

Надеюсь, рассказывать, как заливать проект на github, не нужно?
Я залил сюда.

Если вам всё же интересно почитать про первый способ, вот ссылка. Он особо ничем не отличается, разве что тем, что код будет храниться на стороне heroku.

Возможно, у вас нет аккаунта на github, и этот способ окажется даже проще. Пробуйте.

Настройка хостинга

Когда залили проект на github, переходим в дашборду heroku , чтобы создать новый проект.

Список всех проектов

На этой странице будут находиться все ваши проекты. Чтобы создать новый, сверху справа нажмите на кнопку New, далее на Create new app. Откроется новая страница, на которой нужно ввести данные о новом проекте.

После завершения проект будет создан и нас перенаправит во вкладку Deploy. Там сразу перейдем в настройки github

Настройка github

Находим нужный нам репозиторий и коннектим

Подключение проекта

Далее выберем ветку, за которой будет наблюдать heroku, и нажмём на большую тёмную кнопку.

Выбор ветки, за которой будет наблюдать heroku

Теперь, когда вы зальёте что-то в ветку master, heroku будет подтягивать изменения и обновлять сайт.

На данный момент heroku не успел еще ничего стянуть, поэтому воспользуемся кнопкой ручного обновления

Ручной деплой

После того как сборка завершится (процесс можно отслеживать во вкладке Activity), нажимаем на кнопку Open app

Кнопка запуска проекта

Откроется новая вкладка, и мы снова увидим стартовую страницу нашего сайта, но уже на хостинге heroku. Сайт готов к продакшну, осталось только купить домен. Купить можно тут.
Поменять во вкладке Settings, в секции Domains

Смена тестового домена

В этой же вкладке вы можете настраивать env переменные, устанавливать различные плагины и т.д. Советую изучить все вкладки, чтобы иметь полное представление о возможностях этого хостинга.

Я считаю, что цель статьи была выполнена и можно заканчивать. По всем остальным вопросам обращайтесь в официальную документацию.

Спасибо!