1
00:00:01,030 --> 00:00:04,400
‫- : Nous sommes presque prêts à déployer notre application maintenant.

2
00:00:04,400 --> 00:00:05,860
‫Mais avant de faire

3
00:00:05,860 --> 00:00:07,750
‫cela, il y a en fait quelques

4
00:00:07,750 --> 00:00:09,410
‫choses dont nous devons nous occuper.

5
00:00:09,410 --> 00:00:10,883
‫Et alors faisons-le maintenant.

6
00:00:12,640 --> 00:00:14,570
‫Et la première chose que

7
00:00:14,570 --> 00:00:15,837
‫je veux faire

8
00:00:15,837 --> 00:00:19,060
‫est d'installer un package qui va compresser toutes nos réponses.

9
00:00:19,060 --> 00:00:22,820
‫Donc, fondamentalement, chaque fois que nous envoyons une réponse texte à un

10
00:00:22,820 --> 00:00:26,020
‫client, peu importe qu'il s'agisse de code JSON ou HTML.

11
00:00:26,020 --> 00:00:27,520
‫Avec le package

12
00:00:27,520 --> 00:00:30,820
‫de compression, ce texte sera alors considérablement compressé.

13
00:00:30,820 --> 00:00:33,990
‫Très bien, alors installons-nous ici.

14
00:00:33,990 --> 00:00:38,123
‫Npm install, et simplement, compression.

15
00:00:39,400 --> 00:00:40,233
‫Très bien.

16
00:00:41,200 --> 00:00:42,863
‫Alors incluons cela ici.

17
00:00:51,061 --> 00:00:53,160
‫Maintenant, cela exposera alors une fonction

18
00:00:53,160 --> 00:00:54,983
‫de couche intermédiaire très

19
00:00:54,983 --> 00:00:56,820
‫simple que nous devons simplement

20
00:00:56,820 --> 00:00:59,020
‫connecter à notre pile de couche intermédiaire.

21
00:00:59,020 --> 00:01:00,773
‫Alors faisons-le quelque part ici.

22
00:01:02,110 --> 00:01:05,260
‫Près de la fin, ça n'a pas vraiment d'importance.

23
00:01:05,260 --> 00:01:07,133
‫Donc appli. utiliser,

24
00:01:08,060 --> 00:01:10,570
‫entrez là compression d'appel.

25
00:01:10,570 --> 00:01:13,400
‫Donc, ceci ici renverra alors une fonction au milieu

26
00:01:13,400 --> 00:01:15,620
‫à gauche qui va ensuite à

27
00:01:15,620 --> 00:01:17,910
‫nouveau compresser tout le texte envoyé aux clients.

28
00:01:17,910 --> 00:01:20,520
‫Cela ne fonctionnera donc pas pour

29
00:01:20,520 --> 00:01:23,240
‫les images car elles sont généralement déjà compressées.

30
00:01:23,240 --> 00:01:26,393
‫Ainsi, par exemple, un format JPEG est déjà compressé.

31
00:01:28,090 --> 00:01:30,780
‫Donc, cela ne fonctionnera que pour le texte.

32
00:01:30,780 --> 00:01:33,490
‫Ainsi, une fois notre site Web

33
00:01:33,490 --> 00:01:37,490
‫réellement déployé, nous testerons ensuite si cette compression est réellement active.

34
00:01:37,490 --> 00:01:40,540
‫Quoi qu'il en soit, la prochaine étape avant de déployer notre application est de se

35
00:01:40,540 --> 00:01:43,820
‫débarrasser de la majeure partie de la console. logs que nous avons

36
00:01:43,820 --> 00:01:45,460
‫encore dans notre code.

37
00:01:45,460 --> 00:01:48,230
‫Et c'est simplement parce que ces connexions se retrouveront dans

38
00:01:48,230 --> 00:01:50,053
‫les journaux de notre plate-forme d'hébergement.

