Развертывание фронтенд проекта на Heroku

В этой статье учимся разворачивать фронтенд приложения на PaaS-платформе Heroku.

Heroku — облачная платформа для размещения веб-приложений. Легко масштабируется, интегрируется с docker и github из коробки, поддерживает несколько языков программирования — Nodejs, PHP, Python, Ruby, Go.

Важная деталь: чтобы развернуть пример из этой статьи, не нужно тратить деньги и даже привязывать кредитку. У Heroku есть тариф Free, который позволяет работать с сервисом бесплатно.

В компании обычно используем Heroku, чтобы создавать демонстрационные стенды на этапе разработки фронтенд проектов, и для внутренних задач по автоматизации рабочих процессов.

Регистрация учетной записи

Это первое, с чего стоит начать. Вот сервис https://signup.heroku.com/

После авторизации видим дашборд — в нем создаем новое приложение.

Указываем имя приложения и выбираем регион — мы рекомендуем Европу, так как ответ сервера для России меньше.

Установка Heroku CLI

Теперь устанавливаем приложение Heroku CLI на компьютер. Далее будем взаимодействовать с сервисом через терминал.

Приложение для своей операционной системы можно найти на сайте Heroku

После успешной установки нужно авторизоваться в сервисе. Для этого открываем терминал и вводим следующую команду:

heroku login

Появляется сообщение.

Далее нажимаем Enter в терминале. Откроется окно браузера — в нем нужно авторизоваться.

После авторизации закрываем вкладку браузера и возвращаемся в терминал. Видим подобное сообщение.

Значит, все хорошо, — мы авторизовались под своей учетной записью и можем взаимодействовать с сервисом из терминала.

Настройка проекта

Чтобы показать процесс интеграции c Heroku, решили выбрать шаблон-проект, в котором реализована сборка фронтенд через webpack5.

Полный код webpack-проекта.

Ниже — пошаговые действия, чтобы настроить деплой продакшен-сборки через HerokuCL.

1. Привязываем проект к приложению Heroku. Для этого используем базовую интеграцию через Heroku Git. Инициализируем Git-репозиторий. Если репозиторий уже есть, можно пропустить этот шаг.

git init

Подключаем наш репозиторий к Heroku.

heroku git: remote -a <название приложения Heroku>

2. Добавим пакет сборки nodejs, чтобы запустить сборку на удаленном сервере. Выполняем в терминале.

heroku buildpacks: add --index 1 heroku/nodejs

3. В файле package.json в блок scripts добавляем две новые команды.

«start»: «webpack --progress --hide-modules --mode production»,
«heroku-prebuild»: «npm install --dev»

Общий вид блока scripts:

«scripts»: {
 «build»: «webpack --mode=production --node-env=production»,
 «build:dev»: «webpack --mode=development»,
 «build:prod»: «webpack --mode=production --node-env=production»,
 «watch»: «webpack --watch»,
 «serve»: «webpack serve»
 «start»: «webpack --progress --hide-modules --mode production»
 «heroku-prebuild»: «npm install --dev»
 }

4. Результат сборки webpack — статические файлы в директории dist . Отдача файлов браузеру ложится на плечи nginx.

Для этого добавляем пакет сборки heroku-buildpack-nginx в проект. Выполняем в терминале.

heroku buildpacks: add --index 2 heroku-community/nginx

5. В корне проекта создаем директорию config . Размещаем здесь файл nginx.conf.erb с таким содержимым:

daemon off;
worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;

events {
 use epoll;
 accept_mutex on;
 worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
}

http {
 gzip on;
 gzip_comp_level 2;
 gzip_min_length 512;
 gzip_proxied any; # Heroku router sends Via header

 server_tokens off;

 log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
 access_log <%= ENV['NGINX_ACCESS_LOG_PATH'] || 'logs/nginx/access.log' %> l2met;
 error_log <%= ENV['NGINX_ERROR_LOG_PATH'] || 'logs/nginx/error.log' %>;

 include mime.types;
 default_type application/octet-stream;
 sendfile on;

 client_body_timeout <%= ENV['NGINX_CLIENT_BODY_TIMEOUT'] || 5 %>;

 server {
 listen <%= ENV["PORT"] %>;
 server_name _;
 keepalive_timeout 5;
 client_max_body_size <%= ENV['NGINX_CLIENT_MAX_BODY_SIZE'] || 1 %>M;

 root /app/dist; # path to your app
 }
}

6. В корне проекта создаем файл Procfile с содержимым:

web: bin/start-nginx-solo

Как задеплоить на Heroku

Теперь закоммитим и отправим наши изменения в Heroku — после этого он начнет сборку.

git add .
git commit -m 'First deploy'
git push heroku master

В терминале можно увидеть процесс сборки приложения. Если все пройдет хорошо, появится ссылка на наш проект. Кликаем и проверяем результат в браузере.

Отлично, все получилось!

Если Github — основной репозиторий в проекте, рекомендуем использовать готовую интеграцию с удаленным репозиторием.