1
00:00:01,030 --> 00:00:04,400
‫-: Siamo quasi pronti per distribuire la nostra applicazione ora.

2
00:00:04,400 --> 00:00:05,860
‫Ma prima di farlo,

3
00:00:05,860 --> 00:00:07,750
‫ci sono in realtà un paio di

4
00:00:07,750 --> 00:00:09,410
‫cose di cui dovremmo occuparci.

5
00:00:09,410 --> 00:00:10,883
‫E quindi facciamolo ora.

6
00:00:12,640 --> 00:00:14,570
‫E la prima cosa che

7
00:00:14,570 --> 00:00:15,837
‫voglio fare è

8
00:00:15,837 --> 00:00:19,060
‫installare un pacchetto che comprimerà tutte le nostre risposte.

9
00:00:19,060 --> 00:00:22,820
‫Quindi, in pratica, ogni volta che inviamo una risposta di testo a un

10
00:00:22,820 --> 00:00:26,020
‫client, non importa se si tratta di codice JSON o HTML.

11
00:00:26,020 --> 00:00:27,520
‫Con il pacchetto

12
00:00:27,520 --> 00:00:30,820
‫di compressione, quel testo verrà quindi notevolmente compresso.

13
00:00:30,820 --> 00:00:33,990
‫Va bene, quindi installiamo qui.

14
00:00:33,990 --> 00:00:38,123
‫Installazione di Npm e, semplicemente, compressione.

15
00:00:39,400 --> 00:00:40,233
‫Va bene.

16
00:00:41,200 --> 00:00:42,863
‫Quindi includiamolo qui.

17
00:00:51,061 --> 00:00:53,160
‫Ora, questo esporrà quindi una funzione

18
00:00:53,160 --> 00:00:54,983
‫di livello intermedio molto

19
00:00:54,983 --> 00:00:56,820
‫semplice che dobbiamo semplicemente collegare

20
00:00:56,820 --> 00:00:59,020
‫al nostro stack di livello intermedio.

21
00:00:59,020 --> 00:01:00,773
‫Quindi facciamolo da qualche parte qui.

22
00:01:02,110 --> 00:01:05,260
‫Vicino alla fine, non importa.

23
00:01:05,260 --> 00:01:07,133
‫Quindi app. usa,

24
00:01:08,060 --> 00:01:10,570
‫inserisci la compressione della chiamata.

25
00:01:10,570 --> 00:01:13,400
‫Quindi questo qui restituirà quindi una funzione in mezzo

26
00:01:13,400 --> 00:01:15,620
‫a sinistra che comprimerà di

27
00:01:15,620 --> 00:01:17,910
‫nuovo tutto il testo inviato ai client.

28
00:01:17,910 --> 00:01:20,520
‫Quindi non funzionerà per le

29
00:01:20,520 --> 00:01:23,240
‫immagini perché di solito sono già compresse.

30
00:01:23,240 --> 00:01:26,393
‫Quindi, ad esempio, un formato JPEG è già compresso.

31
00:01:28,090 --> 00:01:30,780
‫Quindi funzionerà solo per il testo.

32
00:01:30,780 --> 00:01:33,490
‫Quindi, una volta che il nostro sito

33
00:01:33,490 --> 00:01:37,490
‫Web è stato effettivamente distribuito, verificheremo se questa compressione è effettivamente attiva.

34
00:01:37,490 --> 00:01:40,540
‫Ad ogni modo, il passaggio successivo prima di distribuire la nostra app è

35
00:01:40,540 --> 00:01:43,820
‫sbarazzarsi della maggior parte della console. log che abbiamo ancora

36
00:01:43,820 --> 00:01:45,460
‫nel nostro codice.

37
00:01:45,460 --> 00:01:48,230
‫E questo solo perché questi accessi finiranno nei registri

38
00:01:48,230 --> 00:01:50,053
‫della nostra piattaforma di hosting.