39
00:01:50,990 --> 00:01:54,690
‫Et donc nous ne voulons pas polluer ces grumes en production.

40
00:01:54,690 --> 00:01:55,730
‫D'accord.

41
00:01:55,730 --> 00:01:58,173
‫Alors cherchons rapidement ici pour console.

42
00:02:01,310 --> 00:02:03,563
‫Et comme vous pouvez le voir, il y en a beaucoup.

43
00:02:04,400 --> 00:02:06,830
‫Celui-ci est donc déjà commenté.

44
00:02:06,830 --> 00:02:09,563
‫Je ne vais donc pas travailler sur celui-là.

45
00:02:11,010 --> 00:02:13,870
‫Mais celui-ci ici, débarrassons-nous en fait.

46
00:02:13,870 --> 00:02:15,370
‫Et donc maintenant,

47
00:02:15,370 --> 00:02:17,620
‫un par un, nous les examinerons

48
00:02:17,620 --> 00:02:19,230
‫tous et ceux qui ne

49
00:02:19,230 --> 00:02:21,700
‫sont pas pertinents, nous les commenterons simplement.

50
00:02:21,700 --> 00:02:22,880
‫Très bien.

51
00:02:22,880 --> 00:02:26,330
‫Ici, dans le contrôleur d'erreur, nous en avons également une tonne, mais

52
00:02:26,330 --> 00:02:28,033
‫certains sont en fait pertinents.

53
00:02:29,570 --> 00:02:31,130
‫Maintenant, pas celui-ci.

54
00:02:31,130 --> 00:02:33,130
‫En fait, débarrassons-nous-en complètement.

55
00:02:36,970 --> 00:02:38,240
‫Pas celui-ci non

56
00:02:38,240 --> 00:02:40,190
‫plus, mais ici, nous avons ces

57
00:02:40,190 --> 00:02:41,920
‫trois que nous avons créés exprès

58
00:02:41,920 --> 00:02:45,520
‫pour qu'ils se retrouvent dans les journaux de notre plate-forme d'hébergement.

59
00:02:45,520 --> 00:02:46,353
‫D'accord.

60
00:02:46,353 --> 00:02:49,140
‫N'oubliez donc pas que nous l'avons configuré de manière à

61
00:02:49,140 --> 00:02:52,290
‫ce que, lorsqu'il y a une erreur sur le site Web

62
00:02:52,290 --> 00:02:54,160
‫de rendu, nous obtenions un

63
00:02:54,160 --> 00:02:56,150
‫journal de l'erreur qui s'est réellement produite.

64
00:02:56,150 --> 00:02:58,550
‫Avec cet emoji ici.

65
00:02:58,550 --> 00:03:00,470
‫Et donc chaque fois que nous

66
00:03:00,470 --> 00:03:02,950
‫voyons cela, nous pouvons alors facilement identifier dans nos

67
00:03:02,950 --> 00:03:05,890
‫journaux que quelque chose de mal s'est passé de notre côté.

68
00:03:05,890 --> 00:03:08,310
‫D'accord, et nous en avons donc quelques autres ici.

69
00:03:08,310 --> 00:03:11,250
‫Par exemple, pour d'autres erreurs inconnues pour lesquelles

70
00:03:11,250 --> 00:03:14,720
‫nous ne voulons pas divulguer les détails de l'erreur au client.

71
00:03:14,720 --> 00:03:17,293
‫Et donc ceux-ci sont d'accord pour les garder.

72
00:03:18,380 --> 00:03:20,250
‫Celui-ci que nous souhaitons également conserver

73
00:03:20,250 --> 00:03:22,140
‫afin de nous informer dans les journaux que

74
00:03:22,140 --> 00:03:24,523
‫la connexion à la base de données a réussi.

75
00:03:25,440 --> 00:03:27,186
‫Ceux là aussi.

76
00:03:27,186 --> 00:03:30,500
‫Celui-ci ici est en fait dans import-dev-data, donc ils ne sont

