Pavel Nakonechnyy

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

Published (updated: ) in 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 занимает некоторое время.

Вас также может заинтересовать