1
00:00:01,150 --> 00:00:03,130
‫Instructor: Entonces, después de todo

2
00:00:03,130 --> 00:00:06,850
‫este tiempo y todo este trabajo en la construcción de este

3
00:00:06,850 --> 00:00:09,660
‫enorme proyecto completo, finalmente es el momento de

4
00:00:09,660 --> 00:00:13,370
‫implementarlo realmente en un servidor web y compartirlo con el mundo.

5
00:00:13,370 --> 00:00:15,510
‫Entonces, en este video,

6
00:00:15,510 --> 00:00:18,467
‫aprenderá cómo implementar un proyecto en Heroku.

7
00:00:20,167 --> 00:00:22,610
‫Y lo primero que debemos

8
00:00:22,610 --> 00:00:25,143
‫hacer es instalar Heroku en nuestra computadora.

9
00:00:26,870 --> 00:00:30,427
‫Entonces, busquemos Heroku NodeJS.

10
00:00:35,020 --> 00:00:38,050
‫Y entonces, aquí, básicamente tenemos una

11
00:00:38,050 --> 00:00:41,530
‫guía de introducción para NodeJS con Heroku

12
00:00:41,530 --> 00:00:45,000
‫porque puede alojar todo tipo de aplicaciones

13
00:00:45,000 --> 00:00:48,700
‫en Heroku como PHP o Ruby on Rails.

14
00:00:48,700 --> 00:00:51,190
‫Entonces, no solo funciona para NodeJS.

15
00:00:51,190 --> 00:00:54,420
‫Y veremos más de cerca a Heroku en

16
00:00:54,420 --> 00:00:57,520
‫un segundo, pero por ahora, comencemos por instalar

17
00:00:57,520 --> 00:00:59,200
‫este programa aquí.

18
00:00:59,200 --> 00:01:02,630
‫Entonces, estoy en la parte de configuración de esta guía aquí.

19
00:01:02,630 --> 00:01:05,580
‫Entonces, ahora, continúe e instale el

20
00:01:05,580 --> 00:01:08,540
‫instalador para su plataforma, ya sea

21
00:01:08,540 --> 00:01:10,660
‫macOS, Windows o Linux.

22
00:01:10,660 --> 00:01:14,660
‫O, en este caso aquí, supongo que solo funciona para Ubuntu.

23
00:01:14,660 --> 00:01:17,270
‫No, en realidad aquí dice que también

24
00:01:17,270 --> 00:01:19,770
‫está disponible para otros Linux.

25
00:01:19,770 --> 00:01:22,260
‫De todos modos, continúe e instale

26
00:01:22,260 --> 00:01:24,010
‫la versión que necesita

27
00:01:24,010 --> 00:01:27,090
‫para su computadora y luego, mientras tanto, mientras

28
00:01:27,090 --> 00:01:30,190
‫se instala, continúe y cree una nueva cuenta.

29
00:01:30,190 --> 00:01:32,700
‫Entonces, haga clic aquí en Registrarse

30
00:01:32,700 --> 00:01:36,010
‫y luego abra su cuenta gratuita de Heroku.

31
00:01:36,010 --> 00:01:38,890
‫Entonces, otra cuenta más que necesita crear.

32
00:01:38,890 --> 00:01:41,640
‫Entonces, realmente hay muchas cuentas diferentes

33
00:01:41,640 --> 00:01:45,140
‫que necesitas crear para completar este proyecto, pero

34
00:01:45,140 --> 00:01:49,310
‫supongo que así es como funciona el desarrollo web moderno.

35
00:01:49,310 --> 00:01:51,730
‫De todos modos, después de que haya

36
00:01:51,730 --> 00:01:55,050
‫creado su cuenta, echemos un vistazo rápido aquí en el sitio

37
00:01:55,050 --> 00:01:59,830
‫web de Heroku solo para obtener una descripción general de lo que es esta plataforma.

38
00:01:59,830 --> 00:02:01,700
‫Entonces, Heroku es esta

39
00:02:01,700 --> 00:02:04,870
‫plataforma que hace que sea realmente muy fácil y

40
00:02:04,870 --> 00:02:07,290
‫sin complicaciones implementar sus aplicaciones web.

41
00:02:07,290 --> 00:02:10,360
‫Y, nuevamente, pueden usar cualquier idioma que

42
00:02:10,360 --> 00:02:11,650
‫puedas imaginar.

43
00:02:11,650 --> 00:02:14,600
‫Como ves, NodeJS, Ruby on Rails,

44
00:02:14,600 --> 00:02:17,820
‫este supongo que es Go, o en

45
00:02:17,820 --> 00:02:22,050
‫realidad es Java, o PHP, Python, este es Go, ¿verdad?

46
00:02:22,050 --> 00:02:27,050
‫Y así, todo tipo de aplicaciones realmente se ejecutan en Heroku.

47
00:02:28,380 --> 00:02:30,890
‫Entonces, veamos qué dicen aquí.

48
00:02:30,890 --> 00:02:35,163
‫Y esto es principalmente una charla de marketing, supongo.

49
00:02:36,020 --> 00:02:38,220
‫Entonces, nada demasiado interesante aquí.

50
00:02:38,220 --> 00:02:40,660
‫Pero, por supuesto, puede echar un vistazo aquí

51
00:02:40,660 --> 00:02:42,550
‫a todos estos diferentes manuales.

52
00:02:42,550 --> 00:02:45,690
‫Y, en realidad, es gratis comenzar con Heroku

53
00:02:45,690 --> 00:02:47,900
‫en una aplicación realmente básica.

54
00:02:47,900 --> 00:02:51,120
‫Pero, por supuesto, una vez que empieces a subir de

55
00:02:51,120 --> 00:02:53,083
‫nivel, tendrás que empezar a pagar.

56
00:02:54,400 --> 00:02:56,470
‫Pero, aquí, la versión gratuita, como

57
00:02:56,470 --> 00:02:59,600
‫puede ver, viene con todas las funciones principales de la plataforma.

58
00:02:59,600 --> 00:03:01,820
‫Incluso puede agregar dominios personalizados.

59
00:03:01,820 --> 00:03:03,800
‫Pero, el único problema con esto

60
00:03:03,800 --> 00:03:06,550
‫es que la aplicación básicamente dormirá, así que, básicamente,