77
00:03:30,500 --> 00:03:32,153
‫pas du tout importants.

78
00:03:34,290 --> 00:03:36,523
‫Quoi qu'il en soit, tous les journaux ici, gardons-les.

79
00:03:38,610 --> 00:03:41,298
‫Alors ici, nous avons celui-ci ici, que

80
00:03:41,298 --> 00:03:45,020
‫nous n'avons vraiment fait que pour utiliser cette couche intermédiaire.

81
00:03:45,020 --> 00:03:48,200
‫Désactivons donc cette couche intermédiaire.

82
00:03:48,200 --> 00:03:50,140
‫Encore une fois, nous n'avons

83
00:03:50,140 --> 00:03:52,733
‫vraiment utilisé que pour tester cette couche intermédiaire.

84
00:03:54,520 --> 00:03:56,533
‫Ensuite, dans le modèle utilisateur.

85
00:03:57,710 --> 00:04:00,690
‫Eh bien, celui-ci nous ne voulons pas non plus.

86
00:04:00,690 --> 00:04:03,293
‫C'était juste une fois de plus à des fins de test.

87
00:04:04,210 --> 00:04:06,370
‫Ensuite, nous avons le package JSON, donc

88
00:04:06,370 --> 00:04:08,593
‫ceux-ci ne sont même pas entrés dans les journaux.

89
00:04:08,593 --> 00:04:10,470
‫Ensuite, nous devons

90
00:04:10,470 --> 00:04:13,180
‫regrouper où nous n'allons rien changer.

91
00:04:13,180 --> 00:04:14,943
‫Ensuite, nous avons index. js.

92
00:04:17,180 --> 00:04:20,030
‫Voilà donc notre JavaScript côté client.

93
00:04:20,030 --> 00:04:22,473
‫Alors débarrassons-nous de cette console. connectez-vous ici.

94
00:04:25,848 --> 00:04:28,840
‫Ensuite, nous en avons aussi d'autres ici en déconnexion,

95
00:04:28,840 --> 00:04:30,640
‫mais celui-ci gardons-le en fait.

96
00:04:31,600 --> 00:04:33,263
‫D'autres en rayures.

97
00:04:34,210 --> 00:04:36,840
‫Et nous ne sommes pas intéressés ici par la session.

98
00:04:36,840 --> 00:04:38,940
‫Mais celui-ci ici quand il y a une erreur

99
00:04:38,940 --> 00:04:40,133
‫est en fait correct.

100
00:04:41,660 --> 00:04:43,560
‫Et puis en serveur. js, nous

101
00:04:43,560 --> 00:04:44,760
‫les avons ici, ce

102
00:04:44,760 --> 00:04:47,160
‫que nous avons fait, encore une fois, exprès.

103
00:04:47,160 --> 00:04:51,120
‫Pour qu'ils finissent vraiment par apparaître dans nos fichiers journaux.

104
00:04:51,120 --> 00:04:53,170
‫Et ne vous inquiétez pas si vous ne savez pas vraiment

105
00:04:53,170 --> 00:04:55,120
‫ce que je veux dire avec les fichiers journaux.

106
00:04:55,120 --> 00:04:56,790
‫Vous verrez une fois

107
00:04:56,790 --> 00:04:59,490
‫que nous aurons mis notre application sur Heroku.

108
00:04:59,490 --> 00:05:02,980
‫Je vais donc vous montrer les fichiers journaux d'ici là, d'accord.

109
00:05:02,980 --> 00:05:06,360
‫Quoi qu'il en soit, toutes ces consoles. les journaux ici sont

110
00:05:06,360 --> 00:05:07,373
‫exprès.

111
00:05:08,550 --> 00:05:10,010
‫Et celui-ci concerne également

112
00:05:10,010 --> 00:05:12,533
‫la connexion réussie à la base de données.

113
00:05:13,410 --> 00:05:14,320
‫Celui-ci nous

