‫-: Siamo quasi pronti per distribuire la nostra applicazione ora.
‫Ma prima di farlo,
‫ci sono in realtà un paio di
‫cose di cui dovremmo occuparci.
‫E quindi facciamolo ora.
‫E la prima cosa che
‫voglio fare è
‫installare un pacchetto che comprimerà tutte le nostre risposte.
‫Quindi, in pratica, ogni volta che inviamo una risposta di testo a un
‫client, non importa se si tratta di codice JSON o HTML.
‫Con il pacchetto
‫di compressione, quel testo verrà quindi notevolmente compresso.
‫Va bene, quindi installiamo qui.
‫Installazione di Npm e, semplicemente, compressione.
‫Va bene.
‫Quindi includiamolo qui.
‫Ora, questo esporrà quindi una funzione
‫di livello intermedio molto
‫semplice che dobbiamo semplicemente collegare
‫al nostro stack di livello intermedio.
‫Quindi facciamolo da qualche parte qui.
‫Vicino alla fine, non importa.
‫Quindi app. usa,
‫inserisci la compressione della chiamata.
‫Quindi questo qui restituirà quindi una funzione in mezzo
‫a sinistra che comprimerà di
‫nuovo tutto il testo inviato ai client.
‫Quindi non funzionerà per le
‫immagini perché di solito sono già compresse.
‫Quindi, ad esempio, un formato JPEG è già compresso.
‫Quindi funzionerà solo per il testo.
‫Quindi, una volta che il nostro sito
‫Web è stato effettivamente distribuito, verificheremo se questa compressione è effettivamente attiva.
‫Ad ogni modo, il passaggio successivo prima di distribuire la nostra app è
‫sbarazzarsi della maggior parte della console. log che abbiamo ancora
‫nel nostro codice.
‫E questo solo perché questi accessi finiranno nei registri
‫della nostra piattaforma di hosting.
‫E quindi non vogliamo inquinare questi tronchi nella produzione.
‫Va bene.
‫Quindi cerchiamo rapidamente qui per console.
‫E come puoi vedere, ce ne sono molti.
‫Quindi questo è già commentato.
‫Quindi non ho intenzione di lavorare su quello.
‫Ma questo qui, sbarazziamoci davvero.
‫E così ora,
‫uno per uno, daremo un'occhiata a
‫tutti loro e quelli
‫che non sono rilevanti li commenteremo semplicemente.
‫Va bene.
‫Qui nel controller degli errori ne abbiamo anche un sacco, ma
‫alcuni sono effettivamente rilevanti.
‫Ora, non questo.
‫In realtà, liberiamocene completamente.
‫Inoltre non questo,
‫ma poi qui abbiamo questi tre
‫che in realtà abbiamo creato apposta
‫in modo che finiscano nei registri della nostra piattaforma di hosting.
‫Va bene.
‫Quindi ricorda che lo abbiamo impostato in modo
‫tale che quando c'è un errore sul sito Web di
‫rendering, otteniamo un registro
‫dell'errore che si è effettivamente verificato.
‫Insieme a questa emoji qui.
‫E così ogni volta che
‫lo vediamo, possiamo facilmente identificare nei nostri log
‫che è successo qualcosa di brutto dalla nostra parte.
‫Ok, quindi ne abbiamo un altro paio qui.
‫Ad esempio, per altri errori sconosciuti in
‫cui non vogliamo divulgare i dettagli dell'errore al client.
‫E quindi questi vanno bene per tenerli.
‫Questo vogliamo anche conservare per
‫informarci nei log che la connessione
‫al database è andata a buon fine.
‫Anche questi qui.
‫Questo qui è in realtà nei dati import-dev, quindi
‫non sono affatto importanti.
‫Comunque, tutti i registri qui, conserviamoli.
‫Quindi qui, abbiamo questo qui,
‫che abbiamo fatto solo per usare questo livello intermedio.
‫Quindi spegniamo effettivamente questo livello intermedio.
‫Che di nuovo abbiamo usato
‫solo per testare questo post, trova il livello intermedio.
‫Avanti nel modello utente.
‫Bene, anche questo non lo vogliamo.
‫Questo era solo una volta di più a scopo di test.
‫Quindi abbiamo il pacchetto JSON, quindi questi
‫in realtà non sono nemmeno arrivati ai log.
‫Quindi dobbiamo
‫raggruppare dove non cambieremo nulla.
‫Quindi abbiamo index. js.
‫Quindi questo è il nostro JavaScript lato client.
‫Quindi liberiamoci di questa console. accedi qui.
‫Poi ne abbiamo anche altri qui in logout, ma
‫questo in realtà teniamolo.
‫Alcuni più a strisce.
‫E non siamo interessati qui alla sessione.
‫Ma questo qui quando c'è un errore in
‫realtà va bene.
‫E poi nel server. js, abbiamo
‫questi qui, che
‫in realtà, di nuovo, abbiamo fatto apposta.
‫In modo che finiscano davvero per essere visualizzati nei nostri file di registro.
‫E non preoccuparti se non sai davvero cosa
‫intendo con i file di registro.
‫Vedrai quando metteremo
‫effettivamente la nostra applicazione su Heroku.
‫Quindi ti mostrerò i file di registro per allora, va bene.
‫Comunque, tutte queste console. i log qui sono
‫apposta.
‫E anche questo
‫qui sulla connessione al database riuscita.
‫Anche questo
‫qui ci informa sulla porta in cui è in esecuzione l'app.
‫E anche questo e questo sono importanti.
‫Va bene.
‫E così con questo ci siamo occupati di tutte
‫le console non necessarie. log che stiamo
‫solo inquinando i nostri output di log.
‫Ok, chiudiamo qui tutti questi file.
‫Va bene.
‫E ora,
‫passaggio successivo, cambiamo URL o codici API
‫nel lato client, JavaScript.
‫Quindi per esempio qui in login. js, in
‫questo momento eseguiamo questi codici API
‫su questa API di sviluppo.
‫Quindi qui, ovviamente, abbiamo il nostro URL di sviluppo.
‫E
‫così in questo modo, non funzionerà
‫in produzione perché ovviamente da
‫lì non saremo in grado di accedere a nessun URL di sviluppo.
‫E lo stesso quassù.
‫Ma fortunatamente c'è una soluzione molto semplice.
‫Quindi tutto ciò che dobbiamo fare è sbarazzarci davvero di questa parte.
‫Quindi, se lo eliminiamo in
‫questo modo, finiremo con questo URL relativo.
‫E poiché l'API e
‫il sito Web sono ospitati
‫sullo stesso server, funzionerà perfettamente.
‫Quindi farlo in questo
‫modo è un po' come specificare il percorso delle immagini nell'HTML.
‫Ad esempio, qui nella pagina di
‫panoramica, dove
‫abbiamo queste immagini, diciamo semplicemente
‫"/img" e questo andrà all'URL
‫corrente e quindi aggiungerà quel percorso a quello.
‫Va bene.
‫E quindi la stessa cosa sta per accadere qui.
‫Va bene.
‫Ora di nuovo, funziona solo perché l'API e il sito
‫Web utilizzano sostanzialmente lo stesso URL.
‫Quindi li ospitiamo nello stesso posto.
‫Ma se ospitassi il tuo
‫sito web o il tuo front-end su
‫un URL e poi la tua API su
‫un altro URL, allora non funzionerebbe in questo modo, ok.
‫Ma in questa semplice applicazione possiamo farlo in questo modo
‫perché abbiamo questa configurazione molto semplice.
‫Quindi cancelliamolo qui in login.
‫Nell'indice credo che non abbiamo alcun URL.
‫Si, è esatto.
‫Inoltre non negli avvisi.
‫Non in Mapbox credo.
‫No.
‫Ma sicuramente a righe.
‫Quindi per ottenere la nostra sessione.
‫Quindi possiamo fare esattamente la stessa cosa qui.
‫E anche in updateSettings.
‫Va bene.
‫Dagli un salvataggio.
‫E tutti loro.
‫E così anche quello è fisso.
‫E ora, finalmente, e continuando a lavorare sul
‫JavaScript lato client,
‫dobbiamo creare il nostro bundle finale.
‫Va bene.
‫Quindi, in questo momento, questo è il nostro file JavaScript del pacchetto.
‫Ma ricorda che questo è stato appena
‫creato utilizzando la funzione orologio.
‫Quindi nel nostro pacchetto. json
‫abbiamo questo orologio. js che creerà semplicemente
‫un nuovo pacchetto ogni volta che cambiamo uno dei file.
‫Ma senza alcuna
‫compressione o senza alcuna ottimizzazione delle prestazioni.
‫Ma ora che abbiamo davvero finito con tutto il nostro
‫JavaScript, siamo pronti per costruire effettivamente il nostro
‫JavaScript in un pacchetto finale.
‫E qui dovremmo sostituire questo orologio con build, in
‫modo che creerà
‫il nostro pacchetto JavaScript compresso finale.
‫Va bene.
‫Quindi proviamolo qui ora.
‫Con npm eseguito.
‫E ancora una volta con la scheda per il completamento automatico.
‫Allora vediamo se...
‫Ed è fatto.
‫E quindi diamo un'occhiata al nostro pacchetto ora.
‫E per vederlo ora, è davvero così
‫ben compresso.
‫Va bene.
‫Ora vedi anche che abbiamo un sacco di questi nuovi file
‫qui e questo perché sei nel nostro albero dei file.
‫Il pacco crea effettivamente questa cartella cache.
‫Ma non vogliamo quella cartella nel nostro deposito Git.
‫Destra.
‫Quindi aggiungiamolo qui.
‫E
‫così ora vedi che automaticamente
‫non appena lo salviamo, tornerà
‫ai file originali che sono stati aggiornati.
‫Va bene.
‫Quindi, ancora una volta, VS Code è
‫davvero intelligente su tutto ciò che riguarda git.
‫Va bene.
‫E penso che sia davvero così.
‫Quindi la nostra applicazione è ora pronta per essere davvero implementata.
‫E quindi ora l'ultimo passaggio è quello
‫di inviare effettivamente tutti questi file modificati al nostro repository.
‫Quindi ricorda che il primo passo è aggiungere tutti i file
‫all'area di staging.
‫Quindi git add, e in questo caso, tutti i file.
‫Va bene.
‫E ora tutto ciò che dobbiamo fare
‫è git commit, quindi
‫il messaggio e diciamo "App preparata per la distribuzione".
‫Grande!
‫Quindi vedi che tutte le nostre modifiche sono sparite.
‫Anche da qui.
‫Il che significa che l'attuale ramo di
‫lavoro è chiamato pulito.
‫E quindi sì, ora siamo pronti per distribuire la nostra app
‫nel prossimo video.