61
00:03:06,550 --> 00:03:08,210
‫después de 30 minutos

62
00:03:08,210 --> 00:03:10,283
‫sin que nadie acceda a la aplicación.

63
00:03:11,760 --> 00:03:13,460
‫Pero, de todos modos, puedes echar

64
00:03:13,460 --> 00:03:15,660
‫un vistazo a todo esto por tu cuenta.

65
00:03:15,660 --> 00:03:18,870
‫Entonces, volvamos ahora a nuestro proyecto aquí.

66
00:03:18,870 --> 00:03:21,430
‫Y, para comenzar con el proceso de

67
00:03:21,430 --> 00:03:25,300
‫implementación, comencemos iniciando sesión en Heroku en nuestra línea de comando.

68
00:03:25,300 --> 00:03:28,370
‫Y eso va a funcionar debido a la instalación que

69
00:03:28,370 --> 00:03:29,367
‫acabamos de hacer.

70
00:03:30,290 --> 00:03:32,970
‫Muy bien, démosle más espacio aquí.

71
00:03:32,970 --> 00:03:36,763
‫Limpia eso y ahora escribe heroku login.

72
00:03:40,060 --> 00:03:43,350
‫Entonces, si su instalación de Heroku fue exitosa,

73
00:03:43,350 --> 00:03:47,410
‫al escribir heroku login, debería ver este mensaje aquí, presione

74
00:03:47,410 --> 00:03:50,100
‫cualquier tecla para abrir el navegador.

75
00:03:50,100 --> 00:03:52,890
‫Entonces, simplemente presione realmente cualquier tecla, como dice, excepto

76
00:03:52,890 --> 00:03:55,663
‫Q porque eso saldrá de la aplicación.

77
00:03:57,270 --> 00:04:00,880
‫Y entonces, eso abrirá una ventana para que

78
00:04:00,880 --> 00:04:02,243
‫pueda iniciar sesión.

79
00:04:04,690 --> 00:04:07,250
‫Y, después de eso, como por arte

80
00:04:07,250 --> 00:04:11,110
‫de magia, iniciará sesión en Heroku en su línea de comando.

81
00:04:11,110 --> 00:04:13,650
‫Por lo tanto, probablemente debería tomar un poco

82
00:04:14,490 --> 00:04:17,230
‫y, a veces, ni siquiera funciona en el primer intento.

83
00:04:17,230 --> 00:04:19,090
‫Entonces, en realidad eso me pasó antes.

84
00:04:19,090 --> 00:04:20,873
‫Y entonces, simplemente presione el control C.

85
00:04:22,990 --> 00:04:26,680
‫Y así, en una Mac, eso es realmente el control C, no el comando C.

86
00:04:26,680 --> 00:04:28,163
‫Y. Intentémoslo de nuevo.

87
00:04:29,370 --> 00:04:33,493
‫Presione cualquier tecla, regrese al navegador, inicie sesión nuevamente.

88
00:04:35,980 --> 00:04:38,750
‫Vuelve de nuevo, y entonces ya está.

89
00:04:38,750 --> 00:04:42,480
‫Entonces, ya ve, ahora estoy conectado con mi dirección de correo electrónico.

90
00:04:42,480 --> 00:04:44,890
‫Entonces, nuevamente, esta no fue la primera

91
00:04:44,890 --> 00:04:47,920
‫vez que no funcionó para mí la primera vez.

92
00:04:47,920 --> 00:04:49,500
‫Entonces, si eso

93
00:04:49,500 --> 00:04:53,120
‫te sucedió, hazlo exactamente como lo hice yo aquí.

94
00:04:53,120 --> 00:04:55,130
‫De todos modos, ahora, con esto,

95
00:04:55,130 --> 00:04:57,660
‫hemos iniciado sesión en Heroku aquí en nuestra

96
00:04:57,660 --> 00:05:00,993
‫consola y, por lo tanto, ahora deberíamos poder crear un nuevo proyecto.

97
00:05:02,360 --> 00:05:05,560
‫Ahora, antes de hacer eso, necesitamos cambiar

98
00:05:05,560 --> 00:05:10,480
‫algo en nuestro paquete NPM. json archivo.

99
00:05:10,480 --> 00:05:11,650
‫Entonces, este.

100
00:05:11,650 --> 00:05:13,760
‫Y eso es porque Heroku

101
00:05:13,760 --> 00:05:17,810
‫realmente usa nuestro comando de inicio aquí para iniciar nuestra aplicación.

102
00:05:17,810 --> 00:05:22,040
‫Ahora, en producción, no queremos usar nodemon aquí.

103
00:05:22,040 --> 00:05:23,870
‫Simplemente queremos ejecutar nuestra

104
00:05:23,870 --> 00:05:26,920
‫aplicación usando el comando node y no nodemon

105
00:05:26,920 --> 00:05:29,950
‫porque ese es realmente solo para desarrollo.

106
00:05:29,950 --> 00:05:32,970
‫Entonces, cambiemos eso y duplicaré esta línea y luego

107
00:05:33,937 --> 00:05:35,587
‫llamaremos a esta dev.

108
00:05:36,450 --> 00:05:38,953
‫Y luego, el de inicio solo será nodo.

109
00:05:40,690 --> 00:05:43,810
‫Entonces, nuevamente, en su paquete. json, siempre debería

110
00:05:43,810 --> 00:05:46,890
‫tener este script de inicio como este.

111
00:05:46,890 --> 00:05:49,773
‫Entonces, el comando de nodo y luego su punto de entrada.

112
00:05:50,610 --> 00:05:53,920
‫Ahora, también es importante para

113
00:05:53,920 --> 00:05:57,490
‫Heroku que especifique estos motores aquí.

114
00:05:57,490 --> 00:05:59,670
‫Y así, lo hicimos antes, creo,

115
00:05:59,670 --> 00:06:01,720
‫porque algún paquete, o

116
00:06:01,720 --> 00:06:05,230
‫en realidad porque ESLint lo requería para funcionar correctamente.

117
00:06:05,230 --> 00:06:07,440
‫Pero, si no lo hubiéramos configurado

118
00:06:07,440 --> 00:06:11,213
‫en ese momento, bueno, entonces realmente tendríamos que configurarlo en este punto.

119
00:06:12,610 --> 00:06:14,550
‫Ahora, dado que cambiamos