39
00:01:50,990 --> 00:01:54,690
‫E quindi non vogliamo inquinare questi tronchi nella produzione.

40
00:01:54,690 --> 00:01:55,730
‫Va bene.

41
00:01:55,730 --> 00:01:58,173
‫Quindi cerchiamo rapidamente qui per console.

42
00:02:01,310 --> 00:02:03,563
‫E come puoi vedere, ce ne sono molti.

43
00:02:04,400 --> 00:02:06,830
‫Quindi questo è già commentato.

44
00:02:06,830 --> 00:02:09,563
‫Quindi non ho intenzione di lavorare su quello.

45
00:02:11,010 --> 00:02:13,870
‫Ma questo qui, sbarazziamoci davvero.

46
00:02:13,870 --> 00:02:15,370
‫E così ora,

47
00:02:15,370 --> 00:02:17,620
‫uno per uno, daremo un'occhiata a

48
00:02:17,620 --> 00:02:19,230
‫tutti loro e quelli

49
00:02:19,230 --> 00:02:21,700
‫che non sono rilevanti li commenteremo semplicemente.

50
00:02:21,700 --> 00:02:22,880
‫Va bene.

51
00:02:22,880 --> 00:02:26,330
‫Qui nel controller degli errori ne abbiamo anche un sacco, ma

52
00:02:26,330 --> 00:02:28,033
‫alcuni sono effettivamente rilevanti.

53
00:02:29,570 --> 00:02:31,130
‫Ora, non questo.

54
00:02:31,130 --> 00:02:33,130
‫In realtà, liberiamocene completamente.

55
00:02:36,970 --> 00:02:38,240
‫Inoltre non questo,

56
00:02:38,240 --> 00:02:40,190
‫ma poi qui abbiamo questi tre

57
00:02:40,190 --> 00:02:41,920
‫che in realtà abbiamo creato apposta

58
00:02:41,920 --> 00:02:45,520
‫in modo che finiscano nei registri della nostra piattaforma di hosting.

59
00:02:45,520 --> 00:02:46,353
‫Va bene.

60
00:02:46,353 --> 00:02:49,140
‫Quindi ricorda che lo abbiamo impostato in modo

61
00:02:49,140 --> 00:02:52,290
‫tale che quando c'è un errore sul sito Web di

62
00:02:52,290 --> 00:02:54,160
‫rendering, otteniamo un registro

63
00:02:54,160 --> 00:02:56,150
‫dell'errore che si è effettivamente verificato.

64
00:02:56,150 --> 00:02:58,550
‫Insieme a questa emoji qui.

65
00:02:58,550 --> 00:03:00,470
‫E così ogni volta che

66
00:03:00,470 --> 00:03:02,950
‫lo vediamo, possiamo facilmente identificare nei nostri log

67
00:03:02,950 --> 00:03:05,890
‫che è successo qualcosa di brutto dalla nostra parte.

68
00:03:05,890 --> 00:03:08,310
‫Ok, quindi ne abbiamo un altro paio qui.

69
00:03:08,310 --> 00:03:11,250
‫Ad esempio, per altri errori sconosciuti in

70
00:03:11,250 --> 00:03:14,720
‫cui non vogliamo divulgare i dettagli dell'errore al client.

71
00:03:14,720 --> 00:03:17,293
‫E quindi questi vanno bene per tenerli.

72
00:03:18,380 --> 00:03:20,250
‫Questo vogliamo anche conservare per

73
00:03:20,250 --> 00:03:22,140
‫informarci nei log che la connessione

74
00:03:22,140 --> 00:03:24,523
‫al database è andata a buon fine.

75
00:03:25,440 --> 00:03:27,186
‫Anche questi qui.

76
00:03:27,186 --> 00:03:30,500
‫Questo qui è in realtà nei dati import-dev, quindi

77
00:03:30,500 --> 00:03:32,153
‫non sono affatto importanti.

