Sa post na ito lilikha kami ng isang personal na website gamit ang riles at ilalagay ito sa Heroku. Ang Heroku ay isang cloud application platform - isang bagong paraan ng pagbuo at pag-deploy ng mga web app. Pinakamagandang bagay tungkol sa Heroku ay hindi mo kailangang magbayad para sa pagho-host ng pangunahing mga web app dahil ikinategorya sila ng Heroku bilang libre. Bumubuo kami ng isang solong aplikasyon ng riles ng pahina at ito ay magiging isang static na website na maaaring magamit bilang isang portfolio.
Nasa ibaba ang snapshot ng application ng riles (ipinakalat sa Heroku dito )
Magsimula tayo sa paglikha ng application na Rails na ito. Ipagpalagay ko na na-install mo na ang Ruby at Rails. Tiyaking mayroon kang Ruby 2.0 at Rails 4.2.2. Maaari mong suriin ang bersyon mula sa prompt ng utos.
Tandaan: Gagamitin namin ang Ruby 2.0 at Rails 4.2.2. Kung mayroon kang ilang iba't ibang mga bersyon ng Ruby at Rails ang ilan sa mga hakbang na ipinapakita sa post na ito ay maaaring hindi gumana para sa iyo.
Paglikha ng Proyekto:
Pangalanan namin ang aming proyekto bilang website. Upang likhain ang proyekto gumamit ng command Rails bagong website
pagdaragdag ng dalawang numero sa java
Awtomatikong bubuo ang mga riles ng lahat ng mga file at mai-install din nito ang lahat ng kinakailangang mga hiyas sa pamamagitan ng pagpapatupad ng run bundle na awtomatikong naka-install tulad ng ipinakita sa ibaba.
Makikita mo ngayon ang isang folder ng website sa ilalim ng iyong C: drive (ang lokasyon mula sa kung saan ipinatupad namin ang Rails bagong utos ng website). Buksan natin ang folder ng website sa ilang IDE. Mayroon akong mga Bracket IDE mula sa Adobe. Maaari kang gumamit ng iba pang dahil hindi ito mahalaga.
Istraktura ng Proyekto:
Ang nabuong istraktura ng proyekto ay titingnan sa ibaba
Kahit na hindi kami nakasulat ng anumang code maaari mong patakbuhin ang application ng website ngayon. Upang patakbuhin ang application ng website, magpatupad ng utos ng Rails s mula sa folder ng website tulad ng ipinakita sa ibaba
Tulad ng nakikita mo sa snapshot sa itaas na na-deploy ang aming website apphttp: // localhost: 3000
Makikita mo ang screen sa ibaba sa pag-access sa URLhttp: // localhost: 3000
Ngunit nais naming ipakita ang pangunahing pahina ng aming application sa pag-access sa URLhttp: // localhost: 3000 /.Para doon gumawa tayo ng isang pahina ng index.html sa ilalim ng pampublikong folder ng aming proyekto sa website.
Tandaan: Awtomatikong ihahatid ng mga riles ang pahina ng index.html sa pag-access sa root URLhttp: // localhost: 3000
Sa ngayon mayroon lamang kaming isang linya sa pahina ng index.html.
I-access natin ang root URLhttp: // localhost: 3000
Ngayon, maglagay tayo ng ilang buhay sa aming pahina ng index.html sa pamamagitan ng pagdaragdag ng ilang mga imahe - JS at cool na CSS. Gumagamit kami ng grayscale na tema mula sa pagsisimula ng bootstrap.
Grayscale Start Bootstrap Theme -
Nasa ibaba ang snapshot ng grayscale start bootstrap na tema na gagamitin namin. Ipapasadya namin ang temang ito upang matugunan ang aming kinakailangan.
Maaari mong i-download ang temang ito mula sa http://startbootstrap.com/template-overviews/grayscale/
Mag-download ng grayscale na tema at kopyahin ang CSS, mahusay na font, mga font, img, JS at index.html sa pampublikong direktoryo ng proyekto ng website. Nasa ibaba ang snapshot ng proyekto pagkatapos magdagdag ng CSS, JS, mga font, folder ng mga imahe at pahina ng index.html sa ilalim ng pampublikong direktoryo ng proyekto ng website.
Patakbuhin natin ang aming proyekto sa website ngayon:
Sa pagpapatakbo ng proyekto ipapakita sa iyo ang magandang hitsura ng pahina ng tema na grayscale.
Susubukan naming baguhin ang pahina ng index.html (sa ilalim ng pampublikong direktoryo ng proyekto sa website) upang bigyan ito ng isang propesyonal na hitsura.
Nasa ibaba ang snapshot ng proyekto ng website pagkatapos gawin ang mga pagbabago sa pahina ng index.html. Pinalitan lang namin ang mga imahe at na-edit ang ilan sa teksto upang gawin itong tukoy sa isang indibidwal.
kung paano gamitin ang google cloud platform
Maaari mong baguhin ang index.html at grayscale.CSS ayon sa gusto mo. Ngayon, handa na kaming i-deploy ang aming application sa website sa Heroku.
Itulak ang code sa Github:
Bago i-deploy ang application sa Heroku, kailangan naming itulak ang aming code sa isang remote na imbakan ng Github. Para doon kailangan mo ng isang Github account. Kung wala kang isang Github account, pumunta at lumikha ng isa sa www.github.com .
Kailangan mo ring i-install ang Github sa iyong Windows. I-download ang Github para sa mga bintana mula sa https://windows.github.com/ .
Kapag na-download at na-install mo ang Github sa iyong machine, buksan ang application na Github at i-configure ang iyong mga kredensyal ng Github at piliin ang Git Bash shell bilang iyong default na shell (maaari kang pumili ng anumang iba pang pagpipilian na gusto mo rin) at pagkatapos ay i-save ang mga pagbabago.
Kailangan mong lumikha ng isang imbakan sa Github, kung saan maliligtas namin ang aming proyekto sa website mula sa malayuan. Upang lumikha ng isang repository, mag-log in sa Github at mag-click sa bagong pagpipiliang repository na ipinapakita sa berdeng pindutan.
Pangalanan ang iyong imbakan (sa kasong ito pinangalanan namin itong railtoheroku) at mag-click sa lumikha ng link ng repository tulad ng ipinakita sa ibaba.
Magbibigay ang Github ng remote na URL ( https://github.com/eMahtab/railtoheroku.git sa kasong ito) para sa istasyon ng railtoheroku na kakailanganin habang itinutulak ang code mula sa lokal na makina patungong Github.
Ngayon, handa na kaming itulak ang aming code ng proyekto sa website sa Github. Sundin ang mga hakbang sa ibaba upang itulak ang code sa Github.
Buksan ang Git shell at gamitin ang command ng Git init upang simulan ang direktoryo ng website tulad ng ipinakita sa ibaba:
Ngayon, idagdag ang lahat ng mga file sa direktoryo ng website sa ilalim ng kontrol ng bersyon sa pamamagitan ng pagpapatupad ng Git add.
Ipagkatiwala ang lahat ng mga file sa pamamagitan ng pagpapatupad ng Git commit –m 'Final Commit'
Idagdag ang remote repository tulad ng ipinakita sa ibaba:
Ngayon ang huling hakbang na talagang itutulak ang code sa Github na imbakan:
Tapos na kami kay Github. Ang susunod na bahagi ay ang aktwal na pag-deploy ng application sa Heroku.
Pag-deploy ng application sa Heroku:
Lumikha ng isang Heroku account sa https://www.heroku.com/
Tandaan: Kailangan naming gumawa ng ilang mga pagbabago para sa pag-deploy ng application sa Heroku. Hindi sinusuportahan ng Heroku ang SqLite 3, sa halip mayroon itong PostgreSQL database. Kaya kailangan nating alisin ang dependency ng sqlite3 mula sa gemfile. Ang Heroku ay nangangailangan ng riles_12factor gem, na ginagamit ng Heroku upang maghatid ng mga static na assets tulad ng mga imahe at styleheet. Ang dalawang pagbabago na kinakailangan sa Gemfile ay nakabuod sa ibaba:
Alisin ang line gem na 'sqlite3' mula sa Gemfile
Idagdag ang mga sumusunod na linya sa Gemfile
pangkat: pag-unlad,: pagsubok gawin #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
Suriin natin kung gumagana ang lahat nang maayos pagkatapos gawin ang mga pagbabago sa Gemfile. I-save ang Gemfile at tumakbo pag-install ng bundle na may isang espesyal na watawat (–tanong ang produksyon) upang maiwasan ang lokal na pag-install ng anumang mga hiyas sa produksyon.
Hinahayaan nating gawin ang mga pagbabagong nagawa sa Gemfile patungo sa remote na imbakan sa Github:
Itulak ang mga pagbabago sa remote na imbakan ng Github:
pagkakaiba sa pagitan ng hashmap at hashtable sa java
Lumilikha ng isang bagong application sa Heroku:
Mag-log in sa Heroku at lumikha ng isang bagong app. Pinangalanan ko ang aking app railtoheroku. Maaari mo itong pangalanan kahit anong gusto mo. Mag-click sa lumikha ng app upang likhain ang pinangalanang app.
Pagkonekta sa imbakan ng Github sa Heroku App:
Susunod na hakbang ay i-link ang iyong imbakan ng Github sa Heroku.
Sa ibaba ay nakakonekta namin ang aming Github repository railtoheroku
Kapag naikonekta namin ang aming imbakan ng Github sa Heroku, handa na kaming i-deploy ang aming application. Upang mai-deploy ang application mag-scroll pababa sa manu-manong pagpipilian ng pag-deploy at mag-click sa pagpipilian ng deploy na sangay.
Pag-deploy ng Application:
Kapag nag-click ka sa Deploy Branch, magsisimula ang Heroku sa pag-install ng mga hiyas mula sa Gemfile sa paggawa:
Kapag na-install na ang lahat ng mga hiyas at na-deploy ang application, makikita mo ang mensahe ng pagbati mula kay Heroku na nagsasabing, 'Matagumpay na na-deploy ang iyong app.'
Upang makita ang iyong na-deploy na application i-click lamang sa view button at makikita mong matagumpay na na-deploy ang iyong app.
Kung nahaharap ka sa anumang problema habang sinusundan ang anuman sa mga hakbang sa itaas mangyaring magkomento sa ibaba. Sana nasiyahan ka sa post na ito.
May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento at babalikan ka namin.
Mga Kaugnay na Post:
Pag-parse ng mga XML na file gamit ang SAX Parser