120
00:06:14,550 --> 00:06:18,353
‫este archivo, ahora, necesitamos confirmar estos cambios en nuestro

121
00:06:19,200 --> 00:06:24,200
‫repositorio, así que agreguemos el paquete. json aquí.

122
00:06:24,560 --> 00:06:25,693
‫Y luego, git commit.

123
00:06:31,820 --> 00:06:34,323
‫Y luego, con un útil mensaje de confirmación.

124
00:06:37,652 --> 00:06:39,660
‫Ahora, otra cosa que es realmente importante

125
00:06:39,660 --> 00:06:42,640
‫cuando implementas una aplicación en Heroku es que escuchas el

126
00:06:42,640 --> 00:06:46,543
‫puerto en el proceso. env. PUERTO.

127
00:06:47,580 --> 00:06:52,580
‫Entonces, aquí mismo en el servidor, lo hacemos aquí.

128
00:06:54,500 --> 00:06:59,100
‫Entonces, especificamos la variable del puerto como proceso. env. PUERTO.

129
00:06:59,100 --> 00:07:02,460
‫Y entonces, nuevamente, en Heroku, eso es absolutamente obligatorio porque

130
00:07:02,460 --> 00:07:04,850
‫de lo contrario, no funcionará en absoluto.

131
00:07:04,850 --> 00:07:07,010
‫Entonces, si aquí, por ejemplo,

132
00:07:07,010 --> 00:07:10,130
‫solo especificamos algún puerto aleatorio, como 3000 aquí,

133
00:07:10,130 --> 00:07:11,780
‫entonces eso realmente

134
00:07:13,035 --> 00:07:15,050
‫no funcionaría y eso es

135
00:07:15,050 --> 00:07:18,730
‫porque detrás de escena, Heroku realmente asignará un puerto aleatorio

136
00:07:18,730 --> 00:07:20,780
‫a esta variable de entorno.

137
00:07:20,780 --> 00:07:23,270
‫Pero, un poco más sobre eso en

138
00:07:24,310 --> 00:07:26,320
‫un segundo porque ahora, estamos

139
00:07:26,320 --> 00:07:28,780
‫realmente listos para hacer la implementación real.

140
00:07:28,780 --> 00:07:31,890
‫Y, para hacer eso, creamos un nuevo proyecto de Heroku en

141
00:07:31,890 --> 00:07:33,420
‫nuestra carpeta de proyectos.

142
00:07:33,420 --> 00:07:36,830
‫Por lo tanto, asegúrese de estar realmente en su

143
00:07:36,830 --> 00:07:38,700
‫carpeta raíz y luego,

144
00:07:38,700 --> 00:07:42,240
‫una vez que esté seguro de que está allí y

145
00:07:42,240 --> 00:07:46,943
‫haya iniciado sesión en Heroku, lo que hicimos antes, puede escribir heroku create.

146
00:07:48,160 --> 00:07:52,000
‫Y esto creará una nueva aplicación básicamente con un

147
00:07:52,000 --> 00:07:53,890
‫nombre completamente aleatorio.

148
00:07:53,890 --> 00:07:57,060
‫Entonces, en mi caso, son resortes radiantes y

149
00:07:57,060 --> 00:07:59,320
‫luego este número, pero su

150
00:07:59,320 --> 00:08:02,350
‫aplicación, por supuesto, tendrá un nombre completamente diferente.

151
00:08:02,350 --> 00:08:04,020
‫Ahora, lo que

152
00:08:04,020 --> 00:08:06,580
‫hizo fue crear una nueva rama remota

153
00:08:06,580 --> 00:08:08,290
‫en nuestro repositorio de Git.

154
00:08:08,290 --> 00:08:10,500
‫Y esta rama se llama heroku.

155
00:08:10,500 --> 00:08:14,090
‫Entonces, recuerde cómo antes, en una de las conferencias anteriores,

156
00:08:14,090 --> 00:08:17,150
‫agregamos una rama remota que apunta a GitHub y

157
00:08:17,150 --> 00:08:19,263
‫esa rama se llamaba origen.

158
00:08:20,160 --> 00:08:23,530
‫Y entonces, empujamos nuestro código a

159
00:08:23,530 --> 00:08:27,423
‫esa rama remota usando git push origin master, así.

160
00:08:29,090 --> 00:08:30,320
‫¿Recuérdalo?

161
00:08:30,320 --> 00:08:31,610
‫Y ahora, como

162
00:08:31,610 --> 00:08:35,040
‫mencioné, tenemos una nueva rama remota aquí, que se llama heroku.

163
00:08:35,040 --> 00:08:38,420
‫Entonces, realmente, el proceso de implementación de nuestra aplicación

164
00:08:38,420 --> 00:08:41,960
‫es tan simple como enviar nuestro código a esa rama remota.

165
00:08:41,960 --> 00:08:46,740
‫Entonces, git push heroku master.

166
00:08:46,740 --> 00:08:49,450
‫Y realmente necesita ser la rama maestra.

167
00:08:49,450 --> 00:08:53,033
‫Es la única rama para la que funciona esta implementación.

168
00:08:53,870 --> 00:08:55,580
‫Pero, en nuestro caso, como

169
00:08:55,580 --> 00:08:57,700
‫puede ver aquí, en realidad estamos en

170
00:08:57,700 --> 00:09:01,823
‫nuestra rama maestra y también puede verlo aquí en la esquina de VS Code.

171
00:09:03,020 --> 00:09:04,690
‫Entonces, eso no es un problema.

172
00:09:04,690 --> 00:09:06,670
‫Entonces, ejecutemos este comando,

173
00:09:06,670 --> 00:09:08,780
‫que luego debería tomar un par

174
00:09:08,780 --> 00:09:11,580
‫de tiempo porque, por supuesto, cargará todos sus

175
00:09:11,580 --> 00:09:14,323
‫archivos que están en el repositorio hasta Heroku.

176
00:09:18,330 --> 00:09:22,340
‫Y ahora, ves todo este proceso aquí en marcha y lo que

177
00:09:22,340 --> 00:09:23,327
‫está haciendo

178
00:09:23,327 --> 00:09:26,640
‫es que en realidad está instalando todas nuestras dependencias

179
00:09:26,640 --> 00:09:28,380
‫aquí en nuestra nueva aplicación.