78
00:03:34,290 --> 00:03:36,523
‫Comunque, tutti i registri qui, conserviamoli.

79
00:03:38,610 --> 00:03:41,298
‫Quindi qui, abbiamo questo qui,

80
00:03:41,298 --> 00:03:45,020
‫che abbiamo fatto solo per usare questo livello intermedio.

81
00:03:45,020 --> 00:03:48,200
‫Quindi spegniamo effettivamente questo livello intermedio.

82
00:03:48,200 --> 00:03:50,140
‫Che di nuovo abbiamo usato

83
00:03:50,140 --> 00:03:52,733
‫solo per testare questo post, trova il livello intermedio.

84
00:03:54,520 --> 00:03:56,533
‫Avanti nel modello utente.

85
00:03:57,710 --> 00:04:00,690
‫Bene, anche questo non lo vogliamo.

86
00:04:00,690 --> 00:04:03,293
‫Questo era solo una volta di più a scopo di test.

87
00:04:04,210 --> 00:04:06,370
‫Quindi abbiamo il pacchetto JSON, quindi questi

88
00:04:06,370 --> 00:04:08,593
‫in realtà non sono nemmeno arrivati ai log.

89
00:04:08,593 --> 00:04:10,470
‫Quindi dobbiamo

90
00:04:10,470 --> 00:04:13,180
‫raggruppare dove non cambieremo nulla.

91
00:04:13,180 --> 00:04:14,943
‫Quindi abbiamo index. js.

92
00:04:17,180 --> 00:04:20,030
‫Quindi questo è il nostro JavaScript lato client.

93
00:04:20,030 --> 00:04:22,473
‫Quindi liberiamoci di questa console. accedi qui.

94
00:04:25,848 --> 00:04:28,840
‫Poi ne abbiamo anche altri qui in logout, ma

95
00:04:28,840 --> 00:04:30,640
‫questo in realtà teniamolo.

96
00:04:31,600 --> 00:04:33,263
‫Alcuni più a strisce.

97
00:04:34,210 --> 00:04:36,840
‫E non siamo interessati qui alla sessione.

98
00:04:36,840 --> 00:04:38,940
‫Ma questo qui quando c'è un errore in

99
00:04:38,940 --> 00:04:40,133
‫realtà va bene.

100
00:04:41,660 --> 00:04:43,560
‫E poi nel server. js, abbiamo

101
00:04:43,560 --> 00:04:44,760
‫questi qui, che

102
00:04:44,760 --> 00:04:47,160
‫in realtà, di nuovo, abbiamo fatto apposta.

103
00:04:47,160 --> 00:04:51,120
‫In modo che finiscano davvero per essere visualizzati nei nostri file di registro.

104
00:04:51,120 --> 00:04:53,170
‫E non preoccuparti se non sai davvero cosa

105
00:04:53,170 --> 00:04:55,120
‫intendo con i file di registro.

106
00:04:55,120 --> 00:04:56,790
‫Vedrai quando metteremo

107
00:04:56,790 --> 00:04:59,490
‫effettivamente la nostra applicazione su Heroku.

108
00:04:59,490 --> 00:05:02,980
‫Quindi ti mostrerò i file di registro per allora, va bene.

109
00:05:02,980 --> 00:05:06,360
‫Comunque, tutte queste console. i log qui sono

110
00:05:06,360 --> 00:05:07,373
‫apposta.

111
00:05:08,550 --> 00:05:10,010
‫E anche questo

112
00:05:10,010 --> 00:05:12,533
‫qui sulla connessione al database riuscita.

113
00:05:13,410 --> 00:05:14,320
‫Anche questo

114
00:05:14,320 --> 00:05:17,410
‫qui ci informa sulla porta in cui è in esecuzione l'app.

115
00:05:17,410 --> 00:05:20,063
‫E anche questo e questo sono importanti.

