Digital Leadership & Soft Skills

Хостим TypeScript на Heroku: пошаговое руководство

Опубликовано by Pavel Nakonechnyy on в Web development.

Вместо вступления

Heroku — крупная облачная PaaS платформа, позволяющая разработчикам быстро и дешево развернуть свои проекты в действующем облаке. А начинающим программистам хватит и бесплатного тарифа, чтобы показать миру свои творения.

Но работа с Heroku может быть довольно запутанной и затруднительной для неопытного пользователя, поэтому мы и решили написать эту статью. Итак, обо всём по порядку.

Настройка Heroku CLI

Скачиваем и устанавливаем Heroku CLI — консольная утилита для деплоя на сервера Heroku.

Входим в аккаунт Heroku, вызвав из консоли команду

heroku login

Это откроет в вашем браузере по умолчанию страницу, где вам будет предложено войти в аккаунт и подтвердить доступ для Heroku CLI.

Создаем проект

Это можно сделать в web админке или же из консоли (из папки проекта), вызвав команду

heroku create [projectname]

Опциональный аргумент projectname — желаемое название проекта (должно быть уникальным для heroku), использующее маленькие латинские буквы и цифры. Если projectname не указан, то будет сгенерировано случайное название проекта.

Добавляем BuildPack

В данном руководстве мы будем использовать BuildPack от zidizei.

Если кратко, BuildPack — набор инструкций как Heroku следует запускать ваш проект, на какой машине, а также какие приложения для этого необходимы. Команда Heroku официально поддерживает билдпаки для наиболее популярных стеков: NodeJS, Java, PHP и других. Так как TypeScript — надстройка над NodeJS, требующая отдельной компиляции, ему требуется отдельный билдпак.

Добавляем buildpack'и из консоли:

heroku buildpacks:set heroku/nodejs
heroku buildpacks:add zidizei/typescript

Подключаем git

Деплой проекта на Heroku осуществляется при помощи функционала git для работы с удалёнными репозиториями.

Если в вашем проекте ещё нет git репозитория, то создадим его, вызвав из папки с проектом команду

git init

Теперь добавим удалённый git репозиторий heroku:

heroku git:remote -a smthone

В дальнейшем для деплоя каждый раз будем вызывать команды:

git add .
git commit -am "make it better"
git push heroku master

Вместо заключения

Вот так, за короткое время мы создали и разместили свой первый TypeScript проект на Heroku. В дальнейшем он будет доступен по адресу https://projectname.herokuapp.com, где projectname — название проекта, которое вы выбрали ранее. Бесплатные проекты выключаются после 30 минут простоя, при запросе после этого времени приложение будет автоматически запущено, но процесс компиляции TypeScript занимает некоторое время.

352