Многие отрекаются устанавливать простые статические сайты на платформу облачного
хостинга Heroku. Сервис отказывается отдавать статику. Чтобы обойти это несовершенство проекта, приходится писать дополнительные приложения. Но оказывается не все так сложно, как кажется!
Для установки используем Node.js
Node.js поможет открывать статический сайт! Программа работает на сервере, добавляет возможность JavaScript взаимодействовать с вводом/выводом. При одномоментном подключении к серверу множества пользователей, Node работает асинхронно - выбирает приоритеты, грамотно распределяет ресурсы.
Эта статья не претендует на руководство к действию, просто я делюсь личным успешным опытом бесплатного размещения простого статического приложения на Хероку. Для достижения успеха пришлось пересмотреть множество материалов в Интернете чтобы осуществить задумку. Выкладываю в глобальную сеть как можно подробнее свои наработки. Может кому-нибудь это поможет.
Потребуется установить Node.js на свою локальную машину и написать только два файла: web.js и package.json.
Код web.js:
var express = require('express');
var app = express();
var path = require('path');
app.use(express.static(path.join(process.cwd(), 'source')));
console.log(process.env.PORT || 5000);
app.listen(process.env.PORT || 5000);
Оба файла необходимо расположить в корень своего приложения. Добавить обязательный хероковский профайл Procfile следующего содержания:
web: node web.js
Этот файл Хероку ищет, чтобы получить инструкции как запускать приложение.
В файле web.js 'source' – директория с файлами и каталогами нашего статического сайта. Поэтому потребуется создать каталог source и там расположить файлы нашего проекта.
Пошаговая инструкция установки сайта
Подробно опишу, как я устанавливал свой статический сайт на Heroku. Мой проект состоит из одной главной страницы index.html; папок с картинками, шрифтами, стилями, js-файлами. Этот сайт
ninja-adaptive – результат адаптивной верстки макета по домашнему заданию 11-го урока бесплатного курса по верстке «Ninja_FrontEnd».
Предполагается наличие регистрации и логина на сайте Heroku.com.
Инструкция по созданию репозитория на локальном компьютере
Хероку производит развертывание приложения средствами управления версиями Git. Поэтому я создал репозиторий git на жестком диске компьютера.
Создал папку ninja-adaptive на диске D.
Создал пустой репозиторий в системе управления версиями GitHub
https://github.com/Valera8/ninja-adaptive.
В командной строке программы GitBash (оболочке в распределенной системе управления версиями Git для windows) набрал следующие команды для создания локального репозитория, а заодно, чтобы загрузить в дальнейшем приложение на GitHub:
перешел в директорию;
$ cd D:\ninja-adaptive
клонировал пустой репозиторий с https://github.com/Valera8/ninja-adaptive на локальный жесткий диск
$ git commit -m "использование node.js для статики"
Отправил данные на удаленный сервер GitHub в репозиторий https://github.com/Valera8/ninja-adaptive.
$ git push origin master
В этой же программе GitBash попытался залогиниться в heroku, но не успешно.
Полная распечатка этого документа с вышеперечисленными командами и ответами:
Head@DESKTOP-5 MINGW32 ~
$ cd D:\ninja-adaptive
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive
$ git clone https://github.com/Valera8/ninja-adaptive.git
Cloning into 'ninja-adaptive'...
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 6 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (6/6), done.
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive
$ cd D:\ninja-adaptive/ninja-adaptive
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ dir
README.md
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.
Untracked files:
(use "git add <file>..." to include in what will be committed)
Procfile
package.json
source/
web.js
nothing added to commit but untracked files present (use "git add" to track)
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ git add .
warning: LF will be replaced by CRLF in source/css/font-awesome.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/css/slick-theme.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/css/slick.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/fonts/font-awesome/fontawesome-webfont.svg.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/js/.idea/js.iml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/js/.idea/misc.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/js/.idea/modules.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/js/.idea/vcs.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/js/.idea/workspace.xml.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in source/js/slick.js.
The file will have its original line endings in your working directory.
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ git status
On branch master
Your branch is up to date with 'origin/master'.
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
new file: Procfile
new file: package.json
new file: source/css/font-awesome.css
new file: source/css/reset.css
new file: source/css/responsive.css
new file: source/css/slick-theme.css
new file: source/css/slick.css
new file: source/css/styles.css
new file: source/fonts/font-awesome/FontAwesome.otf
new file: source/fonts/font-awesome/fontawesome-webfont.eot
new file: source/fonts/font-awesome/fontawesome-webfont.svg
new file: source/fonts/font-awesome/fontawesome-webfont.ttf
new file: source/fonts/font-awesome/fontawesome-webfont.woff
new file: source/fonts/font-awesome/fontawesome-webfont.woff2
new file: source/images/btn_left.png
new file: source/images/btn_right.png
new file: source/images/clock.png
new file: source/images/gift.png
new file: source/images/img1.png
new file: source/images/logo.png
new file: source/images/print.png
new file: source/images/tv.png
new file: source/index.html
new file: source/js/.idea/.name
new file: source/js/.idea/js.iml
new file: source/js/.idea/misc.xml
new file: source/js/.idea/modules.xml
new file: source/js/.idea/vcs.xml
new file: source/js/.idea/workspace.xml
new file: source/js/jquery.js
new file: source/js/main.js
new file: source/js/slick.js
new file: source/js/slicknav.js
new file: source/robots.txt
new file: web.js
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ git commit -m "использование node.js для статики"
[master 3006e34] использование node.js для статики
35 files changed, 17117 insertions(+)
create mode 100644
Procfile
create mode 100644 package.json
create mode 100644 source/css/font-awesome.css
create mode 100644 source/css/reset.css
create mode 100644 source/css/responsive.css
create mode 100644 source/css/slick-theme.css
create mode 100644 source/css/slick.css
create mode 100644 source/css/styles.css
create mode 100644 source/fonts/font-awesome/FontAwesome.otf
create mode 100644 source/fonts/font-awesome/fontawesome-webfont.eot
create mode 100644 source/fonts/font-awesome/fontawesome-webfont.svg
create mode 100644 source/fonts/font-awesome/fontawesome-webfont.ttf
create mode 100644 source/fonts/font-awesome/fontawesome-webfont.woff
create mode 100644 source/fonts/font-awesome/fontawesome-webfont.woff2
create mode 100644 source/images/btn_left.png
create mode 100644 source/images/btn_right.png
create mode 100644 source/images/clock.png
create mode 100644 source/images/gift.png
create mode 100644 source/images/img1.png
create mode 100644 source/images/logo.png
create mode 100644 source/images/print.png
create mode 100644 source/images/tv.png
create mode 100644 source/index.html
create mode 100644 source/js/.idea/.name
create mode 100644 source/js/.idea/js.iml
create mode 100644 source/js/.idea/misc.xml
create mode 100644 source/js/.idea/modules.xml
create mode 100644 source/js/.idea/vcs.xml
create mode 100644 source/js/.idea/workspace.xml
create mode 100644 source/js/jquery.js
create mode 100644 source/js/main.js
create mode 100644 source/js/slick.js
create mode 100644 source/js/slicknav.js
create mode 100644 source/robots.txt
create mode 100644 web.js
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ git push origin master
Counting objects: 44, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (41/41), done.
Writing objects: 100% (44/44), 1.02 MiB | 103.00 KiB/s, done.
Total 44 (delta 0), reused 0 (delta 0)
To https://github.com/Valera8/ninja-adaptive.git
649c7ee..3006e34 master -> master
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
$ heroku login
Enter your Heroku credentials:
Email: ????@???.com
! Login is currently incompatible with git bash/Cygwin/MinGW
Head@DESKTOP-5 MINGW32 /d/ninja-adaptive/ninja-adaptive (master)
В связи с этой неудачей, я был вынужден для дальнейшей работы перейти в командную строку Windows от имени Администратора.
Загрузка сайта на Heroku
Далее установку статичного сайта на облачный ресурс я продолжил с консоли операционной системы от имени администратора.
Прежде всего, перешел в папку локального репозитория
cd /D D:\ninja-adaptive\ninja-adaptive
Как видно, в этой консоли применяется несколько иная команда. Необходимо прописать символы прямой слеш и D.
Авторизовался в Хероку, указав Email и пароль
heroku login
Открыл новое приложение на облачном ресурсе
heroku create
При этом ресурс предоставил рандомное название sheltered-stream-17367.
Отправил данные из папки на компьютере на удаленный сервер
git push heroku master
Успешно открыл главную страницу моего приложения index.html в браузере
heroku open
Изменение названия сайта
На этом этапе установку проекта можно было бы закончить, но решил поменять бессмысленное название sheltered-stream-17367 сайта на осмысленное и выразительное ninja-adaptive.
Хостинг позволяет переименовать приложение в любое время с помощью команды heroku apps:rename из командной строки.
Команда
heroku apps:rename ninja-adaptive.
(При условии нахождения в локальном репозитории, т.е. выполнены пункты 1 и 2 предыдущего абзаца. Можно изменить название сайта из репозитория Git, включив команду -- app:
При работе из репозитория Git данные на удаленном облачном хостинге изменятся автоматически.
Однако, как в моем случае - используя локальный репозиторий, требуется это сделать вручную. Надо запустить следующие команды, чтобы обновить данные на удаленном хостинге:
git remote rm heroku.
Затем
heroku git:remote -a ninja-adaptive
Заключение
Работа по установке статичного сайта на хостинг закончена. Он доступен по адресу https://ninja-adaptive.herokuapp.com/. Heroku удобен для
бесплатного размещения простой статики в Интернет.