В тази публикация ще създадем личен уебсайт с помощта на релси и ще го разположим в Heroku. Heroku е платформа за облачни приложения - нов начин за изграждане и внедряване на уеб приложения. Най-хубавото при Heroku е, че не е нужно да плащате за хостинг на основни уеб приложения, тъй като Heroku ги е категоризирал като безплатни. Ще изградим еднопосочно приложение за релси и това ще бъде статичен уебсайт, който може да се използва като портфолио.
По-долу е моментната снимка на приложението за релси (разположено на Heroku тук )
Нека започнем със създаването на това приложение Rails. Предполагам, че вече сте инсталирали Ruby и Rails. Уверете се, че имате Ruby 2.0 и Rails 4.2.2. Можете да проверите версията от командния ред.
Забележка: Ще използваме Ruby 2.0 и Rails 4.2.2. Ако имате някои различни версии на Ruby and Rails, някои от стъпките, показани в тази публикация, може да не работят за вас.
Създаване на проекта:
Ще назовем нашия проект като уебсайт. За да създадете проекта, използвайте командата Rails new website
Rails автоматично ще генерира всички файлове и също така ще инсталира всички необходими скъпоценни камъни, като изпълни автоматично инсталирания пакет за изпълнение, както е показано по-долу
Сега ще видите папка на уебсайт под вашето устройство C: (мястото, откъдето изпълнихме Rails new command command). Нека отворим папката на уебсайта в някаква IDE. Имам IDE на скоби от Adobe. Можете да използвате всяка друга, тъй като няма значение.
Структура на проекта:
Генерираната структура на проекта ще изглежда по-долу
Въпреки че не сме написали код, можете да стартирате приложението на уебсайта в момента. За да стартирате приложението за уебсайт, изпълнете командата Rails s от папката на уебсайта, както е показано по-долу
Както можете да видите в горната снимка, че приложението ни за уебсайт е внедрено вhttp: // localhost: 3000
Ще можете да видите екрана по-долу за достъп до URL адресаhttp: // localhost: 3000
Но ние искаме да покажем главната страница на нашето приложение за достъп до URL адресаhttp: // localhost: 3000 /.За това нека създадем страница index.html под публичната папка на нашия уебсайт проект.
Забележка: Rails автоматично ще обслужва страницата index.html при достъп до основния URL адресhttp: // localhost: 3000
За момента имаме само един ред в страницата index.html.
Нека да осъществим достъп до основния URL адресhttp: // localhost: 3000
Сега, нека вложим малко живот в нашата страница index.html, като добавим няколко изображения - JS и страхотен CSS. Ще използваме тема в сивата скала от стартовия бустърстрап.
Тема за начален старт на Grayscale Start -
По-долу е моментната снимка на стартовата тема за стартиране на сивата скала, която ще използваме. Ние ще персонализираме тази тема, за да отговорим на нашите изисквания.
Можете да изтеглите тази тема от http://startbootstrap.com/template-overviews/grayscale/
Изтеглете сивата скала и копирайте CSS, страхотни за шрифтове, шрифтове, img, JS и index.html в публичната директория на проекта за уебсайт. По-долу е моментната снимка на проекта след добавяне на CSS, JS, шрифтове, папка с изображения и страница index.html под публичната директория на проекта на уебсайта.
Нека да стартираме проекта ни за уебсайт сега:
При стартирането на проекта ще ви бъде представена добре изглеждаща страница с теми в сивата скала.
php print_r масив
Ще модифицираме страницата index.html (под публичната директория на уебсайт проекта), за да й придадем професионален вид.
По-долу е моментната снимка на проекта на уебсайта след извършване на промените в страницата index.html. Току-що сме променили изображенията и сме редактирали част от текста, за да го направим специфичен за дадено лице.
Можете да модифицирате index.html и grayscale.CSS както искате. Сега сме готови да внедрим приложението си за уебсайт в Heroku.
Бутане на кода в Github:
Преди да разгърнем приложението в Heroku, трябва да изпратим нашия код към отдалечено хранилище на Github. За това ви е необходим акаунт в Github. Ако нямате акаунт в Github, отидете и създайте такъв на адрес www.github.com .
Също така трябва да инсталирате Github на вашия Windows. Изтеглете Github за Windows от https://windows.github.com/ .
След като изтеглите и инсталирате Github на вашата машина, отворете приложението Github и конфигурирайте вашите идентификационни данни за Github и изберете черупка Git Bash като черупка по подразбиране (можете да изберете всяка друга опция, както искате) и след това запазете промените.
Трябва да създадете хранилище на Github, където ще запазим проекта на нашия уебсайт дистанционно. За да създадете хранилище, влезте в Github и кликнете върху новата опция за хранилище, показана в зеления бутон.
Дайте име на вашето хранилище (в този случай ние го нарекохме railtoheroku) и кликнете върху връзката за създаване на хранилище, както е показано по-долу.
Github ще предостави отдалечения URL адрес ( https://github.com/eMahtab/railtoheroku.git в този случай) за хранилището на railtoheroku, което ще е необходимо, докато премествате кода от локалната машина в Github.
Сега сме готови да изпратим кода на нашия уебсайт към Github. Следвайте стъпките по-долу, за да изпратите кода към Github.
Отворете Git shell и използвайте командата Git init, за да инициализирате директорията на уебсайта, както е показано по-долу:
Сега добавете всички файлове в директорията на уебсайта под контрол на версиите, като изпълните Git add.
Фиксиране на всички файлове чрез изпълнение на Git commit –m “Final commit”
Добавете отдалеченото хранилище, както е показано по-долу:
Сега последната стъпка, която всъщност ще изтласка кода към хранилището на Github:
Приключихме с Github. Следващата част е действителното внедряване на приложението в Heroku.
Разполагане на приложението в Heroku:
Създайте акаунт в Heroku на адрес https://www.heroku.com/
Забележка : Трябва да направим някои промени за разполагане на приложението в Heroku. Heroku не поддържа SqLite 3, вместо това има база данни PostgreSQL. Така че трябва да премахнем зависимостта на sqlite3 от gemfile. Heroku изисква скъпоценен камък rails_12factor, който се използва от Heroku за обслужване на статични активи като изображения и таблици със стилове. Двете промени, изисквани в Gemfile, са обобщени по-долу:
Премахнете реда gem ‘sqlite3’ от Gemfile
Добавете следните редове към Gemfile
група: разработка,: тест направете #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
Нека проверим дали всичко работи добре, след като направим промените в Gemfile. Запазете Gemfile и стартирайте инсталиране на пакет със специален флаг (- без производство), за да се предотврати локалното инсталиране на произволни скъпоценни камъни.
Нека да извършим промените, направени в Gemfile, в отдалечено хранилище в Github:
Натиснете промените в отдалеченото хранилище на Github:
Създаване на ново приложение в Heroku:
Влезте в Heroku и създайте ново приложение. Назовах приложението си railtoheroku. Можете да го кръстите каквото искате. Кликнете върху създаване на приложение, за да създадете име на приложение.
Свързване на хранилището на Github с приложението Heroku:
Следващата стъпка е да свържете вашето хранилище на Github с Heroku.
По-долу сме свързали нашето хранилище на Github railtoheroku
След като свържем нашето хранилище на Github към Heroku, ние сме готови да внедрим нашето приложение. За да разположите приложението, превъртете надолу до опцията за ръчно разполагане и кликнете върху опцията за разгръщане на клон.
Внедряване на приложението:
След като щракнете върху Deploy Branch, Heroku ще започне да инсталира скъпоценните камъни от Gemfile в производството:
След като всички скъпоценни камъни бъдат инсталирани и приложението е разположено, ще видите поздравителното съобщение от Heroku, казващо: „Вашето приложение е успешно внедрено.“
За да видите вашето внедрено приложение, просто щракнете върху бутона за изглед и ще можете да видите приложението си разположено успешно.
Ако срещнете някакъв проблем, докато следвате някоя от горните стъпки, моля, коментирайте по-долу. Надявам се, че тази публикация ви хареса.
Имате въпрос към нас? Моля, споменете го в раздела за коментари и ние ще се свържем с вас.
Подобни публикации:
Анализиране на XML файлове с помощта на SAX Parser