116
00:05:21,440 --> 00:05:22,680
‫Va bene.

117
00:05:22,680 --> 00:05:25,080
‫E così con questo ci siamo occupati di tutte

118
00:05:25,080 --> 00:05:27,880
‫le console non necessarie. log che stiamo

119
00:05:27,880 --> 00:05:30,210
‫solo inquinando i nostri output di log.

120
00:05:30,210 --> 00:05:33,893
‫Ok, chiudiamo qui tutti questi file.

121
00:05:40,020 --> 00:05:41,230
‫Va bene.

122
00:05:41,230 --> 00:05:42,460
‫E ora,

123
00:05:42,460 --> 00:05:45,190
‫passaggio successivo, cambiamo URL o codici API

124
00:05:45,190 --> 00:05:47,073
‫nel lato client, JavaScript.

125
00:05:48,540 --> 00:05:51,720
‫Quindi per esempio qui in login. js, in

126
00:05:51,720 --> 00:05:54,170
‫questo momento eseguiamo questi codici API

127
00:05:54,170 --> 00:05:56,300
‫su questa API di sviluppo.

128
00:05:56,300 --> 00:05:58,803
‫Quindi qui, ovviamente, abbiamo il nostro URL di sviluppo.

129
00:06:00,293 --> 00:06:01,126
‫E

130
00:06:01,126 --> 00:06:03,090
‫così in questo modo, non funzionerà

131
00:06:03,090 --> 00:06:04,840
‫in produzione perché ovviamente da

132
00:06:04,840 --> 00:06:08,740
‫lì non saremo in grado di accedere a nessun URL di sviluppo.

133
00:06:08,740 --> 00:06:10,000
‫E lo stesso quassù.

134
00:06:10,000 --> 00:06:13,050
‫Ma fortunatamente c'è una soluzione molto semplice.

135
00:06:13,050 --> 00:06:17,360
‫Quindi tutto ciò che dobbiamo fare è sbarazzarci davvero di questa parte.

136
00:06:17,360 --> 00:06:19,760
‫Quindi, se lo eliminiamo in

137
00:06:19,760 --> 00:06:22,740
‫questo modo, finiremo con questo URL relativo.

138
00:06:22,740 --> 00:06:24,810
‫E poiché l'API e

139
00:06:24,810 --> 00:06:27,060
‫il sito Web sono ospitati

140
00:06:27,060 --> 00:06:29,430
‫sullo stesso server, funzionerà perfettamente.

141
00:06:29,430 --> 00:06:31,410
‫Quindi farlo in questo

142
00:06:31,410 --> 00:06:35,550
‫modo è un po' come specificare il percorso delle immagini nell'HTML.

143
00:06:35,550 --> 00:06:38,670
‫Ad esempio, qui nella pagina di

144
00:06:38,670 --> 00:06:40,230
‫panoramica, dove

145
00:06:40,230 --> 00:06:42,660
‫abbiamo queste immagini, diciamo semplicemente

146
00:06:42,660 --> 00:06:44,990
‫"/img" e questo andrà all'URL

147
00:06:44,990 --> 00:06:48,510
‫corrente e quindi aggiungerà quel percorso a quello.

148
00:06:48,510 --> 00:06:49,343
‫Va bene.

149
00:06:49,343 --> 00:06:51,980
‫E quindi la stessa cosa sta per accadere qui.

150
00:06:51,980 --> 00:06:52,930
‫Va bene.

151
00:06:52,930 --> 00:06:56,620
‫Ora di nuovo, funziona solo perché l'API e il sito

152
00:06:56,620 --> 00:06:59,310
‫Web utilizzano sostanzialmente lo stesso URL.

153
00:06:59,310 --> 00:07:01,810
‫Quindi li ospitiamo nello stesso posto.

154
00:07:01,810 --> 00:07:03,660
‫Ma se ospitassi il tuo

155
00:07:03,660 --> 00:07:05,880
‫sito web o il tuo front-end su

