Установка статического сайта на хостинг Heroku

Опубликовано: 2017-07-31

Многие отрекаются устанавливать простые статические сайты на платформу облачного хостинга 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);

Код package.json:

Развернуть/свернуть код


{
"name": "node-example",
"version": "0.0.1",
"dependencies": {
"express": "3.1.x"
},
"engines": {
"node": "0.10.x",
"npm": "1.2.x"
}
}

Оба файла необходимо расположить в корень своего приложения. Добавить обязательный хероковский профайл 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:
1. перешел в директорию;
  
  $ cd D:\ninja-adaptive
2. клонировал пустой репозиторий с https://github.com/Valera8/ninja-adaptive на локальный жесткий диск
  
  $ git clone https://github.com/Valera8/ninja-adaptive.git
3. перешел в пустой локальный репозиторий
  
  $ cd D:\ninja-adaptive
4. вручную в этой папке разместил приготовленные файлы. Структуру можно посмотреть https://github.com/Valera8/ninja-adaptive.
Загрузил изменения, произведенные в проекте.

$ git add .
Закрепил эти изменения с добавлением комментария

$ 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:

heroku apps:rename \новое имя\ --app \старое имя\).
При работе из репозитория Git данные на удаленном облачном хостинге изменятся автоматически.

Однако, как в моем случае - используя локальный репозиторий, требуется это сделать вручную. Надо запустить следующие команды, чтобы обновить данные на удаленном хостинге:

git remote rm heroku.
Затем

heroku git:remote -a ninja-adaptive

Заключение

Работа по установке статичного сайта на хостинг закончена. Он доступен по адресу https://ninja-adaptive.herokuapp.com/. Heroku удобен для бесплатного размещения простой статики в Интернет.

Распечатка команд и ответов в консоли:

Развернуть/свернуть код


        Microsoft Windows [Version 10.0.14393]
        (c) Корпорация Майкрософт (Microsoft Corporation), 2016. Все права защищены.

        C:\Windows\system32>cd /D D:\ninja-adaptive\ninja-adaptive

        D:\ninja-adaptive\ninja-adaptive>heroku login
        Enter your Heroku credentials:
        Email: ????@???.com
        Password: ***********
        === ????????????

        D:\ninja-adaptive\ninja-adaptive>heroku create
        Creating app... done, ⬢ sheltered-stream-17367
        https://sheltered-stream-17367.herokuapp.com/ | https://git.heroku.com/sheltered-stream-17367.git

        D:\ninja-adaptive\ninja-adaptive>git push heroku master
        Counting objects: 50, done.
        Delta compression using up to 2 threads.
        Compressing objects: 100% (44/44), done.
        Writing objects: 100% (50/50), 1.03 MiB | 106.00 KiB/s, done.
        Total 50 (delta 0), reused 0 (delta 0)
        remote: Compressing source files... done.
        remote: Building source:
        remote:
        remote: -----> Node.js app detected
        remote:
        remote: -----> Creating runtime environment
        remote:
        remote:        NPM_CONFIG_LOGLEVEL=error
        remote:        NODE_VERBOSE=false
        remote:        NODE_ENV=production
        remote:        NODE_MODULES_CACHE=true
        remote:
        remote: -----> Installing binaries
        remote:        engines.node (package.json):  0.10.x
        remote:        engines.npm (package.json):   1.2.x
        remote:
        remote:        Resolving node version 0.10.x...
        remote:        Downloading and installing node 0.10.48...
        remote:        Bootstrapping npm 1.2.x (replacing 2.15.1)...
        remote:        npm 1.2.8000 installed
        remote:
        remote: -----> Restoring cache
        remote:        Skipping cache restore (not-found)
        remote:
        remote: -----> Building dependencies
        remote:        Installing node modules (package.json)
        remote:        express@3.1.2 node_modules/express
        remote:        ├── methods@0.0.1
        remote:        ├── fresh@0.1.0
        remote:        ├── buffer-crc32@0.2.13
        remote:        ├── range-parser@0.0.4
        remote:        ├── cookie-signature@1.0.0
        remote:        ├── cookie@0.0.5
        remote:        ├── commander@0.6.1
        remote:        ├── mkdirp@0.3.5
        remote:        ├── debug@3.1.0 (ms@2.0.0)
        remote:        ├── send@0.1.0 (mime@1.2.6)
        remote:        └── connect@2.7.5 (pause@0.0.1, bytes@0.2.0, buffer-crc32@0.1.1, formidable@1.0.11, qs@0.5.1)
        remote:
        remote: -----> Caching build
        remote:        Clearing previous node cache
        remote:        Saving 2 cacheDirectories (default):
        remote:        - node_modules
        remote:        - bower_components (nothing to cache)
        remote:
        remote: -----> Pruning devDependencies
        remote:
        remote: -----> Build succeeded!
        remote: -----> Discovering process types
        remote:        Procfile declares types -> web
        remote:
        remote: -----> Compressing...
        remote:        Done: 7.2M
        remote: -----> Launching...
        remote:        Released v3
        remote:        https://sheltered-stream-17367.herokuapp.com/ deployed to Heroku
        remote:
        remote: Verifying deploy... done.
        To https://git.heroku.com/sheltered-stream-17367.git
        * [new branch]      master -> master

        D:\ninja-adaptive\ninja-adaptive>heroku open

        D:\ninja-adaptive\ninja-adaptive>heroku apps:rename ninja-adaptive
        Renaming sheltered-stream-17367 to ninja-adaptive... done
        https://ninja-adaptive.herokuapp.com/ | https://git.heroku.com/ninja-adaptive.git

        Git remote heroku updated
        !    Don't forget to update git remotes for all other local checkouts of the app.
        D:\ninja-adaptive\ninja-adaptive>git remote rm heroku

        D:\ninja-adaptive\ninja-adaptive>heroku git:remote -a ninja-adaptive
        set git remote heroku to https://git.heroku.com/ninja-adaptive.git

	Зарегистрироваться
Имя:
Электронная почта:
Текст комментария:
Введите код с картинки:

Установка статического сайта на хостинг Heroku

Для установки используем Node.js

Пошаговая инструкция установки сайта

Инструкция по созданию репозитория на локальном компьютере

Загрузка сайта на Heroku

Изменение названия сайта

Заключение

Оставить свой комментарий: