Creazione e distribuzione dell'applicazione Rails su Heroku



In questo post creeremo un sito web personale utilizzando rails e lo distribuiremo a Heroku. Heroku è una piattaforma per applicazioni cloud, un nuovo modo di distribuire le app web

In questo post creeremo un sito web personale utilizzando rails e lo distribuiremo a Heroku. Heroku è una piattaforma per applicazioni cloud, un nuovo modo di creare e distribuire app web. La cosa migliore di Heroku è che non devi pagare per l'hosting di app web di base poiché Heroku le ha classificate come gratuite. Costruiremo un'applicazione per binari a pagina singola e sarà un sito web statico che può essere utilizzato come portfolio.





Di seguito è riportata l'istantanea dell'applicazione rails (distribuita su Heroku Qui )



Cominciamo a creare questa applicazione Rails. Presumo che tu abbia già installato Ruby e Rails. Assicurati di avere Ruby 2.0 e Rails 4.2.2. Puoi controllare la versione dal prompt dei comandi.

Nota: useremo Ruby 2.0 e Rails 4.2.2. Se hai versioni differenti di Ruby e Rails, alcuni dei passaggi mostrati in questo post potrebbero non funzionare per te.



Creazione del progetto:

Chiameremo il nostro progetto come sito web. Per creare il progetto utilizzare il comando Rails new website

Rails genererà automaticamente tutti i file e installerà anche tutti i gem richiesti eseguendo il run bundle installato automaticamente come mostrato di seguito

Ora vedrai una cartella del sito web sotto l'unità C: (la posizione da cui abbiamo eseguito il comando del nuovo sito web di Rails). Apriamo la cartella del sito web in qualche IDE. Ho Brackets IDE di Adobe. Puoi usare qualsiasi altro in quanto non importa.

Struttura del progetto:

La struttura del progetto generato apparirà come di seguito

Anche se non abbiamo scritto alcun codice, puoi eseguire subito l'applicazione del sito web. Per eseguire l'applicazione del sito Web, eseguire il comando di Rails dalla cartella del sito Web come mostrato di seguito

Come puoi vedere nell'istantanea sopra, in cui è stata distribuita l'app del nostro sito webhttp: // localhost: 3000

Sarai in grado di vedere la schermata sottostante quando accedi all'URLhttp: // localhost: 3000

Ma vogliamo mostrare la pagina principale della nostra applicazione all'accesso all'URLhttp: // localhost: 3000 /.Per questo creiamo una pagina index.html nella cartella pubblica del nostro progetto sito web.

Nota: Rails servirà automaticamente la pagina index.html all'accesso all'URL di roothttp: // localhost: 3000

Per il momento abbiamo solo una riga nella pagina index.html.

Accediamo all'URL di roothttp: // localhost: 3000

Ora, mettiamo un po 'di vita nella nostra pagina index.html aggiungendo alcune immagini: JS e fantastici CSS. Useremo il tema in scala di grigi dall'inizio del bootstrap.

Tema Bootstrap di avvio in scala di grigi -

Di seguito è riportata l'istantanea del tema bootstrap di avvio in scala di grigi che useremo. Personalizzeremo questo tema per soddisfare le nostre esigenze.

Puoi scaricare questo tema da http://startbootstrap.com/template-overviews/grayscale/

Scarica il tema in scala di grigi e copia CSS, font-awesome, fonts, img, JS e index.html nella directory pubblica del progetto del sito web. Di seguito è riportata l'istantanea del progetto dopo aver aggiunto CSS, JS, caratteri, cartella immagini e pagina index.html nella directory pubblica del progetto del sito web.

Eseguiamo ora il progetto del nostro sito web:

Durante l'esecuzione del progetto ti verrà presentata una bella pagina del tema in scala di grigi.

Modificheremo la pagina index.html (nella directory pubblica del progetto del sito web) per dargli un aspetto professionale.

Di seguito è riportata l'istantanea del progetto del sito Web dopo aver apportato le modifiche nella pagina index.html. Abbiamo appena cambiato le immagini e modificato parte del testo per renderlo specifico per un individuo.

Puoi modificare index.html e grayscale.CSS come preferisci. Ora siamo pronti per distribuire la nostra applicazione del sito web su Heroku.

Invio del codice a Github:

Prima di distribuire l'applicazione su Heroku, dobbiamo inviare il nostro codice a un repository Github remoto. Per questo hai bisogno di un account Github. Se non hai un account Github, creane uno su www.github.com .