156
00:07:05,880 --> 00:07:08,260
‫un URL e poi la tua API su

157
00:07:08,260 --> 00:07:11,110
‫un altro URL, allora non funzionerebbe in questo modo, ok.

158
00:07:11,110 --> 00:07:14,730
‫Ma in questa semplice applicazione possiamo farlo in questo modo

159
00:07:14,730 --> 00:07:17,173
‫perché abbiamo questa configurazione molto semplice.

160
00:07:20,160 --> 00:07:22,880
‫Quindi cancelliamolo qui in login.

161
00:07:22,880 --> 00:07:26,030
‫Nell'indice credo che non abbiamo alcun URL.

162
00:07:27,560 --> 00:07:28,563
‫Si, è esatto.

163
00:07:29,460 --> 00:07:31,140
‫Inoltre non negli avvisi.

164
00:07:31,140 --> 00:07:34,063
‫Non in Mapbox credo.

165
00:07:36,090 --> 00:07:36,923
‫No.

166
00:07:38,280 --> 00:07:39,763
‫Ma sicuramente a righe.

167
00:07:40,780 --> 00:07:42,523
‫Quindi per ottenere la nostra sessione.

168
00:07:43,890 --> 00:07:46,880
‫Quindi possiamo fare esattamente la stessa cosa qui.

169
00:07:46,880 --> 00:07:48,430
‫E anche in updateSettings.

170
00:07:52,940 --> 00:07:54,350
‫Va bene.

171
00:07:54,350 --> 00:07:55,183
‫Dagli un salvataggio.

172
00:07:55,183 --> 00:07:56,800
‫E tutti loro.

173
00:07:56,800 --> 00:07:59,780
‫E così anche quello è fisso.

174
00:07:59,780 --> 00:08:02,890
‫E ora, finalmente, e continuando a lavorare sul

175
00:08:02,890 --> 00:08:04,460
‫JavaScript lato client,

176
00:08:04,460 --> 00:08:06,473
‫dobbiamo creare il nostro bundle finale.

177
00:08:07,370 --> 00:08:08,250
‫Va bene.

178
00:08:08,250 --> 00:08:11,420
‫Quindi, in questo momento, questo è il nostro file JavaScript del pacchetto.

179
00:08:11,420 --> 00:08:13,680
‫Ma ricorda che questo è stato appena

180
00:08:13,680 --> 00:08:15,453
‫creato utilizzando la funzione orologio.

181
00:08:17,607 --> 00:08:18,920
‫Quindi nel nostro pacchetto. json

182
00:08:18,920 --> 00:08:22,350
‫abbiamo questo orologio. js che creerà semplicemente

183
00:08:22,350 --> 00:08:25,540
‫un nuovo pacchetto ogni volta che cambiamo uno dei file.

184
00:08:25,540 --> 00:08:27,030
‫Ma senza alcuna

185
00:08:27,030 --> 00:08:29,723
‫compressione o senza alcuna ottimizzazione delle prestazioni.

186
00:08:30,720 --> 00:08:33,670
‫Ma ora che abbiamo davvero finito con tutto il nostro

187
00:08:33,670 --> 00:08:36,430
‫JavaScript, siamo pronti per costruire effettivamente il nostro

188
00:08:36,430 --> 00:08:38,200
‫JavaScript in un pacchetto finale.

189
00:08:38,200 --> 00:08:42,120
‫E qui dovremmo sostituire questo orologio con build, in

190
00:08:42,120 --> 00:08:43,730
‫modo che creerà

191
00:08:43,730 --> 00:08:46,860
‫il nostro pacchetto JavaScript compresso finale.

192
00:08:46,860 --> 00:08:48,100
‫Va bene.

193
00:08:48,100 --> 00:08:50,590
‫Quindi proviamolo qui ora.

194
00:08:50,590 --> 00:08:51,963
‫Con npm eseguito.

