Как скачать с heroku проект

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

Ниже приведены основные шаги, необходимые для быстрого создания приложения Node.js с Express и его развёртывание на Heroku.

Шаг 1 — аккаунт на Heroku

Убедитесь, что у вас есть учётная запись Heroku.

Шаг 2 — установите Heroku Toolbelt

Скачайте и установите пакет Toolbelt для вашей ОС.

$ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

Шаг 3 — войдите в свой аккаунт

После установки Toolbelt вы должны получить доступ к своей учётной записи.

$ heroku login Enter your Heroku credentials. Email: adam@example.com Password: Could not find an existing public key. Would you like to generate one? [Yn] Generating new SSH public key. Uploading ssh public key /Users/adam/.ssh/id_rsa.pub

Вот и всё на этом. Пройдите через эти шаги и вы готовы для развёртывания кода!

Развёртывание первого приложения

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

Обновление package.json

На этом шаге мы должны добавить некоторый код в файл package.json, чтобы мы могли запустить приложение с удалённого сервера.

Прямо сейчас есть хороший шанс, что файл будет выглядеть следующим образом:

< "name": "application-name", "version": "0.0.1", "private": true, "scripts": < "start": "node ./bin/www" >, "dependencies": < "express": "~4.0.0", "static-favicon": "~1.0.0", "morgan": "~1.0.0", "cookie-parser": "~1.0.1", "body-parser": "~1.0.0", "debug": "~0.7.4", "jade": "~1.3.0" >>

В конце объекта «dependencies»: < . >вам нужно вставить запятую, чтобы мы могли добавить больше кода. Для начала добавим ключевое слово main:

"main": "app.js",

Обратили внимание на запятую? Она здесь потому, что мы собираемся добавить ещё кое-что. После этого добавьте в объект engines инструменты, которые нужны для запуска этого приложения:

"engines":

У вас должно быть что-то вроде следующего:

< "name": "application-name", "version": "0.0.1", "private": true, "scripts": < "start": "node ./bin/www" >, "dependencies": < "express": "~4.0.0", "static-favicon": "~1.0.0", "morgan": "~1.0.0", "cookie-parser": "~1.0.1", "body-parser": "~1.0.0", "debug": "~0.7.4", "jade": "~1.3.0" >, "main": "app.js", "engines": < "node": "0.10.26", "npm": "1.4.3" >>

Не забудьте Grunt + Bower

Если на данный момент у вас нет любого пакета Grunt или Bower в объекте dependenciess, нам надо их получить.

Вы можете добавить их вручную в файле package.json или напрямую:

$ npm install --save grunt $ npm install --save grunt-sass $ npm install --save bower

Вероятно у нас нет и возможности развернуть сервер для запуска задач Grunt. Для этого нам потребуется Grunt-CLI.

$ npm install --save grunt-cli

Прямо сейчас вы должны быть довольны.

Инструкции после установки

Когда делаем развёртывание кода на Heroku, мы должны запустить некоторые команды, в основном установить пакеты Bower и выполнить задачи Grunt. Чтобы сделать это, мы должны добавить инструкции внутри объекта scripts файла package.json.

Непосредственно поcле «start»: «node ./bin/www» добавьте:

"postinstall": "./node_modules/.bin/bower install && ./node_modules/.bin/grunt"

Теперь у нас есть всё что нужно, чтобы Heroku установил пакеты и запустил скрипты.

Добавление Procfile

Это файл, который необходим Heroku для запуска приложения.

$ touch Procfile

Добавьте в него следующий код:

web: npm start

Heroku будет использовать это для запуска приложения.

Создание хранилища Git

Важно сделать хранилище Git до создания сервера Heroku. ПОДОЖДИТЕ! Прежде, чем вы сойдёте с ума на Git, есть некоторые вещи, которые мы должны сделать.