114
00:05:14,320 --> 00:05:17,410
‫informe également du port sur lequel l'application est en cours d'exécution.

115
00:05:17,410 --> 00:05:20,063
‫Et celui-ci, et celui-ci sont également importants.

116
00:05:21,440 --> 00:05:22,680
‫Très bien.

117
00:05:22,680 --> 00:05:25,080
‫Et donc avec cela, nous nous sommes occupés de

118
00:05:25,080 --> 00:05:27,880
‫toute la console inutile. journaux que nous ne

119
00:05:27,880 --> 00:05:30,210
‫faisons que polluer nos sorties de journaux.

120
00:05:30,210 --> 00:05:33,893
‫D'accord, fermons tous ces fichiers ici.

121
00:05:40,020 --> 00:05:41,230
‫Très bien.

122
00:05:41,230 --> 00:05:42,460
‫Et maintenant,

123
00:05:42,460 --> 00:05:45,190
‫étape suivante, modifions les URL ou les codes

124
00:05:45,190 --> 00:05:47,073
‫API du côté client, JavaScript.

125
00:05:48,540 --> 00:05:51,720
‫Donc par exemple ici dans login. js, en ce

126
00:05:51,720 --> 00:05:54,170
‫moment nous faisons ces codes d'API

127
00:05:54,170 --> 00:05:56,300
‫à cette API de développement.

128
00:05:56,300 --> 00:05:58,803
‫Donc ici, nous avons bien sûr notre URL de développement.

129
00:06:00,293 --> 00:06:01,126
‫Et donc

130
00:06:01,126 --> 00:06:03,090
‫comme ça, ça ne va pas

131
00:06:03,090 --> 00:06:04,840
‫fonctionner en production car évidemment

132
00:06:04,840 --> 00:06:08,740
‫à partir de là, nous ne pourrons accéder à aucune URL de développement.

133
00:06:08,740 --> 00:06:10,000
‫Et la même chose ici.

134
00:06:10,000 --> 00:06:13,050
‫Mais heureusement, il existe une solution très simple.

135
00:06:13,050 --> 00:06:17,360
‫Donc tout ce que nous devons faire est de vraiment nous débarrasser de cette partie.

136
00:06:17,360 --> 00:06:19,760
‫Donc, si nous le supprimons comme

137
00:06:19,760 --> 00:06:22,740
‫ceci, nous allons nous retrouver avec cette URL relative.

138
00:06:22,740 --> 00:06:24,810
‫Et comme l'API et

139
00:06:24,810 --> 00:06:27,060
‫le site Web sont hébergés sur

140
00:06:27,060 --> 00:06:29,430
‫le même serveur, cela fonctionnera parfaitement.

141
00:06:29,430 --> 00:06:31,410
‫Donc, faire comme ça, c'est

142
00:06:31,410 --> 00:06:35,550
‫un peu comme spécifier le chemin d'accès aux images dans le code HTML.

143
00:06:35,550 --> 00:06:38,670
‫Par exemple, ici, dans la page d'aperçu,

144
00:06:38,670 --> 00:06:40,230
‫où nous avons

145
00:06:40,230 --> 00:06:42,660
‫ces images, nous disons simplement "/img"

146
00:06:42,660 --> 00:06:44,990
‫et cela ira ensuite à

147
00:06:44,990 --> 00:06:48,510
‫l'URL actuelle et ajoutera ensuite ce chemin à cela.

148
00:06:48,510 --> 00:06:49,343
‫D'accord.

149
00:06:49,343 --> 00:06:51,980
‫Et donc la même chose va se passer ici.

150
00:06:51,980 --> 00:06:52,930
‫D'accord.

151
00:06:52,930 --> 00:06:56,620
‫Encore une fois, cela ne fonctionne que parce que l'API et

152
00:06:56,620 --> 00:06:59,310
‫le site Web utilisent essentiellement la même URL.

153
00:06:59,310 --> 00:07:01,810
‫Nous les hébergeons donc au même endroit.