195
00:08:54,190 --> 00:08:57,023
‫E ancora una volta con la scheda per il completamento automatico.

196
00:09:00,050 --> 00:09:01,810
‫Allora vediamo se...

197
00:09:01,810 --> 00:09:03,530
‫Ed è fatto.

198
00:09:03,530 --> 00:09:06,593
‫E quindi diamo un'occhiata al nostro pacchetto ora.

199
00:09:07,610 --> 00:09:10,560
‫E per vederlo ora, è davvero così

200
00:09:10,560 --> 00:09:12,003
‫ben compresso.

201
00:09:13,840 --> 00:09:14,800
‫Va bene.

202
00:09:14,800 --> 00:09:19,000
‫Ora vedi anche che abbiamo un sacco di questi nuovi file

203
00:09:19,000 --> 00:09:23,110
‫qui e questo perché sei nel nostro albero dei file.

204
00:09:23,110 --> 00:09:26,230
‫Il pacco crea effettivamente questa cartella cache.

205
00:09:26,230 --> 00:09:31,230
‫Ma non vogliamo quella cartella nel nostro deposito Git.

206
00:09:31,360 --> 00:09:32,193
‫Destra.

207
00:09:32,193 --> 00:09:33,300
‫Quindi aggiungiamolo qui.

208
00:09:38,610 --> 00:09:39,610
‫E

209
00:09:39,610 --> 00:09:42,280
‫così ora vedi che automaticamente

210
00:09:42,280 --> 00:09:44,560
‫non appena lo salviamo, tornerà

211
00:09:44,560 --> 00:09:47,910
‫ai file originali che sono stati aggiornati.

212
00:09:47,910 --> 00:09:48,743
‫Va bene.

213
00:09:48,743 --> 00:09:51,380
‫Quindi, ancora una volta, VS Code è

214
00:09:51,380 --> 00:09:54,380
‫davvero intelligente su tutto ciò che riguarda git.

215
00:09:54,380 --> 00:09:55,213
‫Va bene.

216
00:09:56,550 --> 00:09:57,383
‫Va bene.

217
00:09:57,383 --> 00:09:59,403
‫E penso che sia davvero così.

218
00:10:00,755 --> 00:10:03,840
‫Quindi la nostra applicazione è ora pronta per essere davvero implementata.

219
00:10:03,840 --> 00:10:06,800
‫E quindi ora l'ultimo passaggio è quello

220
00:10:06,800 --> 00:10:10,300
‫di inviare effettivamente tutti questi file modificati al nostro repository.

221
00:10:10,300 --> 00:10:13,490
‫Quindi ricorda che il primo passo è aggiungere tutti i file

222
00:10:13,490 --> 00:10:14,643
‫all'area di staging.

223
00:10:15,510 --> 00:10:19,740
‫Quindi git add, e in questo caso, tutti i file.

224
00:10:19,740 --> 00:10:20,660
‫Va bene.

225
00:10:20,660 --> 00:10:24,880
‫E ora tutto ciò che dobbiamo fare

226
00:10:24,880 --> 00:10:27,907
‫è git commit, quindi

227
00:10:27,907 --> 00:10:32,907
‫il messaggio e diciamo "App preparata per la distribuzione".

228
00:10:34,970 --> 00:10:35,803
‫Grande!

229
00:10:35,803 --> 00:10:38,820
‫Quindi vedi che tutte le nostre modifiche sono sparite.

230
00:10:38,820 --> 00:10:40,290
‫Anche da qui.

231
00:10:40,290 --> 00:10:42,700
‫Il che significa che l'attuale ramo di

232
00:10:42,700 --> 00:10:44,333
‫lavoro è chiamato pulito.

233
00:10:45,735 --> 00:10:48,810
‫E quindi sì, ora siamo pronti per distribuire la nostra app

234
00:10:48,810 --> 00:10:49,823
‫nel prossimo video.