У вас должен быть файл .gitignore в вашем хранилище на данный момент. Откройте его и убедитесь, что вы игнорируете все node_modules, все bower_components и что-то в диапазоне /stylesheets/*.css.

node_modules public/stylesheets/*.css bower_components

Отлично. Теперь вы можете сделать git init своего хранилища.

$ git add . $ git commit -m "initial commit"

Не обязательно в данное время делать это хранилище Github, но вы можете пожелать сделать его при создании реального приложения.

Развёртывание кода

Это довольно сложно. Убедитесь, что следуете данным командам:

$ heroku create $ git push heroku master

Радуйтесь

Если всё хорошо, вы должны увидеть, что вам вернулось нечто вроде этого:

http://.herokuapp.com/ deployed to Heroku

Переходите по этому адресу и радуйтесь!

Автор: Дейл Санде
Последнее изменение: 19.10.2015

• Node и npm
• Express, Node-фреймворк
• Установка и настройка Grunt
• Узнайте больше о Gulp
• Добавление libsass
• grunt-watch
• Bower для всего
• Bower + Grunt + Sass
• Добавление данных
• Развёртывание кода на Heroku
• Создание демонстрационной формы

Как развернуть проект на Heroku

O днажды, когда вы закончите разработку проекта, вам понадобится отправить его на продакшн. То есть, найти хостинг, залить туда файлы, добавить настройки, запустить сайт и так далее. Чтобы вы потом не бегали с горящей задницей, не зная что делать, я подготовил полноценную инструкцию, которая решит все эти проблемы.

Сегодня мы будем деплоить проект, написанный на Svelte, в облачную PaaS-платформу – Heroku. Будем называть её просто “хостинг”.

Начнем с создания базовой структуры, то есть с чистого листа.

За основу возьмем этот бойлерплейт: svelte-boilerplate

Склонируем проект в нужную папку.

git clone https://github.com/pankod/svelte-boilerplate.git svelte

Перейдем в директорию svelte и запустим команду для установки зависимостей

cd svelte && npm install

npm run start:dev

Если всё прошло успешно, сайт будет доступен по ссылке, откроем её в браузере.

Теперь попробуем собрать проект. По идее у нас должна создаться папка public, в которой будут html, css и js файлы, они будут сжаты и оптимизированы, их мы и будем использовать на продакшне.

Команда для сборки проекта

npm run build

Итог должен быть таким:

Подготовка сервера

Скажу сразу: запускать проект на хостинге через команду npm run start:dev плохая идея. Вот почему:

1. Файлы и картинки не будут оптимизированы и сжаты
2. Сервер для разработки не стабилен и не предназначен для больших нагрузок
3. Нет возможности добавить настройки для сервера
4. И куча других проблем.

Мы же сделаем всё как надо и запустим наш проект на простеньком Express.js сервере.

npm i express

В корне проекта создадим файл server.js, в него поместим код ниже

const express = require('express');
const app = express();
const path = require('path');const port = process.env.PORT || 5000;app.use(express.static('public'));app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
>);app.listen(port, () => 
console.log(`Server is running on: http://localhost:$`));

Главное – указать переменную с портом, чтобы Heroku мог подставить нужный порт при старте.

const port = process.env.PORT || 5000;

А так сервер очень простой, при запуске он всего лишь будет рендерить index.html из папки public. Проверим

node server.js

В консоли должно появиться сообщение об успешном старте

И если перейти по ссылке, мы увидим стартовую страницу сайта.

С файлами для продакшна разобрались, сервер подготовили, далее займемся настройкой Heroku CLI.

Установка и настройка Heroku CLI

Heroku CLI – это консольная утилита для удаленной работы с Heroku.

Начнем с установки. У них на сайте есть подробная инструкция . Идём читать.

Обычно раздела “Download and install” достаточно

Пробуем установить. Если всё нормально, наберём в консоли команду heroku. Результат должен быть примерно таким

> heroku
CLI to interact with HerokuVERSION 
heroku/7.49.0 linux-x64 node-v12.16.2USAGE 
$ heroku [COMMAND]COMMANDS 
access manage user access to apps 
addons tools and services for developing, extending, and operating your app 
apps manage apps on Heroku 
auth check 2fa status 
authorizations OAuth authorizations 
autocomplete display autocomplete installation instructions 
buildpacks scripts used to compile apps 
certs a topic for the ssl plugin 
ci run an application test suite on Heroku 
clients OAuth clients on the platform 
config environment variables of apps 
container Use containers to build and deploy Heroku apps 
domains custom domains for apps 
drains forward logs to syslog or HTTPS 
features add/remove app features 
git manage local git repository for app 
help display help for heroku 
keys add/remove account ssh keys 
labs add/remove experimental features 
local run Heroku app locally 
logs display recent log output 
maintenance enable/disable access to app 
members manage organization members 
notifications display notifications 
orgs manage organizations 
pg manage postgresql databases 
pipelines manage pipelines 
plugins list installed plugins 
ps Client tools for Heroku Exec 
psql open a psql shell to the database 
redis manage heroku redis instances 
regions list available regions for deployment 
releases display the releases for an app 
reviewapps manage reviewapps in pipelines 
run run a one-off process inside a Heroku dyno 
sessions OAuth sessions 
spaces manage heroku private spaces 
status status of the Heroku platform 
teams manage teams 
update update the Heroku CLI 
webhooks list webhooks on an app

Это говорит нам о том, что Heroku доступен и готов к работе. Попробуем с помощью него запустить наш сервер. Так же в корне проекта, где находится файл server.js, запустим команду

heroku local web

У меня результат такой. Сайт работает

> heroku local web
[WARN] ENOENT: no such file or directory, open 'Procfile'
[OKAY] package.json file found - trying 'npm start'
8:10:03 PM web.1 | > @pankod/svelte-boilerplate@0.0.1 start
8:10:03 PM web.1 | > node server.js
8:10:03 PM web.1 | Server is running on: http://localhost:5000

Далее в корне проекта нужно создать Procfile. Он поможет определить, как запустить приложение. Heroku в первую очередь будет искать именно его. Если в проекте отсутствует этот файл, heroku попытается запустить веб-сервер с помощью стартового скрипта (npm start) в вашем package.json.

Вставим кусок кода в Procfile

web: node server.js

И попытаемся снова запустить сайт

На этот раз никаких ошибок в консоли нет.

Ну и последним шагом добавим в package.json команду для сборки проекта на стороне heroku

"heroku-postbuild": "npm run build"

Подготовка проекта

Ну вот мы и подошли к самому главному – будем отправлять всё, что получилось, на хостинг heroku.

Для этого есть два способа:

1. Залить проект в репозиторий heroku, и он уже сам добавит нужные настройки
2. Залить на github и в настройках heroku указать ссылку

Мы пойдем по второму пути.

Надеюсь, рассказывать, как заливать проект на github, не нужно?
Я залил сюда.

Если вам всё же интересно почитать про первый способ, вот ссылка. Он особо ничем не отличается, разве что тем, что код будет храниться на стороне heroku.

Возможно, у вас нет аккаунта на github, и этот способ окажется даже проще. Пробуйте.

Настройка хостинга

Когда залили проект на github, переходим в дашборду heroku , чтобы создать новый проект.

На этой странице будут находиться все ваши проекты. Чтобы создать новый, сверху справа нажмите на кнопку New, далее на Create new app. Откроется новая страница, на которой нужно ввести данные о новом проекте.

После завершения проект будет создан и нас перенаправит во вкладку Deploy. Там сразу перейдем в настройки github

Находим нужный нам репозиторий и коннектим

Далее выберем ветку, за которой будет наблюдать heroku, и нажмём на большую тёмную кнопку.

Теперь, когда вы зальёте что-то в ветку master, heroku будет подтягивать изменения и обновлять сайт.

На данный момент heroku не успел еще ничего стянуть, поэтому воспользуемся кнопкой ручного обновления

После того как сборка завершится (процесс можно отслеживать во вкладке Activity), нажимаем на кнопку Open app

Откроется новая вкладка, и мы снова увидим стартовую страницу нашего сайта, но уже на хостинге heroku. Сайт готов к продакшну, осталось только купить домен. Купить можно тут.
Поменять во вкладке Settings, в секции Domains

В этой же вкладке вы можете настраивать env переменные, устанавливать различные плагины и т.д. Советую изучить все вкладки, чтобы иметь полное представление о возможностях этого хостинга.

Я считаю, что цель статьи была выполнена и можно заканчивать. По всем остальным вопросам обращайтесь в официальную документацию.

Как скачать с heroku проект

Создайте учетную запись в Heroku с помощью веб-браузера, будет достаточно бесплатного аккаунта hobby-dev . Затем войдите в аккаунт и создайте новое приложение с помощью кнопки New в верхней части страницы.

Задайте уникальное имя приложения (либо оставьте поле пустым, чтобы имя назначилось автоматически) и выберите подходящее геоположение сервера. Вы зарегистрировали приложение, например morning-beach-4895 , это будет название приложения Heroku.

Сначала вас переадресует на вкладку Deploy. Выберите там метод развертывания Heroku Git.

Командная строка Heroku (CLI)

• Установите на компьютер программное обеспечение Heroku CLI.
• Перейдите в папку проекта CUBA. В дальнейшем для этой папки будет использоваться переменная $PROJECT_FOLDER .
• Откройте командную строку в $PROJECT_FOLDER и наберите команду:

heroku login

heroku plugins:install heroku-cli-deploy

Connect everything. Build anything.

Netlify is the modern development platform for Enterprises to realize the speed, agility and performance of a scalable, composable web architecture.

Explore platform Request demo

Netlify Composable Web Platform

Streamlined orchestration, simplified and unified workflows, and real-time updates across infrastructure, workflows, websites and teams — all supported by Enterprise-grade security, services, and a world-class partner ecosystem. Explore platform