Devi anche installare Github su Windows. Scarica GitHub per Windows da https://windows.github.com/ .

Dopo aver scaricato e installato GitHub sul tuo computer, apri l'applicazione GitHub e configura le tue credenziali GitHub e scegli la shell Git Bash come shell predefinita (puoi anche scegliere qualsiasi altra opzione a tuo piacimento) e quindi salva le modifiche.

Devi creare un repository su Github, dove salveremo il nostro progetto del sito web da remoto. Per creare un repository, accedi a Github e fai clic sulla nuova opzione di repository mostrata nel pulsante verde.

Assegna un nome al tuo repository (in questo caso lo abbiamo chiamato railtoheroku) e fai clic sul collegamento crea repository come mostrato di seguito.

Github fornirà l'URL remoto ( https://github.com/eMahtab/railtoheroku.git in questo caso) per il repository railtoheroku che sarà necessario durante il push del codice dalla macchina locale a Github.

Ora siamo pronti per inviare il codice del progetto del nostro sito Web a Github. Segui i passaggi seguenti per inviare il codice a Github.

Apri la shell Git e usa il comando Git init per inizializzare la directory del sito web come mostrato di seguito:

Ora aggiungi tutti i file nella directory del sito web sotto il controllo della versione eseguendo Git add.

cos'è il deadlock in java

Salvare tutti i file eseguendo Git commit –m 'Final Commit'

Aggiungi il repository remoto come mostrato di seguito:

Ora l'ultimo passaggio che effettivamente invierà il codice al repository Github:

Abbiamo finito con Github. La parte successiva è la distribuzione effettiva dell'applicazione su Heroku.

Distribuzione dell'applicazione su Heroku:

Crea un account Heroku su https://www.heroku.com/

Nota : Dobbiamo apportare alcune modifiche per la distribuzione dell'applicazione su Heroku. Heroku non supporta SqLite 3, invece ha il database PostgreSQL. Quindi dobbiamo rimuovere la dipendenza sqlite3 da gemfile. Heroku richiede rails_12factor gem, che viene utilizzato da Heroku per servire risorse statiche come immagini e fogli di stile. Le due modifiche richieste in Gemfile sono riassunte di seguito:

Rimuovi la riga gem 'sqlite3' da Gemfile

Aggiungi le seguenti righe a Gemfile

gruppo: sviluppo,: prova fare #<<<< not in production gem 'sqlite3' end group :production do gem 'pg', '0.17.1' gem 'rails_12factor', '0.0.2' end

Controlliamo se tutto funziona correttamente dopo aver apportato le modifiche a Gemfile. Salva il Gemfile ed esegui installazione bundle con una bandiera speciale (-senza produzione) per impedire l'installazione locale di eventuali gemme di produzione.

Consente di eseguire il commit delle modifiche apportate in Gemfile al repository remoto su Github:

Esegui il push delle modifiche al repository Github remoto:

Creazione di una nuova applicazione su Heroku:

Accedi a Heroku e crea una nuova app. Ho chiamato la mia app railtoheroku. Puoi chiamarlo come preferisci. Fare clic su crea app per creare l'app denominata.

Collegamento del repository Github all'app Heroku:

Il prossimo passo è collegare il tuo repository Github a Heroku.

Di seguito abbiamo collegato il nostro repository Github railtoheroku

Una volta connesso il nostro repository Github a Heroku, siamo pronti per distribuire la nostra applicazione. Per distribuire l'applicazione scorrere verso il basso fino all'opzione di distribuzione manuale e fare clic sull'opzione di distribuzione del ramo.

Distribuzione dell'applicazione:

Dopo aver fatto clic su Deploy Branch, Heroku inizierà a installare le gemme da Gemfile in produzione:

Una volta installate tutte le gemme e distribuita l'applicazione, vedrai il messaggio di congratulazioni di Heroku che dice: 'La tua app è stata distribuita correttamente'.

Per vedere la tua applicazione distribuita, fai clic sul pulsante Visualizza e sarai in grado di vedere la tua applicazione distribuita correttamente.

In caso di problemi durante l'esecuzione di uno dei passaggi precedenti, commentare di seguito. Spero ti sia piaciuto questo post.

Hai domande per noi? Per favore menzionalo nella sezione commenti e ti risponderemo.

Post correlati:

Analisi dei file XML utilizzando SAX Parser