Tässä viestissä luomme henkilökohtaisen verkkosivuston kiskoilla ja asennamme sen Herokulle. Heroku on pilvisovellusalusta - uusi tapa rakentaa ja ottaa käyttöön verkkosovelluksia. Parasta Herokussa on, että sinun ei tarvitse maksaa perusverkkosovellusten isännöinnistä, koska Heroku on luokitellut ne ilmaiseksi. Rakennamme yhden sivun kiskosovelluksen ja se on staattinen verkkosivusto, jota voidaan käyttää portfoliona.
Alla on tilannekuva kiskosovelluksesta (otettu käyttöön Herokulle tässä )
Aloitetaan tämän Rails-sovelluksen luominen. Oletan, että olet jo asentanut Ruby and Railsin. Varmista, että sinulla on Ruby 2.0 ja Rails 4.2.2. Voit tarkistaa version komentokehotteesta.
Huomaa: Käytämme Ruby 2.0 ja Rails 4.2.2. Jos sinulla on joitain eri versioita Ruby and Rails -sovelluksesta, jotkut tässä viestissä esitetyt vaiheet eivät välttämättä toimi sinulle.
Projektin luominen:
Nimemme projektimme verkkosivustoksi. Luo projekti käyttämällä komentoa Rails new website
Rails luo automaattisesti kaikki tiedostot ja asentaa kaikki tarvittavat jalokivet suorittamalla automaattisesti asennetun ajopaketin alla olevan kuvan mukaisesti
Nyt näet verkkosivustokansi C: -aseman alla (sijainti, josta suoritimme Rails new website -komennon). Avataan verkkosivustokansio jossakin IDE: ssä. Minulla on Adoben ID-suluet. Voit käyttää mitä tahansa muuta, sillä sillä ei ole merkitystä.
Projektin rakenne:
Luotu projektirakenne näyttää seuraavalta
Vaikka emme ole kirjoittaneet koodia, voit käyttää verkkosivustosovellusta juuri nyt. Suorita verkkosovellus suorittamalla Rails-komento verkkosivustokansiosta alla olevan kuvan mukaisesti
Kuten yllä olevasta tilannekuvasta näet, verkkosivustosovelluksemme on otettu käyttöönhttp: // localhost: 3000
Näet alla olevan ruudun päästäksesi URL-osoitteeseenhttp: // localhost: 3000
Mutta haluamme näyttää sovelluksen pääsivun URL-osoitteen käytöstähttp: // paikallinen isäntä: 3000 /.Siksi luodaan index.html -sivu verkkosivustoprojektimme julkiseen kansioon.
Huomaa: Rails palvelee index.html -sivua automaattisesti pääkäyttäjän URL-osoitetta käytettäessähttp: // localhost: 3000
Toistaiseksi meillä on vain yksi rivi index.html-sivulla.
Katsotaanpa pääkäyttäjän URL-osoitettahttp: // localhost: 3000
Otetaan nyt elämä index.html -sivullemme lisäämällä kuvia - JS ja siisti CSS. Käytämme harmaasävy-teemaa aloituspaneelista.
Harmaasävy Käynnistä käynnistyshihna -teema -
Alla on tilannekuva harmaasävyisen aloituskäynnistysteemasta, jota käytämme. Mukautamme tämän teeman vastaamaan vaatimuksiamme.
Voit ladata tämän teeman osoitteesta http://startbootstrap.com/template-overviews/grayscale/
Lataa harmaasävyinen teema ja kopioi CSS, font-awesome, fontit, img, JS ja index.html verkkosivustoprojektin julkiseen hakemistoon. Alla on projektin tilannekuva, kun CSS, JS, fontit, kuvat-kansio ja index.html -sivu on lisätty verkkosivustoprojektin julkiseen hakemistoon.
Suoritetaan verkkosivustoprojektimme nyt:
Projektin käynnistyessä sinulle näytetään hyvännäköinen harmaasävyinen teemasivu.
Muutamme index.html-sivua (verkkosivustoprojektin julkisen hakemiston alla) antamaan sille ammattimaisen ilmeen.
Alla on tilannekuva verkkosivustoprojektista muutosten tekemisen jälkeen index.html -sivulla. Olemme juuri muuttaneet kuvia ja muokkaaneet osan tekstistä, jotta se olisi yksilöllinen.
Voit muokata index.html ja harmaasävy.CSS haluamallasi tavalla. Nyt olemme valmiita ottamaan verkkosivustosovelluksen käyttöön Herokussa.
Koodin siirtäminen Githubiin:
Ennen kuin levitämme sovellusta Herokulle, meidän on siirrettävä koodimme Githubin etätietovarastoon. Tätä varten tarvitset Github-tilin. Jos sinulla ei ole Github-tiliä, siirry luomaan tili osoitteessa www.github.com .
Sinun on myös asennettava Github Windowsiin. Lataa Github for Windows osoitteesta https://windows.github.com/ .
Kun olet ladannut ja asentanut Githubin koneellesi, avaa Github-sovellus ja määritä Github-kirjautumistiedot ja valitse oletussuojaksi Git Bash -kuori (voit valita minkä tahansa muun vaihtoehdon myös haluamallasi tavalla) ja tallenna sitten muutokset.
Sinun on luotava Githubiin arkisto, johon tallennamme verkkosivustoprojektimme etänä. Luo arkisto kirjautumalla Githubiin ja napsauttamalla vihreässä painikkeessa näkyvää uutta arkistovaihtoehtoa.
Nimeä arkisto (tässä tapauksessa olemme nimenneet sen railtoherokuksi) ja napsauta luoda arkistolinkkiä alla olevan kuvan mukaisesti.
Github antaa etä-URL-osoitteen ( https://github.com/eMahtab/railtoheroku.git tässä tapauksessa) railtoheroku-tietovarastolle, jota tarvitaan samalla kun siirretään koodi paikallisesta koneesta Githubiin.
Olemme nyt valmiita siirtämään verkkosivustoprojektikoodimme Githubille. Työnnä koodi Githubiin noudattamalla seuraavia vaiheita.
Avaa Git-kuori ja alusta verkkosivustohakemisto Git init -komennolla seuraavasti:
Lisää nyt kaikki verkkosivustohakemiston tiedostot versionhallinnan alla suorittamalla Git add.
Tee kaikki tiedostot suorittamalla Git-sitoutuminen - m “Final Commit”
Lisää etätietovarasto alla olevan kuvan mukaisesti:
Nyt viimeinen vaihe, joka todella siirtää koodin Github-arkistoon:
ero nuken ja kokin välillä
Olemme valmiit Githubin kanssa. Seuraava osa on sovelluksen varsinainen käyttöönotto Herokulle.
Sovelluksen käyttöönotto Herokulle:
Luo Heroku-tili osoitteessa https://www.heroku.com/
Huomautus : Meidän on tehtävä joitain muutoksia, jotta sovellusta voidaan käyttää Herokussa. Heroku ei tue SqLite 3: ta, vaan sillä on PostgreSQL-tietokanta. Joten meidän on poistettava sqlite3-riippuvuus gem-tiedostosta. Heroku vaatii rails_12factor helmi, jota Heroku käyttää staattisten resurssien, kuten kuvien ja tyylitaulukoiden, palvelemiseen. Alla on yhteenveto kahdesta Gemfile-tiedostossa vaaditusta muutoksesta:
Poista viiva helmi 'sqlite3' Gemfile-tiedostosta
Lisää seuraavat rivit Gemfileen
ryhmä: kehitys,: testi do #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
Tarkistetaan, toimiiko kaikki hyvin, kun olemme tehneet muutoksia Gemfileen. Tallenna Gemfile ja suorita nipun asennus erityisellä lipulla (ilman tuotantoa), jotta estetään tuotantohelmien paikallinen asentaminen.
Antaa sitouttaa Gemfile-ohjelmassa tehdyt muutokset Githubin etätietovarastoon:
Työnnä muutokset Github-etätietovarastoon:
Uuden sovelluksen luominen Herokussa:
Kirjaudu sisään Herokuun ja luo uusi sovellus. Olen nimennyt sovellukseni Railtoherokuksi. Voit nimetä sen mitä haluat. Luo nimetty sovellus napsauttamalla Luo sovellus.
Github-arkiston yhdistäminen Heroku-sovellukseen:
Seuraava vaihe on linkittää Github-arkisto Herokuun.
Alla olemme yhdistäneet Github-arkiston railtoheroku
Kun olemme liittäneet Github-arkiston Herokoon, olemme valmiita asentamaan sovelluksemme. Asenna sovellus vierittämällä alas manuaaliseen käyttöönottovaihtoehtoon ja napsauttamalla Ota haara -vaihtoehtoa.
Sovelluksen käyttöönotto:
Kun napsautat Ota käyttöön sivuhaaraa, Heroku alkaa asentaa Gemfilen helmiä tuotantoon:
Kun kaikki helmet on asennettu ja sovellus on otettu käyttöön, näet Herokun onnitteluviestin: 'Sovelluksesi on otettu käyttöön.'
Jos haluat nähdä käyttöönotetun sovelluksen, napsauta vain näkymäpainiketta ja näet sovelluksesi onnistuneesti käyttöönotettuna.
Kommentoi alla, jos kohtaat ongelmia edellä mainittujen vaiheiden mukaisesti. Toivottavasti pidit tästä viestistä.
Onko sinulla kysymys meille? Mainitse se kommenttiosassa ja palaamme sinuun.
Aiheeseen liittyvät julkaisut:
XML-tiedostojen jäsentäminen SAX-jäsentimellä