В этой статье учимся разворачивать фронтенд приложения на 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.
Ниже — пошаговые действия, чтобы настроить деплой продакшен-сборки через HerokuCLI.
- Привязываем проект к приложению Heroku. Для этого используем базовую интеграцию через Heroku Git.
Инициализируем Git-репозиторий. Если репозиторий уже есть, можно пропустить этот шаг.
git init
Подключаем наш репозиторий к Heroku.
heroku git:remote -a <название приложения Heroku>
- Добавим пакет сборки nodejs, чтобы запустить сборку на удаленном сервере. Выполняем в терминале.
heroku buildpacks:add --index 1 heroku/nodejs
- В файле 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"
}
- Результат сборки webpack — статические файлы в директории dist. Отдача файлов браузеру ложится на плечи nginx.
Для этого добавляем пакет сборки heroku-buildpack-nginx в проект. Выполняем в терминале.
heroku buildpacks:add --index 2 heroku-community/nginx
- В корне проекта создаем директорию 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
}
}
- В корне проекта создаем файл Procfile с содержимым:
web: bin/start-nginx-solo
Как задеплоить на Heroku
Теперь закоммитим и отправим наши изменения в Heroku — после этого он начнет сборку.
git add .
git commit -m 'First deploy'
git push heroku master
В терминале можно увидеть процесс сборки приложения. Если все пройдет хорошо, появится ссылка на наш проект. Кликаем и проверяем результат в браузере.
Отлично, все получилось!
Если Github — основной репозиторий в проекте, рекомендуем использовать готовую интеграцию с удаленным репозиторием.
Intensa — производственное агентство для e‑commerce.
Начать проект