Usare Travis con Firebase per deployare Applicazioni Frontend

Scrivo questo post perché in questi giorni mi sono imbattuto in un problema molto ricorrente. Ho diversi progetti su Github la maggior parte sono degli esperimenti che faccio per conto mio. Il mio obiettivo era quello di trovare una piattaforma di hosting gratuita, con supporto di Single Page Applications, integrazione con Travis e Https attivo.

Perche Travis?

Anche se è un progetto personale, non voglio perdere tempo a fare deploy manuali (spostando cartelle su Filezilla) quando ci sono sistemi di CI che mi permettono di automatizzare tutto il flusso di rilascio delle miei applicazioni. Per chi volesse approfondire su travis ecco un link.

Cercando in giro per la rete, ho trovato questa lista di possibili candidati:

• Heroku
• Amazon S3
• Github Pages
• Surge.sh
• Firebase

Cominciamo con Heroku che uso già per applicazioni NodeJS, il problema è che devo creare una applicazione server per servire i miei file statici, in più la versione gratuita si spegne quando non viene utilizzata.

Amazon S3 l'ho trovato molto macchinoso e non facile da configurare.

Github Pages era l'ideale poi ho scoperto che non offre supporto a SPA. Quindi se dovete sviluppare una demo dove è presente solo una pagina può andare.

Surge.sh sembrava l'ideale, molto facile da configurare, tutto da riga di comando, ma il problema è che i siti sono lenti.

Firebase mi ha sorpreso di solito l'uso per creare REST Api, è stato molto semplice la configurazione.

Configurazione Firebase

La prima cosa che bisogna fare e creare un progetto dalla console di Firebase:

Poi bisogna installare la cli, lo potete fare da riga di commando usando npm:

npm i -g firebase-cli

Dopo l'installazione bisogna lanciare il commando per effettuare la login, verrà aperta una pagina sul browser, dovete confermare i permessi.

firebase login

Per questo esempio ho usato il seguente progetto che ho su Github ngrx-angular-example, prima di lanciare il prossimo commando dovete spostarvi nella root del progetto che volete usare.

firebase init

La console di Firebase vi mostrerà una lista di opzioni dovete selezionare "Hosting: Configure and deploy Firebase Hosting sites":

Poi vi chiederà quale cartella usare per deployare la vostra applicazione e se volete il supporto alle SPA.
Nel mio caso visto che ho usato la CLI di Angular per generare il progetto, la cartella sarà dist/ngrx-angular-example.

Alla fine della configurazione nel vostro progetto verrano inclusi da firebase 2 file:

• .firebasesrc
• firebase.json

All'interno di firebase.json trovate la seguente configurazione, che potete modificare quando volete:

{
  "hosting": {
    "public": "dist/ngrx-angular-example",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Configurazione Travis

Adesso che abbiamo Firebase configurato, dobbiamo creare il file .travis.yml al cui interno inserire le regole per gestire la build e poi il deploy:

language: node_js
node_js: 
  - '8'
cache: 
  - yarn
branches:
  only:
  - master
before-script: 
  - yarn
script: 
  - yarn prod
deploy:
  provider: firebase
  skip_cleanup: true
  token:
    secure: $FIREBASE_TOKEN
  project: ngrx-angular-fe-gm

Le regole sono molto semplici, nel mio caso voglio che la build si attivi solo sul branch master. Il commando da lanciare per effettuare la build del mio progetto è "yarn prod".

Nelle regole di deploy bisogna aggiungere come provider "firebase" e specificare il nome del progetto che abbiamo creato precedentemente nella console di firebase. Per creare il token potete lanciare il seguente commando e poi salvatelo da qualche parte:

firebase login:ci

Se andate sul sito di travis vi potete creare un account usando la vostra utenza di Github, accettate i permessi che vi chiederà:

Selezionate la vostra repo, in fondo a destra dovrebbe comparire la voce "more options" andate su settings e inserite la seguente configurazione:

Vi ricordate il token che avete generato prima, copiatelo dentro "Environment Variables".

Adesso che abbiamo tutto configurato non ci resta che pushare tutto su develop e poi fare una pull request su master, accettando la PR dovrebbe partire la build in automatico, andate su Travis nella sezione branches, dovresti avere una schermata simile a questa:

Se tutto va a buon fine la schermata finale dovrebbe essere questa:

Adesso che il deploy è finito tornate nella console di Firebase e aprite il vostro progetto, cliccate sulla voce di menu "Hosting" che vi manderà nella pagina dove trovate l'url del vostro sito.

Adesso potete replicare questo processo ogni volta che iniziate un progetto su Github e non lasciare i vostri progetti abbandonati. In questo modo potete anche condividerli con amici e colleghi e perché no, può servire anche da cavia per progetti futuri.

keep calm and code!

Comments

[Matteo Rigon]

Ti consiglio di provare Netlify come hosting per qualsiasi tipo di sito statico. Deploy direttamente da git o tramite webhook, https, cdn distribuita, e molte altre chicche come redirect automatico in base a geolocation o lingua. Free per account personali

[Gabriel Mayta]

Ciao Matteo,

ottimo, consiglio, grazie. Lo proverò sicuramente.