180
00:09:28,380 --> 00:09:30,357
‫Entonces, en nuestra aplicación que ahora está en Heroku.

181
00:09:33,500 --> 00:09:35,970
‫Entonces, esperemos hasta que esto termine

182
00:09:35,970 --> 00:09:39,153
‫y nos veremos cuando este proceso haya terminado.

183
00:09:40,470 --> 00:09:42,270
‫Y así, eso está hecho.

184
00:09:42,270 --> 00:09:46,350
‫Entonces, espero que hayas recibido el mensaje Verificando la implementación ... hecho.

185
00:09:46,350 --> 00:09:50,610
‫Entonces, ya ve, lanzando, y realmente significa que nuestra

186
00:09:50,610 --> 00:09:53,320
‫aplicación ahora está implementada en Heroku

187
00:09:53,320 --> 00:09:55,023
‫en esta URL.

188
00:09:56,240 --> 00:09:58,770
‫Entonces, ves que la construcción tiene éxito.

189
00:09:58,770 --> 00:10:01,920
‫Y, de verdad, todos estos mensajes de

190
00:10:01,920 --> 00:10:04,190
‫los que ya hablé antes.

191
00:10:04,190 --> 00:10:06,810
‫Entonces, ahora, para abrir nuestra aplicación,

192
00:10:06,810 --> 00:10:09,703
‫todo lo que necesitamos escribir es heroku open.

193
00:10:11,240 --> 00:10:13,750
‫Ahora, no esperamos que esto funcione

194
00:10:13,750 --> 00:10:16,250
‫todavía porque todas nuestras variables de

195
00:10:16,250 --> 00:10:17,620
‫entorno en

196
00:10:18,670 --> 00:10:22,780
‫realidad no están definidas porque excluimos este archivo de configuración aquí

197
00:10:22,780 --> 00:10:24,163
‫de nuestro repositorio Git.

198
00:10:25,560 --> 00:10:27,420
‫Pero, aún así, solo

199
00:10:27,420 --> 00:10:30,720
‫por el gusto de hacerlo, intentemos abrir nuestra aplicación.

200
00:10:30,720 --> 00:10:34,450
‫Y así, de hecho, eso abre nuestra URL, en

201
00:10:34,450 --> 00:10:38,517
‫este caso, radiant-springs-85848. herokuapp. com.

202
00:10:41,100 --> 00:10:44,950
‫Entonces, básicamente, es el subdominio de Heroku.

203
00:10:44,950 --> 00:10:46,730
‫Y así, nuevamente, como

204
00:10:46,730 --> 00:10:49,320
‫se esperaba, en realidad obtuvimos algún error aquí.

205
00:10:49,320 --> 00:10:52,430
‫Y, una vez más, eso se debe a que nuestras variables

206
00:10:52,430 --> 00:10:55,030
‫de entorno, en este punto, aún no están definidas.

207
00:10:55,030 --> 00:10:57,730
‫Ahora, también podemos echar un vistazo a estos

208
00:10:57,730 --> 00:10:59,850
‫errores en los registros de Heroku.

209
00:10:59,850 --> 00:11:02,140
‫Entonces, déjame mostrarte eso también.

210
00:11:02,140 --> 00:11:06,023
‫Entonces, heroku logs --tail.

211
00:11:07,710 --> 00:11:11,313
‫Entonces, aquí, verá que el estado cambió de almacenamiento a bloqueado, así

212
00:11:13,100 --> 00:11:15,130
‫que veamos lo que tenemos aquí.

213
00:11:15,130 --> 00:11:17,170
‫En realidad, verá el mensaje de error

214
00:11:17,170 --> 00:11:18,930
‫que creamos nosotros mismos aquí.

215
00:11:18,930 --> 00:11:21,530
‫Entonces, EJECUCIÓN NO ATRAPADA con este emoji

216
00:11:21,530 --> 00:11:23,060
‫y luego Apagando ...

217
00:11:27,320 --> 00:11:28,700
‫Y, como puede ver

218
00:11:28,700 --> 00:11:31,980
‫aquí, no se puede leer la propiedad 'reemplazar' de indefinido.

219
00:11:31,980 --> 00:11:35,170
‫Y, de nuevo, eso se debe a que las variables de

220
00:11:35,170 --> 00:11:37,510
‫entorno no están definidas en este momento.

221
00:11:37,510 --> 00:11:41,053
‫Entonces, salgamos de estos registros aquí, nuevamente, con el control C.

222
00:11:42,860 --> 00:11:44,810
‫Entonces, ahora, definamos

223
00:11:44,810 --> 00:11:46,800
‫estas variables de entorno para

224
00:11:46,800 --> 00:11:48,790
‫que nuestra aplicación funcione.

225
00:11:48,790 --> 00:11:50,060
‫Y, la forma

226
00:11:50,060 --> 00:11:52,740
‫en que lo hacemos es especificar cada variable de

227
00:11:52,740 --> 00:11:54,960
‫entorno usando un comando especial de Heroku.

228
00:11:54,960 --> 00:11:58,080
‫Entonces, Heroku y otras plataformas de alojamiento,

229
00:11:58,080 --> 00:12:01,000
‫no usan un. env como lo hicimos

230
00:12:01,000 --> 00:12:03,793
‫aquí en desarrollo para todas nuestras variables de configuración.

231
00:12:05,160 --> 00:12:09,560
‫Entonces, nuevamente, aquí en desarrollo, usamos esta configuración. env para poner nuestras

232
00:12:09,560 --> 00:12:11,560
‫variables de entorno.

233
00:12:11,560 --> 00:12:13,730
‫Pero, aquí en Heroku, los definiremos

234
00:12:13,730 --> 00:12:14,830
‫de otra manera.

235
00:12:14,830 --> 00:12:16,610
‫Pero, en nuestro código, todo

236
00:12:16,610 --> 00:12:18,543
‫lo que tenemos funciona exactamente igual.

237
00:12:19,856 --> 00:12:22,120
‫Entonces, comencemos con la variable

238
00:12:22,120 --> 00:12:24,650
‫NODE_ENV que necesitamos establecer en producción.

239
00:12:24,650 --> 00:12:29,650
‫Y entonces, lo hacemos diciendo heroku config: set y luego el

