En aquest post crearem un lloc web personal amb rails i el desplegarem a Heroku. Heroku és una plataforma d'aplicacions al núvol: una nova forma de construir i desplegar aplicacions web. El millor d’Heroku és que no heu de pagar per allotjar aplicacions web bàsiques, ja que Heroku les ha classificat com a gratuïtes. Construirem una aplicació de rails de pàgina única i serà un lloc web estàtic que es pot utilitzar com a cartera.
A continuació es mostra la instantània de l’aplicació de rails (desplegada a Heroku aquí )
Comencem a crear aquesta aplicació Rails. Suposo que ja heu instal·lat Ruby and Rails. Assegureu-vos que teniu Ruby 2.0 i Rails 4.2.2. Podeu comprovar la versió des del símbol del sistema.
Nota: utilitzarem Ruby 2.0 i Rails 4.2.2. Si teniu algunes versions diferents de Ruby and Rails, és possible que alguns dels passos que es mostren en aquest post no us funcionin.
Creació del projecte:
Anomenarem el nostre projecte com a lloc web. Per crear el projecte, utilitzeu l'ordre Rails nou lloc web
Rails generarà automàticament tots els fitxers i també instal·larà totes les gemmes necessàries executant el paquet d'execució instal·lat automàticament tal com es mostra a continuació
Ara veureu una carpeta de lloc web a la vostra unitat C: (la ubicació des d’on hem executat l’ordre Rails nou lloc web). Obrim la carpeta del lloc web en algun IDE. Tinc IDE de suports d’Adobe. Podeu fer servir qualsevol altre, ja que no importa.
Estructura del projecte:
L’estructura del projecte generada serà la següent
Tot i que no hem escrit cap codi, podeu executar l'aplicació del lloc web ara mateix. Per executar l'aplicació del lloc web, executeu l'ordre Rails des de la carpeta del lloc web, tal com es mostra a continuació
Com podeu veure a la instantània anterior, a la qual s'ha desplegat l'aplicació del nostre lloc webhttp: // localhost: 3000
Podreu veure la pantalla següent en accedir a l'URLhttp: // localhost: 3000
Però volem mostrar la pàgina principal de la nostra aplicació en accedir a l'URLhttp: // localhost: 3000 /.Per això, creem una pàgina index.html a la carpeta pública del projecte del nostre lloc web.
Nota: Rails publicarà automàticament la pàgina index.html en accedir a l'URL arrelhttp: // localhost: 3000
De moment, només tenim una línia a la pàgina index.html.
Accedim a l'URL arrelhttp: // localhost: 3000
Ara, posem vida a la nostra pàgina index.html afegint algunes imatges: JS i CSS genials. Utilitzarem el tema en escala de grisos des de l’inici d’arrencada.
Tema d’inici d’arrencada en escala de grisos -
A continuació es mostra la instantània del tema d’arrencada d’inici en escala de grisos que farem servir. Personalitzarem aquest tema per satisfer els nostres requisits.
Podeu descarregar aquest tema des de http://startbootstrap.com/template-overviews/grayscale/
què és la combinació de dades al quadre
Baixeu-vos el tema en escala de grisos i copieu el CSS, font-awesome, fonts, img, JS i index.html al directori públic del projecte del lloc web. A continuació es mostra la instantània del projecte després d'afegir CSS, JS, tipus de lletra, carpeta d'imatges i pàgina index.html al directori públic del projecte del lloc web.
Executem el projecte del nostre lloc web ara:
En executar el projecte, se us presentarà una bonica pàgina temàtica en escala de grisos.
Modificarem la pàgina index.html (al directori públic del projecte del lloc web) per donar-li un aspecte professional.
A continuació es mostra la instantània del projecte del lloc web després de fer els canvis a la pàgina index.html. Acabem de canviar les imatges i editar part del text perquè sigui específic per a una persona.
Podeu modificar index.html i grisos.CSS com vulgueu. Ara estem preparats per desplegar la nostra aplicació de lloc web a Heroku.
Emportant el codi a Github:
Abans de desplegar l’aplicació a Heroku, hem d’enviar el nostre codi a un dipòsit Github remot. Per a això, necessiteu un compte de Github. Si no teniu cap compte de Github, aneu a crear-ne un www.github.com .
També heu d’instal·lar Github al vostre Windows. Baixeu el Github per a Windows des de https://windows.github.com/ .
Un cop hàgiu descarregat i instal·lat Github a la vostra màquina, obriu l'aplicació Github i configureu les vostres credencials de Github i trieu l'intèrpret d'ordres Git Bash com a intèrpret d'ordres predeterminat (podeu triar qualsevol altra opció també com vulgueu) i deseu els canvis.
Heu de crear un dipòsit a Github, on desarem el projecte del lloc web de forma remota. Per crear un dipòsit, inicieu sessió a Github i feu clic a l'opció de dipòsit nou que es mostra al botó verd.
Poseu un nom al vostre dipòsit (en aquest cas l’hem anomenat railtoheroku) i feu clic a l’enllaç de creació del dipòsit tal com es mostra a continuació.
Github proporcionarà l'URL remot ( https://github.com/eMahtab/railtoheroku.git en aquest cas) per al dipòsit railtoheroku que serà necessari mentre es passa el codi de la màquina local a Github.
Ara estem preparats per enviar el codi del projecte del nostre lloc web a Github. Seguiu els passos següents per enviar el codi a Github.
Obriu l'intèrpret d'ordres Git i utilitzeu l'ordre Git init per inicialitzar el directori del lloc web com es mostra a continuació:
Ara, afegiu tots els fitxers del directori del lloc web sota control de versions executant Git add.
Confirma tots els fitxers executant Git commit –m “Confirmació final”
com es pot trobar la longitud d'una matriu al javascript
Afegiu el dipòsit remot com es mostra a continuació:
Ara, l'últim pas que realment empènyerà el codi al dipòsit de Github:
Ja hem acabat amb Github. La següent part és el desplegament real de l'aplicació a Heroku.
Desplegament de l'aplicació a Heroku:
Creeu un compte Heroku a https://www.heroku.com/
Nota : Hem de fer alguns canvis per al desplegament de l'aplicació a Heroku. Heroku no admet SqLite 3, en canvi té una base de dades PostgreSQL. Per tant, hem d’eliminar la dependència de sqlite3 del fitxer gem. Heroku requereix rails_12factor gem, que Heroku utilitza per publicar recursos estàtics com ara imatges i fulls d’estil. Els dos canvis necessaris a Gemfile es resumeixen a continuació:
Traieu la gemma de línia 'sqlite3' de Gemfile
Afegiu les següents línies a Gemfile
grup: desenvolupament,: prova de fer #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end
Comprovem si tot funciona bé després de fer els canvis a Gemfile. Deseu el Gemfile i córrer paquet d'instal·lació amb una bandera especial (sense producció) per evitar la instal·lació local de gemmes de producció.
Permetem els canvis fets a Gemfile al dipòsit remot de Github:
Introduïu els canvis al dipòsit Github remot:
Creació d'una nova aplicació a Heroku:
Inicieu la sessió a Heroku i creeu una nova aplicació. He anomenat la meva aplicació railtoheroku. Podeu anomenar-lo com vulgueu. Feu clic a Crea aplicació per crear l'aplicació amb nom.
Connexió del dipòsit Github a l'aplicació Heroku:
El següent pas és enllaçar el dipòsit de Github amb Heroku.
A continuació hem connectat el nostre repositori de Github railtoheroku
Un cop hàgim connectat el nostre dipòsit Github a Heroku, estem preparats per desplegar la nostra aplicació. Per desplegar l'aplicació, desplaceu-vos cap avall fins a l'opció de desplegament manual i feu clic a l'opció de desplegament de sucursal.
Desplegament de l'aplicació:
Un cop feu clic a Deploy Branch, Heroku començarà a instal·lar les gemmes de Gemfile a la producció:
Un cop instal·lades totes les gemmes i desplegada l'aplicació, veureu el missatge de felicitació d'Heroku que diu: 'La vostra aplicació s'ha desplegat correctament'.
Per veure la vostra aplicació desplegada, feu clic al botó de visualització i podreu veure la vostra aplicació desplegada amb èxit.
Si teniu algun problema mentre seguiu algun dels passos anteriors, feu un comentari a continuació. Espero que us hagi agradat aquest missatge.
Tens alguna pregunta? Esmenta’l a la secció de comentaris i et respondrem.
Articles Relacionats:
Analitzant fitxers XML mitjançant SAX Parser