Развертывание фронтенд проекта на 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 — основной репозиторий в проекте, рекомендуем использовать готовую интеграцию с удаленным репозиторием.

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

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

Установка Heroku CLI

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

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

Разработка и развитие интернет-магазинов