240
00:12:32,390 --> 00:12:36,160
‫nombre de la variable, NODE_ENV = production.

241
00:12:40,930 --> 00:12:43,780
‫Y, de hecho, esta variable NODE_ENV

242
00:12:43,780 --> 00:12:47,220
‫está configurada por defecto en producción por Heroku.

243
00:12:47,220 --> 00:12:49,980
‫Pero, aún así, asegurémonos al 100% de

244
00:12:49,980 --> 00:12:52,240
‫que realmente se mantiene

245
00:12:52,240 --> 00:12:54,760
‫así, incluso si Heroku cambia algo.

246
00:12:54,760 --> 00:12:57,440
‫Entonces, realmente, para estar seguros, sigamos haciendo esto

247
00:12:57,440 --> 00:13:00,610
‫porque, como sabemos, una gran parte de nuestro código realmente

248
00:13:00,610 --> 00:13:03,130
‫depende de esta variable y también

249
00:13:03,130 --> 00:13:07,310
‫puede hacer que las aplicaciones Node se ejecuten hasta tres veces más rápido.

250
00:13:07,310 --> 00:13:09,430
‫Creo que hablamos de eso antes.

251
00:13:09,430 --> 00:13:12,610
‫Entonces, la importancia de configurar NODE_ENV en producción.

252
00:13:12,610 --> 00:13:15,913
‫Pero, de todos modos, es bueno hacerlo de verdad.

253
00:13:16,810 --> 00:13:18,950
‫Entonces, simplemente presione regresar y luego

254
00:13:18,950 --> 00:13:21,400
‫establecerá esta variable de entorno y

255
00:13:21,400 --> 00:13:22,980
‫reiniciará la aplicación.

256
00:13:22,980 --> 00:13:25,500
‫Entonces, ahora, todo lo que tenemos

257
00:13:25,500 --> 00:13:27,640
‫que hacer es básicamente hacer

258
00:13:27,640 --> 00:13:30,580
‫esto para todas las variables de entorno relevantes.

259
00:13:30,580 --> 00:13:34,490
‫Entonces, hicimos NODE_ENV, ahora, el puerto, no lo configuraremos porque,

260
00:13:34,490 --> 00:13:36,360
‫como mencioné antes,

261
00:13:36,360 --> 00:13:38,380
‫Heroku en realidad, detrás de

262
00:13:38,380 --> 00:13:41,533
‫escena, asignará un puerto aleatorio a nuestra aplicación.

263
00:13:42,470 --> 00:13:44,913
‫Y entonces, a continuación, agreguemos la base de datos.

264
00:13:46,390 --> 00:13:48,290
‫Y, de hecho, copiemos todo esto.

265
00:13:52,550 --> 00:13:54,000
‫Y luego, pégalo aquí.

266
00:13:54,940 --> 00:13:56,960
‫Y eso realmente no funcionó, así

267
00:13:56,960 --> 00:13:59,260
‫que intentémoslo con algunas citas aquí tal vez.

268
00:14:04,170 --> 00:14:06,580
‫Sí, se ve mucho mejor.

269
00:14:06,580 --> 00:14:09,380
‫A continuación, la contraseña de la base de datos.

270
00:14:10,853 --> 00:14:12,520
‫Vamos a aclararlo aquí.

271
00:14:18,667 --> 00:14:20,334
‫A continuación, el secreto.

272
00:14:24,720 --> 00:14:26,253
‫Así que, así.

273
00:14:30,587 --> 00:14:34,263
‫Entonces, es un poco aburrido hacerlo para todos, pero bueno,

274
00:14:35,740 --> 00:14:38,160
‫solo tenemos que hacerlo una

275
00:14:38,160 --> 00:14:40,853
‫vez, así que no es gran cosa.

276
00:14:43,981 --> 00:14:46,710
‫Ahora, también necesitamos este aquí porque

277
00:14:48,020 --> 00:14:51,070
‫todo esto aquí es solo para mailtrap

278
00:14:51,070 --> 00:14:54,190
‫y en realidad no lo necesitamos en producción

279
00:14:54,190 --> 00:14:56,950
‫porque recuerde que cuando estamos en producción,

280
00:14:56,950 --> 00:15:00,300
‫todos nuestros correos electrónicos se envían usando SENDGRID y

281
00:15:00,300 --> 00:15:02,230
‫ya no usando mailtrap.

282
00:15:02,230 --> 00:15:04,270
‫Y así, en nuestra aplicación

283
00:15:04,270 --> 00:15:06,563
‫Heroku, no los necesitamos para las variables.

284
00:15:07,520 --> 00:15:09,773
‫Pero necesitamos el correo electrónico de.

285
00:15:13,520 --> 00:15:15,163
‫Entonces, ese es nuestro próximo.

286
00:15:17,820 --> 00:15:19,960
‫Luego, necesitamos SENDGRID_USERNAME así

287
00:15:26,670 --> 00:15:28,333
‫como la contraseña.

288
00:15:37,330 --> 00:15:40,963
‫Y finalmente, nuestra clave de banda secreta.

289
00:15:46,320 --> 00:15:48,130
‫Y, con esto,

290
00:15:48,130 --> 00:15:51,530
‫creo que aquí tenemos todas nuestras variables relevantes.

291
00:15:51,530 --> 00:15:55,653
‫Entonces, intentemos de nuevo, heroku abierto.

292
00:15:59,850 --> 00:16:04,850
‫Y eso se ve perfecto, hermoso.

293
00:16:04,960 --> 00:16:08,200
‫Entonces, realmente, nuestra aplicación ahora está implementada en

294
00:16:08,200 --> 00:16:12,610
‫radiant-springs o lo que sea que tenga en su caso y todo

295
00:16:12,610 --> 00:16:15,343
‫parece estar funcionando a la perfección.

296
00:16:16,300 --> 00:16:18,083
‫Entonces, todas nuestras imágenes están aquí.

297
00:16:19,050 --> 00:16:22,393
‫Echemos un vistazo a una sola página aquí también.

298
00:16:25,280 --> 00:16:29,500
‫Y, de hecho, todo eso funciona de maravilla.

299
00:16:29,500 --> 00:16:31,333
‫Entonces, nuestro mapa también aparece.

300
00:16:34,190 --> 00:16:37,850
‫Y sí, parece funcionar bien.