154
00:07:01,810 --> 00:07:03,660
‫Mais si vous hébergez votre

155
00:07:03,660 --> 00:07:05,880
‫site Web ou votre front-end sur

156
00:07:05,880 --> 00:07:08,260
‫une URL, puis votre API sur une

157
00:07:08,260 --> 00:07:11,110
‫autre URL, cela ne fonctionnera pas comme ça, d'accord.

158
00:07:11,110 --> 00:07:14,730
‫Mais dans cette application simple, nous pouvons simplement le faire comme ceci

159
00:07:14,730 --> 00:07:17,173
‫car nous avons cette configuration très simple.

160
00:07:20,160 --> 00:07:22,880
‫Alors supprimons-le ici dans la connexion.

161
00:07:22,880 --> 00:07:26,030
‫Dans l'index, je crois que nous n'avons pas d'URL.

162
00:07:27,560 --> 00:07:28,563
‫Oui c'est vrai.

163
00:07:29,460 --> 00:07:31,140
‫Pas non plus dans les alertes.

164
00:07:31,140 --> 00:07:34,063
‫Pas dans Mapbox je crois.

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

166
00:07:38,280 --> 00:07:39,763
‫Mais certainement en rayure.

167
00:07:40,780 --> 00:07:42,523
‫Alors pour avoir notre séance.

168
00:07:43,890 --> 00:07:46,880
‫Nous pouvons donc faire exactement la même chose ici.

169
00:07:46,880 --> 00:07:48,430
‫Et aussi dans updateSettings.

170
00:07:52,940 --> 00:07:54,350
‫D'accord.

171
00:07:54,350 --> 00:07:55,183
‫Donnez-lui une sauvegarde.

172
00:07:55,183 --> 00:07:56,800
‫Et tous.

173
00:07:56,800 --> 00:07:59,780
‫Et pour que celui-ci soit également corrigé.

174
00:07:59,780 --> 00:08:02,890
‫Et maintenant, enfin, et en continuant à travailler sur

175
00:08:02,890 --> 00:08:04,460
‫JavaScript côté client,

176
00:08:04,460 --> 00:08:06,473
‫nous devons créer notre bundle final.

177
00:08:07,370 --> 00:08:08,250
‫Très bien.

178
00:08:08,250 --> 00:08:11,420
‫Alors maintenant, voici notre fichier JavaScript groupé.

179
00:08:11,420 --> 00:08:13,680
‫Mais rappelez-vous que cela vient d'être créé à

180
00:08:13,680 --> 00:08:15,453
‫l'aide de la fonction montre.

181
00:08:17,607 --> 00:08:18,920
‫Donc dans notre colis. json

182
00:08:18,920 --> 00:08:22,350
‫nous avons cette montre. js qui créera simplement un

183
00:08:22,350 --> 00:08:25,540
‫nouveau bundle chaque fois que nous modifions l'un des fichiers.

184
00:08:25,540 --> 00:08:27,030
‫Mais sans aucune

185
00:08:27,030 --> 00:08:29,723
‫compression, ou sans aucune optimisation des performances.

186
00:08:30,720 --> 00:08:33,670
‫Mais maintenant que nous avons vraiment terminé avec tout notre

187
00:08:33,670 --> 00:08:36,430
‫JavaScript, nous sommes prêts à réellement construire notre

188
00:08:36,430 --> 00:08:38,200
‫JavaScript dans un bundle final.

189
00:08:38,200 --> 00:08:42,120
‫Et ici, nous devons remplacer cette montre par build,

190
00:08:42,120 --> 00:08:43,730
‫ce qui créera

191
00:08:43,730 --> 00:08:46,860
‫ensuite notre package JavaScript compressé final.

192
00:08:46,860 --> 00:08:48,100
‫Très bien.

193
00:08:48,100 --> 00:08:50,590
‫Alors essayons ça ici maintenant.

