В этой статье учимся разворачивать фронтенд приложения на 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-проекта.

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

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

    Инициализируем Git-репозиторий. Если репозиторий уже есть, можно пропустить этот шаг.
git init

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

heroku git:remote -a <название приложения Heroku>
  1. Добавим пакет сборки nodejs, чтобы запустить сборку на удаленном сервере. Выполняем в терминале.
heroku buildpacks:add --index 1 heroku/nodejs
  1. В файле 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"
  }
  1. Результат сборки webpack — статические файлы в директории dist. Отдача файлов браузеру ложится на плечи nginx.

    Для этого добавляем пакет сборки heroku-buildpack-nginx в проект. Выполняем в терминале.
heroku buildpacks:add --index 2 heroku-community/nginx
  1. В корне проекта создаем директорию 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
	}
}
  1. В корне проекта создаем файл Procfile с содержимым:
web: bin/start-nginx-solo

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

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

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

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

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

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

Программирую и люблю молоко.
Гуманитарий в IT.


Intensa — производственное агентство для e‑commerce.

Мы помогаем торговым сетям увеличивать выручку интернет-магазинов за счет быстрой и отлаженной аутсорс-разработки.

Какие задачи мы решаем
You May Also Like

Как мы построили процесс разработки

Командная работа в среде разработчиков неизбежно влечет проблемы с прочтением чужого кода, его перетиранием, неподходящим по статусам таск-трекером. В статье рассказываем, как…