301
00:16:37,850 --> 00:16:41,970
‫Y el hecho de que todo esto funcione a la perfección

302
00:16:41,970 --> 00:16:43,360
‫también muestra la

303
00:16:43,360 --> 00:16:46,550
‫belleza de tener una base de datos alojada todo

304
00:16:46,550 --> 00:16:48,690
‫el tiempo también durante el

305
00:16:48,690 --> 00:16:50,910
‫desarrollo, porque no importa si estamos

306
00:16:50,910 --> 00:16:54,890
‫en desarrollo o en producción, nuestra base de datos sigue funcionando.

307
00:16:54,890 --> 00:16:57,360
‫Entonces, si hubiéramos utilizado una base de

308
00:16:57,360 --> 00:17:00,030
‫datos local, ahora tendríamos que exportar todos los

309
00:17:00,030 --> 00:17:03,890
‫datos de esa base de datos local, luego crear una base de datos

310
00:17:03,890 --> 00:17:07,600
‫alojada y cargar todos los datos en esa base de datos alojada.

311
00:17:07,600 --> 00:17:10,460
‫Y entonces, eso, por supuesto, crearía un paso adicional

312
00:17:10,460 --> 00:17:12,160
‫y algo de trabajo adicional.

313
00:17:12,160 --> 00:17:15,340
‫Y, de nuevo, con esto, simplemente funciona.

314
00:17:15,340 --> 00:17:19,210
‫Entonces, esa es una experiencia de desarrollador muy agradable.

315
00:17:19,210 --> 00:17:22,743
‫Entonces, veamos si también podemos iniciar sesión aquí, lo que,

316
00:17:23,830 --> 00:17:26,370
‫por supuesto, debería ser posible con los ejemplos

317
00:17:26,370 --> 00:17:28,900
‫2, 3, 4 de laura @.

318
00:17:34,700 --> 00:17:36,313
‫Y así parece.

319
00:17:39,697 --> 00:17:40,823
‫Tan hermoso.

320
00:17:41,960 --> 00:17:45,353
‫Veamos si todos nuestros tours de libros todavía están

321
00:17:46,470 --> 00:17:48,440
‫aquí, pero ¿por qué no?

322
00:17:48,440 --> 00:17:51,270
‫Y, de hecho, bueno, en realidad es solo uno,

323
00:17:51,270 --> 00:17:53,373
‫pero, de hecho, está aquí.

324
00:17:54,460 --> 00:17:58,100
‫Entonces, genial, eso es absolutamente fantástico.

325
00:17:58,100 --> 00:18:00,420
‫Y ahora, echemos un vistazo

326
00:18:00,420 --> 00:18:02,763
‫rápido a nuestro panel de Heroku.

327
00:18:07,270 --> 00:18:09,293
‫Entonces, aquí, abramos Heroku.

328
00:18:11,010 --> 00:18:12,343
‫Cierra estos dos.

329
00:18:14,120 --> 00:18:16,390
‫Y así, dado que iniciamos

330
00:18:16,390 --> 00:18:19,810
‫sesión anteriormente aquí, esto debería llevarnos automáticamente al panel

331
00:18:19,810 --> 00:18:23,060
‫de control y ese panel le mostrará, de forma

332
00:18:23,060 --> 00:18:26,210
‫predeterminada, todas las aplicaciones que ha implementado actualmente.

333
00:18:26,210 --> 00:18:28,800
‫Y entonces, el que acabamos de desplegar

334
00:18:28,800 --> 00:18:30,970
‫es este manantial radiante aquí.

335
00:18:30,970 --> 00:18:33,260
‫Entonces, abramos ese.

336
00:18:33,260 --> 00:18:34,390
‫Luego, aquí, en el

337
00:18:34,390 --> 00:18:36,180
‫lado derecho, puedes ver toda la actividad.

338
00:18:36,180 --> 00:18:39,390
‫Por ejemplo, estableciendo todas estas variables de configuración

339
00:18:39,390 --> 00:18:41,040
‫que acabamos de hacer.

340
00:18:41,040 --> 00:18:45,810
‫Tienes tus recursos y muchos de estos solo son interesantes si tienes

341
00:18:45,810 --> 00:18:47,920
‫un banco de pruebas pagado.

342
00:18:47,920 --> 00:18:50,390
‫Y, un dinamómetro es realmente el término que

343
00:18:50,390 --> 00:18:53,340
‫Heroku usa básicamente para un contenedor en el que

344
00:18:53,340 --> 00:18:54,913
‫se ejecuta su aplicación.

345
00:18:56,366 --> 00:18:58,390
‫Entonces, tenemos algunas métricas donde podemos ver

346
00:18:58,390 --> 00:19:01,410
‫quién está accediendo a la aplicación, pero, una vez más, eso

347
00:19:01,410 --> 00:19:03,250
‫solo funciona si tienes un

348
00:19:03,250 --> 00:19:05,093
‫pasatiempo o un banco de pruebas profesional.

349
00:19:06,950 --> 00:19:09,460
‫Pero, lo que realmente importa aquí es

350
00:19:09,460 --> 00:19:10,920
‫la configuración y, por

351
00:19:10,920 --> 00:19:14,420
‫lo tanto, quería mostrarles que podemos revelar las variables de configuración.

352
00:19:14,420 --> 00:19:17,000
‫Entonces, en lugar de cambiarlos o agregarlos

353
00:19:17,000 --> 00:19:20,253
‫en la línea de comando, también podríamos hacerlo aquí.

354
00:19:21,650 --> 00:19:24,170
‫Entonces, estos son todos los que acabamos de agregar en

355
00:19:24,170 --> 00:19:25,223
‫la línea de comando.

356
00:19:27,250 --> 00:19:31,540
‫Luego, otra cosa muy importante está aquí en Más,

357
00:19:31,540 --> 00:19:33,623
‫podemos ver nuestros registros.

358
00:19:37,560 --> 00:19:40,710
‫Entonces, esperemos aquí.

359
00:19:40,710 --> 00:19:44,430
‫Entonces, Heroku le brinda todos estos registros realmente para todo

360
00:19:44,430 --> 00:19:47,190
‫lo que sucede en su aplicación.

361
00:19:47,190 --> 00:19:49,640
‫Entonces, cuando abrimos la aplicación en el