194
00:08:50,590 --> 00:08:51,963
‫Avec npm exécuté.

195
00:08:54,190 --> 00:08:57,023
‫Et encore une fois avec l'onglet pour compléter automatiquement.

196
00:09:00,050 --> 00:09:01,810
‫Voyons donc si...

197
00:09:01,810 --> 00:09:03,530
‫Et c'est fait.

198
00:09:03,530 --> 00:09:06,593
‫Et donc jetons un coup d'œil à notre paquet maintenant.

199
00:09:07,610 --> 00:09:10,560
‫Et pour voir ça maintenant, c'est vraiment

200
00:09:10,560 --> 00:09:12,003
‫si joliment compressé.

201
00:09:13,840 --> 00:09:14,800
‫Très bien.

202
00:09:14,800 --> 00:09:19,000
‫Maintenant, vous voyez également que nous avons une tonne de ces nouveaux fichiers

203
00:09:19,000 --> 00:09:23,110
‫ici et c'est parce que vous êtes dans notre arborescence de fichiers.

204
00:09:23,110 --> 00:09:26,230
‫Parcel crée en fait ce dossier de cache.

205
00:09:26,230 --> 00:09:31,230
‫Mais nous ne voulons pas de ce dossier dans notre dépôt git.

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

207
00:09:32,193 --> 00:09:33,300
‫Ajoutons donc cela ici.

208
00:09:38,610 --> 00:09:39,610
‫Et maintenant,

209
00:09:39,610 --> 00:09:42,280
‫vous voyez automatiquement que dès que nous

210
00:09:42,280 --> 00:09:44,560
‫l'aurons enregistré, il reviendra aux

211
00:09:44,560 --> 00:09:47,910
‫fichiers d'origine qui ont été mis à jour.

212
00:09:47,910 --> 00:09:48,743
‫D'accord.

213
00:09:48,743 --> 00:09:51,380
‫Donc, une fois de plus, VS Code

214
00:09:51,380 --> 00:09:54,380
‫est vraiment intelligent pour tout ce qui concerne git.

215
00:09:54,380 --> 00:09:55,213
‫Très bien.

216
00:09:56,550 --> 00:09:57,383
‫D'accord.

217
00:09:57,383 --> 00:09:59,403
‫Et je pense que c'est effectivement ça.

218
00:10:00,755 --> 00:10:03,840
‫Notre application est donc maintenant prête à être réellement déployée.

219
00:10:03,840 --> 00:10:06,800
‫Et maintenant, la dernière étape consiste

220
00:10:06,800 --> 00:10:10,300
‫à valider tous ces fichiers modifiés dans notre référentiel.

221
00:10:10,300 --> 00:10:13,490
‫N'oubliez donc pas que la première étape consiste à ajouter tous les fichiers à

222
00:10:13,490 --> 00:10:14,643
‫la zone de transfert.

223
00:10:15,510 --> 00:10:19,740
‫Alors git add, et dans ce cas, tous les fichiers.

224
00:10:19,740 --> 00:10:20,660
‫Très bien.

225
00:10:20,660 --> 00:10:24,880
‫Et maintenant, tout ce que nous avons à faire

226
00:10:24,880 --> 00:10:27,907
‫est de git commit, puis

227
00:10:27,907 --> 00:10:32,907
‫le message, et disons : "Application préparée pour le déploiement".

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

229
00:10:35,803 --> 00:10:38,820
‫Vous voyez donc que toutes nos modifications ont disparu.

230
00:10:38,820 --> 00:10:40,290
‫Aussi d'ici.

231
00:10:40,290 --> 00:10:42,700
‫Ce qui signifie que la branche de travail

232
00:10:42,700 --> 00:10:44,333
‫actuelle est dite propre.

233
00:10:45,735 --> 00:10:48,810
‫Et donc oui, nous sommes maintenant prêts à déployer notre application dans

234
00:10:48,810 --> 00:10:49,823
‫la prochaine vidéo.