362
00:19:49,640 --> 00:19:52,300
‫navegador, solicitó todos estos archivos como puede

363
00:19:52,300 --> 00:19:54,283
‫ver aquí, por ejemplo.

364
00:19:56,600 --> 00:19:58,380
‫Entonces, realmente, todo lo que

365
00:19:58,380 --> 00:20:00,870
‫está sucediendo estará aquí en estos registros.

366
00:20:00,870 --> 00:20:04,210
‫Y así, si tu aplicación falla o si pasa algo y básicamente todo

367
00:20:04,210 --> 00:20:07,660
‫para lo que usamos una consola. log terminará

368
00:20:07,660 --> 00:20:10,843
‫mostrándose aquí en estos registros.

369
00:20:10,843 --> 00:20:13,400
‫Entonces, estos fueron los registros de Heroku que

370
00:20:13,400 --> 00:20:15,933
‫mencioné en una de las conferencias anteriores.

371
00:20:17,987 --> 00:20:19,770
‫Ahora, una cosa que podemos

372
00:20:19,770 --> 00:20:22,300
‫hacer es cambiar el nombre de nuestra aplicación.

373
00:20:22,300 --> 00:20:25,410
‫Entonces, en lugar de llamarlo con este nombre aleatorio,

374
00:20:25,410 --> 00:20:27,800
‫podemos darle un nombre más significativo.

375
00:20:27,800 --> 00:20:29,960
‫Ahora, podríamos hacer eso aquí,

376
00:20:29,960 --> 00:20:34,090
‫pero eso estropearía nuestra aplicación en la terminal de

377
00:20:34,090 --> 00:20:35,810
‫nuestra computadora local.

378
00:20:35,810 --> 00:20:38,620
‫Entonces, en cambio, lo que hacemos es

379
00:20:38,620 --> 00:20:40,763
‫cambiar el nombre directamente aquí.

380
00:20:41,970 --> 00:20:46,813
‫Entonces, digamos, aplicaciones heroku: cambie el nombre, así, y luego

381
00:20:48,460 --> 00:20:51,530
‫el nuevo nombre para la aplicación.

382
00:20:51,530 --> 00:20:53,470
‫Y lo llamaré

383
00:20:53,470 --> 00:20:55,740
‫natours, pero usted, por supuesto,

384
00:20:55,740 --> 00:20:59,420
‫no podrá llamarlo también natours porque ese

385
00:20:59,420 --> 00:21:01,620
‫subdominio ya estará ocupado.

386
00:21:01,620 --> 00:21:04,350
‫Entonces, puede llamarlo natours con su nombre o

387
00:21:04,350 --> 00:21:07,660
‫con su nombre de usuario o realmente cualquier otra palabra

388
00:21:07,660 --> 00:21:08,633
‫que desee.

389
00:21:10,000 --> 00:21:12,763
‫Entonces, seguiré adelante y ahora, realmente lo llamaré natours.

390
00:21:13,660 --> 00:21:18,320
‫Oh, pero veo que alguien ya me quitó ese nombre,

391
00:21:18,320 --> 00:21:20,223
‫así que es desafortunado.

392
00:21:21,304 --> 00:21:24,360
‫Pero, probablemente sea porque ya usé el nombre natours

393
00:21:24,360 --> 00:21:26,570
‫en un proyecto en otro curso.

394
00:21:26,570 --> 00:21:28,853
‫Y entonces, alguien debe haberlo tomado.

395
00:21:30,231 --> 00:21:33,080
‫Entonces, llamémoslo natoursapp y, por supuesto, necesito

396
00:21:33,080 --> 00:21:35,440
‫escribir todo lo demás.

397
00:21:35,440 --> 00:21:39,660
‫Entonces, aplicaciones heroku: cambie el nombre

398
00:21:39,660 --> 00:21:41,840
‫y luego natoursapp.

399
00:21:41,840 --> 00:21:44,033
‫Entonces, con suerte, nadie tomó este.

400
00:21:45,780 --> 00:21:47,980
‫Y parece que está haciendo

401
00:21:47,980 --> 00:21:51,020
‫algo, pero alguien ya ha tomado eso también.

402
00:21:51,020 --> 00:21:52,373
‫Bueno, eso es realmente extraño.

403
00:21:53,930 --> 00:21:56,120
‫Entonces, supongo que tengo muchos estudiantes

404
00:21:56,120 --> 00:21:59,110
‫que publican sus aplicaciones en Heroku, así que

405
00:21:59,110 --> 00:22:02,250
‫seguiré el ejemplo que di antes y agregaré

406
00:22:02,250 --> 00:22:03,920
‫mi nombre aquí.

407
00:22:03,920 --> 00:22:07,800
‫Entonces, tercer intento con natours-jonas.

408
00:22:07,800 --> 00:22:12,683
‫Entonces, sí, esperemos que la tercera vez funcione.

409
00:22:13,780 --> 00:22:15,493
‫Entonces, esperemos aquí.

410
00:22:17,880 --> 00:22:18,960
‫Y eso es.

411
00:22:18,960 --> 00:22:21,163
‫Entonces, intentemos heroku open.

412
00:22:24,800 --> 00:22:27,150
‫Está bien, y aquí vamos.

413
00:22:27,150 --> 00:22:29,030
‫Y ahora, en este

414
00:22:29,030 --> 00:22:31,330
‫punto, la versión anterior ya no funcionará.

415
00:22:31,330 --> 00:22:34,163
‫Entonces, este se ha ido, cerrémoslo.

416
00:22:35,030 --> 00:22:36,780
‫Volvamos al Personal aquí.

417
00:22:38,010 --> 00:22:40,840
‫Y así, sí, aquí vamos.

418
00:22:40,840 --> 00:22:42,993
‫Eso es natours-jonas.

419
00:22:44,750 --> 00:22:49,640
‫Genial, nuestro sitio web ya está oficialmente en producción.

420
00:22:49,640 --> 00:22:52,070
‫Ahora, otra cosa que quiero hacer

421
00:22:52,070 --> 00:22:55,340
‫aquí es actualizar la variable de entorno Postman

422
00:22:55,340 --> 00:22:57,580
‫para producción, ¿recuerdas eso?

423
00:22:57,580 --> 00:22:59,480
‫Entonces, sigamos adelante y copiemos esto aquí.

424
00:23:00,440 --> 00:23:03,610
‫Y tampoco la forma en

425
00:23:03,610 --> 00:23:07,000
‫que estamos en https aquí en Heroku.

426
00:23:07,000 --> 00:23:10,620
‫Entonces, Heroku hace toda la administración de certificados SSL

427
00:23:10,620 --> 00:23:14,810
‫por nosotros detrás de escena para que nuestra página sea siempre

428
00:23:14,810 --> 00:23:16,840
‫segura, siempre con https.

429
00:23:16,840 --> 00:23:20,773
‫Entonces, esa es otra característica realmente agradable de Heroku.

430
00:23:22,540 --> 00:23:24,860
‫Entonces, ahora, aquí en

431
00:23:24,860 --> 00:23:29,860
‫Postman, sigamos adelante y cambiemos esta producción y la URL.

432
00:23:30,450 --> 00:23:32,733
‫Por supuesto, este era solo un marcador de posición.

433
00:23:33,680 --> 00:23:38,120
‫Y, en cambio, lo que queremos es ahora nuestra URL de producción real.

434
00:23:38,120 --> 00:23:40,593
‫Y no estoy seguro de si es correcto

435
00:23:41,820 --> 00:23:44,900
‫así, pero simplemente actualícelo y compárelo con el de desarrollo.

436
00:23:44,900 --> 00:23:46,340
‫Pero, de hecho, lo es.

437
00:23:46,340 --> 00:23:48,823
‫Por lo tanto, debe terminar con esta barra.

438
00:23:50,380 --> 00:23:53,483
‫Y entonces, el que acabamos de hacer también lo hace.

439
00:23:54,320 --> 00:23:57,220
‫Entonces, actualice, cierre, y ahora, todo

440
00:23:57,220 --> 00:24:00,560
‫lo que tenemos que hacer aquí es cambiar

441
00:24:00,560 --> 00:24:03,683
‫de desarrollo a este entorno de producción natural.

442
00:24:04,560 --> 00:24:08,660
‫Entonces, ahora, si, por ejemplo, trato de obtener Get All

443
00:24:08,660 --> 00:24:11,260
‫Tours, que en realidad es el

444
00:24:11,260 --> 00:24:13,860
‫que teníamos abierto, veamos si funciona.

445
00:24:13,860 --> 00:24:15,363
‫Apaguemos todo esto.

446
00:24:17,200 --> 00:24:20,093
‫Y, de hecho, lo hace, genial.

447
00:24:21,400 --> 00:24:23,220
‫Veamos si realmente podemos

448
00:24:23,220 --> 00:24:26,543
‫ver la URL completa en algún lugar aquí.

449
00:24:28,270 --> 00:24:29,823
‫Bueno, realmente no se nota.

450
00:24:31,870 --> 00:24:34,110
‫Pero, de todos modos,

451
00:24:34,110 --> 00:24:37,810
‫realmente no importa porque todavía sabemos que realmente funcionó.

452
00:24:37,810 --> 00:24:40,110
‫Entonces, ahora realmente obtuvimos estos datos

453
00:24:40,110 --> 00:24:43,860
‫aquí de nuestra API de producción y podemos demostrarlo fácilmente

454
00:24:43,860 --> 00:24:46,470
‫porque la versión de desarrollo ni siquiera

455
00:24:46,470 --> 00:24:48,010
‫se está ejecutando actualmente.

456
00:24:48,010 --> 00:24:50,943
‫Entonces, si enviamos esto, obtenemos este error.

457
00:24:54,830 --> 00:24:58,420
‫Entonces, una vez más, en serio, felicitaciones

458
00:24:58,420 --> 00:25:02,970
‫por casi ahora terminar el proyecto en este punto.

459
00:25:02,970 --> 00:25:04,920
‫Ya está en el servidor en

460
00:25:04,920 --> 00:25:07,260
‫vivo y, en este punto, puede compartir su

461
00:25:07,260 --> 00:25:10,650
‫proyecto con el mundo y mostrar a todos lo que ha logrado

462
00:25:10,650 --> 00:25:13,883
‫después de todo este trabajo en la construcción de este proyecto.

463
00:25:14,720 --> 00:25:18,420
‫Solo una pequeña cosa más que quería hacer

464
00:25:18,420 --> 00:25:22,720
‫aquí, como dije en la última conferencia, es probar esa compresión.

465
00:25:22,720 --> 00:25:27,320
‫Entonces, busquemos la compresión gzip de prueba aquí.

466
00:25:30,740 --> 00:25:33,850
‫Y luego, ese debería ser el primer resultado aquí,

467
00:25:33,850 --> 00:25:35,163
‫Gift of Speed.

468
00:25:36,150 --> 00:25:40,710
‫Y entonces, si ingresamos nuestra URL aquí y luego verificamos, veamos.

469
00:25:42,450 --> 00:25:45,200
‫Y vemos que GZIP está habilitado.

470
00:25:45,200 --> 00:25:47,903
‫Y eso se debe a ese paquete de compresión

471
00:25:47,903 --> 00:25:50,200
‫que usamos en la última conferencia.

472
00:25:50,200 --> 00:25:53,380
‫Entonces, originalmente, nuestra página tendría 14K, pero

473
00:25:53,380 --> 00:25:55,560
‫luego comprimida, es 2K.

474
00:25:55,560 --> 00:25:58,610
‫Y, por supuesto, eso no hace una gran

475
00:25:58,610 --> 00:26:02,610
‫diferencia en este caso, pero para una página mucho más grande, por

476
00:26:02,610 --> 00:26:05,903
‫supuesto, realmente puede marcar la diferencia para sus usuarios.

477
00:26:06,840 --> 00:26:10,470
‫Perfecto, ahora, en el próximo par de videos, solo hay

478
00:26:10,470 --> 00:26:12,740
‫un par de pequeñas cosas

479
00:26:12,740 --> 00:26:15,023
‫que todavía tenemos que arreglar aquí.

480
00:26:16,020 --> 00:26:17,330
‫Y así, haremos

481
00:26:17,330 --> 00:26:20,200
‫eso en las próximas dos o tres conferencias.

482
00:26:20,200 --> 00:26:21,730
‫Y así, después de eso

483
00:26:21,730 --> 00:26:24,463
‫es cuando el proyecto está realmente terminado al 100%.