1
00:00:01,150 --> 00:00:03,130
‫Instrutor: Então, depois de

2
00:00:03,130 --> 00:00:06,850
‫todo esse tempo e todo esse trabalho construindo esse enorme projeto

3
00:00:06,850 --> 00:00:09,660
‫completo, agora é finalmente a hora de realmente

4
00:00:09,660 --> 00:00:13,370
‫implantá-lo em um servidor web e realmente compartilhá-lo com o mundo.

5
00:00:13,370 --> 00:00:15,510
‫Então, neste vídeo, você

6
00:00:15,510 --> 00:00:18,467
‫aprenderá como implantar um projeto no Heroku.

7
00:00:20,167 --> 00:00:22,610
‫E a primeira coisa que realmente precisamos

8
00:00:22,610 --> 00:00:25,143
‫fazer é instalar o Heroku em nosso computador.

9
00:00:26,870 --> 00:00:30,427
‫Então, vamos pesquisar Heroku NodeJS.

10
00:00:35,020 --> 00:00:38,050
‫E então, aqui, basicamente temos um

11
00:00:38,050 --> 00:00:41,530
‫guia de introdução para NodeJS com Heroku porque

12
00:00:41,530 --> 00:00:45,000
‫você pode hospedar todos os tipos de aplicativos

13
00:00:45,000 --> 00:00:48,700
‫no Heroku, como aplicativos PHP ou Ruby on Rails.

14
00:00:48,700 --> 00:00:51,190
‫Portanto, não funciona apenas para NodeJS.

15
00:00:51,190 --> 00:00:54,420
‫E, vamos dar uma olhada no Heroku em um

16
00:00:54,420 --> 00:00:57,520
‫segundo, mas por enquanto, vamos apenas começar instalando

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

18
00:00:59,200 --> 00:01:02,630
‫Então, estou na parte de configuração deste guia aqui.

19
00:01:02,630 --> 00:01:05,580
‫Então, agora, vá em frente e

20
00:01:05,580 --> 00:01:08,540
‫instale o instalador para sua plataforma, seja

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

22
00:01:10,660 --> 00:01:14,660
‫Ou, neste caso aqui, acho que só funciona para o Ubuntu.

23
00:01:14,660 --> 00:01:17,270
‫Não, na verdade diz aqui que também

24
00:01:17,270 --> 00:01:19,770
‫está disponível para outro Linux.

25
00:01:19,770 --> 00:01:22,260
‫De qualquer forma, vá em frente e instale

26
00:01:22,260 --> 00:01:24,010
‫a versão que você

27
00:01:24,010 --> 00:01:27,090
‫precisa para o seu computador e, enquanto isso, enquanto

28
00:01:27,090 --> 00:01:30,190
‫estiver instalando, vá em frente e crie uma nova conta.

29
00:01:30,190 --> 00:01:32,700
‫Então, clique aqui em Cadastre-se

30
00:01:32,700 --> 00:01:36,010
‫e abra sua conta gratuita no Heroku.

31
00:01:36,010 --> 00:01:38,890
‫Então, mais uma conta que você precisa criar.

32
00:01:38,890 --> 00:01:41,640
‫Portanto, existem muitas contas diferentes que

33
00:01:41,640 --> 00:01:45,140
‫você precisa criar para concluir este projeto, mas

34
00:01:45,140 --> 00:01:49,310
‫acho que é assim que o desenvolvimento moderno da web funciona.

35
00:01:49,310 --> 00:01:51,730
‫De qualquer forma, depois de criar

36
00:01:51,730 --> 00:01:55,050
‫sua conta, vamos dar uma olhada rápida aqui no

37
00:01:55,050 --> 00:01:59,830
‫site do Heroku para ter uma visão geral do que é essa plataforma.

38
00:01:59,830 --> 00:02:01,700
‫Então, Heroku é

39
00:02:01,700 --> 00:02:04,870
‫a plataforma que torna muito, muito fácil e

40
00:02:04,870 --> 00:02:07,290
‫descomplicado implantar seus aplicativos da web.

41
00:02:07,290 --> 00:02:10,360
‫E, novamente, eles podem usar qualquer linguagem que

42
00:02:10,360 --> 00:02:11,650
‫você possa imaginar.

43
00:02:11,650 --> 00:02:14,600
‫Como você pode ver, NodeJS, Ruby on

44
00:02:14,600 --> 00:02:17,820
‫Rails, este eu acho que é Go, ou

45
00:02:17,820 --> 00:02:22,050
‫na verdade é Java, ou PHP, Python, este é Go, certo?

46
00:02:22,050 --> 00:02:27,050
‫E assim, todos os tipos de aplicativos realmente rodam no Heroku.

47
00:02:28,380 --> 00:02:30,890
‫Então, vamos ver o que eles dizem aqui.

48
00:02:30,890 --> 00:02:35,163
‫E, isso é principalmente conversa de marketing, eu acho.

49
00:02:36,020 --> 00:02:38,220
‫Então, nada muito interessante aqui.

50
00:02:38,220 --> 00:02:40,660
‫Mas, é claro, você pode dar uma olhada

51
00:02:40,660 --> 00:02:42,550
‫aqui em todos esses diferentes manuais.

52
00:02:42,550 --> 00:02:45,690
‫E, na verdade, é grátis começar a usar o

53
00:02:45,690 --> 00:02:47,900
‫Heroku em um aplicativo realmente básico.

54
00:02:47,900 --> 00:02:51,120
‫Mas, é claro, assim que você começar a subir de

55
00:02:51,120 --> 00:02:53,083
‫nível, terá que começar a pagar.

56
00:02:54,400 --> 00:02:56,470
‫Mas, aqui, a versão gratuita, como

57
00:02:56,470 --> 00:02:59,600
‫você pode ver, vem com todos os recursos básicos da plataforma.

58
00:02:59,600 --> 00:03:01,820
‫Você pode até adicionar domínios personalizados.

59
00:03:01,820 --> 00:03:03,800
‫Mas, o único problema com

60
00:03:03,800 --> 00:03:06,550
‫isso é que o aplicativo irá basicamente hibernar,

61
00:03:06,550 --> 00:03:08,210
‫então, basicamente, após 30

62
00:03:08,210 --> 00:03:10,283
‫minutos sem ninguém acessando o aplicativo.

63
00:03:11,760 --> 00:03:13,460
‫Mas, de qualquer forma, você

64
00:03:13,460 --> 00:03:15,660
‫pode dar uma olhada em tudo isso sozinho.

65
00:03:15,660 --> 00:03:18,870
‫Então, vamos agora realmente voltar ao nosso projeto aqui.

66
00:03:18,870 --> 00:03:21,430
‫E, para iniciar o processo de implantação,

67
00:03:21,430 --> 00:03:25,300
‫vamos começar fazendo login no Heroku em nossa linha de comando.

68
00:03:25,300 --> 00:03:28,370
‫E isso vai funcionar por causa da instalação que acabamos

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

70
00:03:30,290 --> 00:03:32,970
‫Tudo bem, vamos dar mais espaço aqui.

71
00:03:32,970 --> 00:03:36,763
‫Limpe isso e agora escreva o login do heroku.

72
00:03:40,060 --> 00:03:43,350
‫Portanto, se a instalação do Heroku foi bem-sucedida, ao

73
00:03:43,350 --> 00:03:47,410
‫digitar o login do heroku, você deverá ver esta mensagem aqui,

74
00:03:47,410 --> 00:03:50,100
‫pressione qualquer tecla para abrir o navegador.

75
00:03:50,100 --> 00:03:52,890
‫Então, basta pressionar qualquer tecla, como está escrito, exceto

76
00:03:52,890 --> 00:03:55,663
‫Q porque isso irá fechar o aplicativo.

77
00:03:57,270 --> 00:04:00,880
‫E então, isso vai abrir uma janela para você onde você

78
00:04:00,880 --> 00:04:02,243
‫pode fazer o login.

79
00:04:04,690 --> 00:04:07,250
‫E, depois disso, como num passe de

80
00:04:07,250 --> 00:04:11,110
‫mágica, você estará logado no Heroku em sua linha de comando.

81
00:04:11,110 --> 00:04:13,650
‫Então, provavelmente deve demorar um pouco

82
00:04:14,490 --> 00:04:17,230
‫e às vezes nem funciona na primeira tentativa.

83
00:04:17,230 --> 00:04:19,090
‫Então, na verdade, isso aconteceu comigo antes.

84
00:04:19,090 --> 00:04:20,873
‫E então, basta apertar o controle C.

85
00:04:22,990 --> 00:04:26,680
‫E assim, em um Mac, isso realmente é o controle C, não o comando C.

86
00:04:26,680 --> 00:04:28,163
‫E. Vamos tentar de novo.

87
00:04:29,370 --> 00:04:33,493
‫Pressione qualquer tecla, volte para o navegador, faça login novamente.

88
00:04:35,980 --> 00:04:38,750
‫Volte novamente e pronto.

89
00:04:38,750 --> 00:04:42,480
‫Então, veja, agora estou logado com meu endereço de e-mail.

90
00:04:42,480 --> 00:04:44,890
‫Então, novamente, esta não foi a primeira

91
00:04:44,890 --> 00:04:47,920
‫vez que não funcionou para mim na primeira vez.

92
00:04:47,920 --> 00:04:49,500
‫E então, se

93
00:04:49,500 --> 00:04:53,120
‫isso aconteceu com você, faça exatamente como fiz aqui.

94
00:04:53,120 --> 00:04:55,130
‫De qualquer forma, agora, com

95
00:04:55,130 --> 00:04:57,660
‫isso, estamos logados no Heroku aqui em nosso

96
00:04:57,660 --> 00:05:00,993
‫console e agora devemos ser capazes de criar um novo projeto.

97
00:05:02,360 --> 00:05:05,560
‫Agora, antes de fazer isso, realmente precisamos mudar

98
00:05:05,560 --> 00:05:10,480
‫algo em nosso pacote NPM. arquivo json.

99
00:05:10,480 --> 00:05:11,650
‫Então, este aqui.

100
00:05:11,650 --> 00:05:13,760
‫E isso é porque o

101
00:05:13,760 --> 00:05:17,810
‫Heroku realmente usa nosso comando start aqui para iniciar nosso aplicativo.

102
00:05:17,810 --> 00:05:22,040
‫Agora, na produção, não queremos usar o nodemon aqui.

103
00:05:22,040 --> 00:05:23,870
‫Simplesmente queremos executar nosso

104
00:05:23,870 --> 00:05:26,920
‫aplicativo usando o comando node e não nodemon

105
00:05:26,920 --> 00:05:29,950
‫porque esse é realmente apenas para desenvolvimento.

106
00:05:29,950 --> 00:05:32,970
‫Então, vamos mudar isso e duplicarei essa linha e então

107
00:05:33,937 --> 00:05:35,587
‫chamaremos este de dev.

108
00:05:36,450 --> 00:05:38,953
‫E então, o primeiro será apenas o nó.

109
00:05:40,690 --> 00:05:43,810
‫Então, novamente, em seu pacote. json, você deve

110
00:05:43,810 --> 00:05:46,890
‫sempre ter este script de início como este.

111
00:05:46,890 --> 00:05:49,773
‫Portanto, o comando de nó e, em seguida, seu ponto de entrada.

112
00:05:50,610 --> 00:05:53,920
‫Agora, também é importante para o

113
00:05:53,920 --> 00:05:57,490
‫Heroku que você especifique esses motores aqui.

114
00:05:57,490 --> 00:05:59,670
‫E então, nós fizemos isso antes,

115
00:05:59,670 --> 00:06:01,720
‫eu acho, porque algum

116
00:06:01,720 --> 00:06:05,230
‫pacote, ou na verdade porque ESLint exigia que funcionasse corretamente.

117
00:06:05,230 --> 00:06:07,440
‫Mas, se não o tivéssemos

118
00:06:07,440 --> 00:06:11,213
‫configurado naquela época, bem, então precisaríamos realmente configurá-lo neste ponto.

119
00:06:12,610 --> 00:06:14,550
‫Agora, uma vez que

120
00:06:14,550 --> 00:06:18,353
‫mudamos este arquivo, precisamos enviar essas mudanças para nosso

121
00:06:19,200 --> 00:06:24,200
‫repositório, então vamos git add package. json aqui.

122
00:06:24,560 --> 00:06:25,693
‫E então, git commit.

123
00:06:31,820 --> 00:06:34,323
‫E então, com uma mensagem de confirmação útil.

124
00:06:37,652 --> 00:06:39,660
‫Agora, outra coisa que é realmente

125
00:06:39,660 --> 00:06:42,640
‫importante ao implantar um aplicativo no Heroku é ouvir a

126
00:06:42,640 --> 00:06:46,543
‫porta no processo. env. PORTA.

127
00:06:47,580 --> 00:06:52,580
‫Então, aqui mesmo no servidor, nós realmente fazemos isso aqui.

128
00:06:54,500 --> 00:06:59,100
‫Portanto, especificamos a variável da porta como processo. env. PORTA.

129
00:06:59,100 --> 00:07:02,460
‫E então, novamente, no Heroku, isso é absolutamente obrigatório porque,

130
00:07:02,460 --> 00:07:04,850
‫do contrário, não funcionará de jeito nenhum.

131
00:07:04,850 --> 00:07:07,010
‫Então, se aqui, por exemplo, nós

132
00:07:07,010 --> 00:07:10,130
‫apenas especificássemos alguma porta aleatória, como 3000 aqui,

133
00:07:10,130 --> 00:07:11,780
‫então isso realmente

134
00:07:13,035 --> 00:07:15,050
‫não funcionaria e isso porque

135
00:07:15,050 --> 00:07:18,730
‫nos bastidores, o Heroku irá realmente atribuir uma porta aleatória

136
00:07:18,730 --> 00:07:20,780
‫para esta variável de ambiente.

137
00:07:20,780 --> 00:07:23,270
‫Mas, um pouco mais sobre isso em

138
00:07:24,310 --> 00:07:26,320
‫um segundo, porque agora, estamos

139
00:07:26,320 --> 00:07:28,780
‫realmente prontos para fazer a implantação real.

140
00:07:28,780 --> 00:07:31,890
‫E, para isso, criamos um novo projeto Heroku em

141
00:07:31,890 --> 00:07:33,420
‫nossa pasta de projetos.

142
00:07:33,420 --> 00:07:36,830
‫Portanto, certifique-se de que você realmente está em

143
00:07:36,830 --> 00:07:38,700
‫sua pasta raiz e,

144
00:07:38,700 --> 00:07:42,240
‫depois de ter certeza de que está lá e

145
00:07:42,240 --> 00:07:46,943
‫logado no Heroku, o que fizemos antes, você pode escrever heroku create.

146
00:07:48,160 --> 00:07:52,000
‫E isso criará um novo aplicativo basicamente com um

147
00:07:52,000 --> 00:07:53,890
‫nome completamente aleatório.

148
00:07:53,890 --> 00:07:57,060
‫Portanto, no meu caso, são radiant-springs e este

149
00:07:57,060 --> 00:07:59,320
‫número, mas seu aplicativo

150
00:07:59,320 --> 00:08:02,350
‫terá, é claro, um nome completamente diferente.

151
00:08:02,350 --> 00:08:04,020
‫Agora, o que isso

152
00:08:04,020 --> 00:08:06,580
‫fez foi realmente criar um novo branch

153
00:08:06,580 --> 00:08:08,290
‫remoto em nosso repositório Git.

154
00:08:08,290 --> 00:08:10,500
‫E, este ramo é chamado de heroku.

155
00:08:10,500 --> 00:08:14,090
‫Então, lembre-se de como antes, em uma das palestras anteriores, adicionamos

156
00:08:14,090 --> 00:08:17,150
‫um branch remoto apontando para o GitHub e esse

157
00:08:17,150 --> 00:08:19,263
‫branch foi chamado de origem.

158
00:08:20,160 --> 00:08:23,530
‫E então, nós enviamos nosso código para

159
00:08:23,530 --> 00:08:27,423
‫aquele branch remoto usando git push origin master, assim.

160
00:08:29,090 --> 00:08:30,320
‫Lembre-se disso?

161
00:08:30,320 --> 00:08:31,610
‫E então, agora, como

162
00:08:31,610 --> 00:08:35,040
‫mencionei, temos um novo ramo remoto aqui, que é chamado de heroku.

163
00:08:35,040 --> 00:08:38,420
‫E então, realmente, o processo de implantação de nosso aplicativo

164
00:08:38,420 --> 00:08:41,960
‫é tão simples quanto enviar nosso código para aquele branch remoto.

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

166
00:08:46,740 --> 00:08:49,450
‫E realmente precisa ser o branch master.

167
00:08:49,450 --> 00:08:53,033
‫É o único ramo para o qual esta implantação funciona.

168
00:08:53,870 --> 00:08:55,580
‫Mas, em nosso caso, como

169
00:08:55,580 --> 00:08:57,700
‫você pode ver aqui, estamos na verdade em

170
00:08:57,700 --> 00:09:01,823
‫nosso branch master e você também pode vê-lo aqui no canto do VS Code.

171
00:09:03,020 --> 00:09:04,690
‫E então, isso não é problema.

172
00:09:04,690 --> 00:09:06,670
‫Então, vamos agora executar este

173
00:09:06,670 --> 00:09:08,780
‫comando, que deve demorar um pouco

174
00:09:08,780 --> 00:09:11,580
‫porque, é claro, ele irá carregar todos os seus

175
00:09:11,580 --> 00:09:14,323
‫arquivos que estão no repositório para o Heroku.

176
00:09:18,330 --> 00:09:22,340
‫E agora, você vê todo esse processo acontecendo e, portanto, o

177
00:09:22,340 --> 00:09:23,327
‫que isso

178
00:09:23,327 --> 00:09:26,640
‫está fazendo é instalar todas as nossas dependências aqui

179
00:09:26,640 --> 00:09:28,380
‫em nosso novo aplicativo.

180
00:09:28,380 --> 00:09:30,357
‫Então, em nosso aplicativo que agora está no Heroku.

181
00:09:33,500 --> 00:09:35,970
‫Então, vamos esperar até que isso seja

182
00:09:35,970 --> 00:09:39,153
‫feito e te vejo de volta quando o processo terminar.

183
00:09:40,470 --> 00:09:42,270
‫E então, está feito.

184
00:09:42,270 --> 00:09:46,350
‫Então, espero que você tenha entendido a mensagem, Verificando implantação ... feito.

185
00:09:46,350 --> 00:09:50,610
‫Então, você vê, iniciando, e isso realmente significa que

186
00:09:50,610 --> 00:09:53,320
‫nosso aplicativo agora está implantado no

187
00:09:53,320 --> 00:09:55,023
‫Heroku nesta URL.

188
00:09:56,240 --> 00:09:58,770
‫Então, você vê o sucesso da construção.

189
00:09:58,770 --> 00:10:01,920
‫E, sério, todas essas mensagens que

190
00:10:01,920 --> 00:10:04,190
‫já falei antes.

191
00:10:04,190 --> 00:10:06,810
‫E então, agora, para abrir nosso aplicativo,

192
00:10:06,810 --> 00:10:09,703
‫tudo o que precisamos escrever é abrir o heroku.

193
00:10:11,240 --> 00:10:13,750
‫Agora, não esperamos que isso funcione

194
00:10:13,750 --> 00:10:16,250
‫ainda porque todas as nossas variáveis

195
00:10:16,250 --> 00:10:17,620
‫de ambiente

196
00:10:18,670 --> 00:10:22,780
‫não estão realmente definidas porque excluímos este arquivo de configuração aqui

197
00:10:22,780 --> 00:10:24,163
‫de nosso repositório Git.

198
00:10:25,560 --> 00:10:27,420
‫Mas, ainda assim,

199
00:10:27,420 --> 00:10:30,720
‫apenas por diversão, vamos tentar abrir nosso aplicativo.

200
00:10:30,720 --> 00:10:34,450
‫E então, de fato, isso abre nossa URL, neste

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

202
00:10:41,100 --> 00:10:44,950
‫Então, basicamente, é o subdomínio do Heroku.

203
00:10:44,950 --> 00:10:46,730
‫E então, novamente, como

204
00:10:46,730 --> 00:10:49,320
‫esperado, nós realmente encontramos alguns erros aqui.

205
00:10:49,320 --> 00:10:52,430
‫E, mais uma vez, isso é porque nossas variáveis de

206
00:10:52,430 --> 00:10:55,030
‫ambiente, neste ponto, ainda não estão definidas.

207
00:10:55,030 --> 00:10:57,730
‫Agora, também podemos dar uma olhada nesses

208
00:10:57,730 --> 00:10:59,850
‫erros nos logs do Heroku.

209
00:10:59,850 --> 00:11:02,140
‫Então, deixe-me mostrar isso também.

210
00:11:02,140 --> 00:11:06,023
‫Então, heroku registra --tail.

211
00:11:07,710 --> 00:11:11,313
‫Então, aqui, você vê o estado alterado de armazenamento para travado, então

212
00:11:13,100 --> 00:11:15,130
‫vamos ver o que temos aqui.

213
00:11:15,130 --> 00:11:17,170
‫Na verdade, você vê a mensagem

214
00:11:17,170 --> 00:11:18,930
‫de erro que criamos aqui.

215
00:11:18,930 --> 00:11:21,530
‫Então, EXECEPÇÃO NÃO CAUSADA com este emoji e,

216
00:11:21,530 --> 00:11:23,060
‫em seguida, desligando ...

217
00:11:27,320 --> 00:11:28,700
‫E, você vê

218
00:11:28,700 --> 00:11:31,980
‫aqui, não é possível ler a propriedade 'substituir' de indefinido.

219
00:11:31,980 --> 00:11:35,170
‫E então, novamente, isso é porque as variáveis de

220
00:11:35,170 --> 00:11:37,510
‫ambiente não são definidas neste ponto.

221
00:11:37,510 --> 00:11:41,053
‫Então, vamos sair desses logs aqui, novamente, com o controle C.

222
00:11:42,860 --> 00:11:44,810
‫E então, agora, vamos

223
00:11:44,810 --> 00:11:46,800
‫definir essas variáveis de ambiente

224
00:11:46,800 --> 00:11:48,790
‫para fazer nosso aplicativo funcionar.

225
00:11:48,790 --> 00:11:50,060
‫E, a maneira

226
00:11:50,060 --> 00:11:52,740
‫como fazemos isso é especificar cada variável de

227
00:11:52,740 --> 00:11:54,960
‫ambiente usando um comando especial do Heroku.

228
00:11:54,960 --> 00:11:58,080
‫Então, Heroku e outras plataformas de hospedagem, eles

229
00:11:58,080 --> 00:12:01,000
‫não usam a. env arquivo como fizemos

230
00:12:01,000 --> 00:12:03,793
‫aqui no desenvolvimento para todas as nossas variáveis de configuração.

231
00:12:05,160 --> 00:12:09,560
‫Portanto, novamente, aqui em desenvolvimento, usamos esta configuração. env para colocar nossas

232
00:12:09,560 --> 00:12:11,560
‫variáveis de ambiente.

233
00:12:11,560 --> 00:12:13,730
‫Mas, aqui no Heroku, vamos defini-los de

234
00:12:13,730 --> 00:12:14,830
‫uma forma diferente.

235
00:12:14,830 --> 00:12:16,610
‫Mas, então, em nosso código, tudo

236
00:12:16,610 --> 00:12:18,543
‫o que temos funciona exatamente da mesma.

237
00:12:19,856 --> 00:12:22,120
‫Então, vamos começar com a

238
00:12:22,120 --> 00:12:24,650
‫variável NODE_ENV que precisamos definir para produção.

239
00:12:24,650 --> 00:12:29,650
‫E então, fazemos isso dizendo heroku config: set e então

240
00:12:32,390 --> 00:12:36,160
‫o nome da variável, NODE_ENV = production.

241
00:12:40,930 --> 00:12:43,780
‫E, na verdade, essa variável NODE_ENV

242
00:12:43,780 --> 00:12:47,220
‫é configurada por padrão para produção pelo Heroku.

243
00:12:47,220 --> 00:12:49,980
‫Mas, ainda assim, vamos ter 100% de certeza

244
00:12:49,980 --> 00:12:52,240
‫de que realmente continuará assim,

245
00:12:52,240 --> 00:12:54,760
‫mesmo que o Heroku mude alguma coisa.

246
00:12:54,760 --> 00:12:57,440
‫Então, realmente, com certeza, ainda vamos fazer isso

247
00:12:57,440 --> 00:13:00,610
‫porque, como sabemos, muito do nosso código depende dessa

248
00:13:00,610 --> 00:13:03,130
‫variável e também pode fazer com

249
00:13:03,130 --> 00:13:07,310
‫que os aplicativos do Node sejam executados até três vezes mais rápido.

250
00:13:07,310 --> 00:13:09,430
‫Acho que conversamos sobre isso antes.

251
00:13:09,430 --> 00:13:12,610
‫Portanto, a importância de definir NODE_ENV para produção.

252
00:13:12,610 --> 00:13:15,913
‫Mas, de qualquer forma, é uma boa coisa fazer isso na verdade.

253
00:13:16,810 --> 00:13:18,950
‫Então, basta clicar em Return e

254
00:13:18,950 --> 00:13:21,400
‫ele definirá essa variável de ambiente e

255
00:13:21,400 --> 00:13:22,980
‫reiniciará o aplicativo.

256
00:13:22,980 --> 00:13:25,500
‫E então, agora, tudo o que

257
00:13:25,500 --> 00:13:27,640
‫precisamos fazer é basicamente fazer

258
00:13:27,640 --> 00:13:30,580
‫isso para todas as variáveis de ambiente relevantes.

259
00:13:30,580 --> 00:13:34,490
‫Então, fizemos o NODE_ENV, agora, a porta, não vamos configurá-la

260
00:13:34,490 --> 00:13:36,360
‫porque, como mencionei antes,

261
00:13:36,360 --> 00:13:38,380
‫o Heroku irá, na verdade,

262
00:13:38,380 --> 00:13:41,533
‫nos bastidores, atribuir uma porta aleatória ao nosso aplicativo.

263
00:13:42,470 --> 00:13:44,913
‫E então, a seguir, vamos adicionar o banco de dados.

264
00:13:46,390 --> 00:13:48,290
‫E, na verdade, vamos copiar tudo isso.

265
00:13:52,550 --> 00:13:54,000
‫E então, basta colá-lo aqui.

266
00:13:54,940 --> 00:13:56,960
‫E isso realmente não funcionou, então vamos

267
00:13:56,960 --> 00:13:59,260
‫tentar fazer isso com algumas citações aqui, talvez.

268
00:14:04,170 --> 00:14:06,580
‫Sim, parece muito melhor.

269
00:14:06,580 --> 00:14:09,380
‫Em seguida, a senha do banco de dados.

270
00:14:10,853 --> 00:14:12,520
‫Vamos esclarecer isso aqui.

271
00:14:18,667 --> 00:14:20,334
‫A seguir, o segredo.

272
00:14:24,720 --> 00:14:26,253
‫Então, assim.

273
00:14:30,587 --> 00:14:34,263
‫E então, isso é um pouco chato de fazer para todos eles,

274
00:14:35,740 --> 00:14:38,160
‫mas, bem, só temos que fazer uma

275
00:14:38,160 --> 00:14:40,853
‫vez, então não é realmente um grande problema.

276
00:14:43,981 --> 00:14:46,710
‫Agora, também precisamos deste aqui porque

277
00:14:48,020 --> 00:14:51,070
‫tudo isso aqui é apenas para mailtrap

278
00:14:51,070 --> 00:14:54,190
‫e na verdade não precisamos disso na produção

279
00:14:54,190 --> 00:14:56,950
‫porque lembre-se que quando estamos em produção,

280
00:14:56,950 --> 00:15:00,300
‫todos os nossos emails são enviados usando SENDGRID e

281
00:15:00,300 --> 00:15:02,230
‫não mais usando mailtrap.

282
00:15:02,230 --> 00:15:04,270
‫E assim, em nosso aplicativo

283
00:15:04,270 --> 00:15:06,563
‫Heroku, não precisamos deles para variáveis.

284
00:15:07,520 --> 00:15:09,773
‫Mas, precisamos do e-mail de.

285
00:15:13,520 --> 00:15:15,163
‫Então, esse é o nosso próximo.

286
00:15:17,820 --> 00:15:19,960
‫Então, precisamos SENDGRID_USERNAME, bem

287
00:15:26,670 --> 00:15:28,333
‫como a senha.

288
00:15:37,330 --> 00:15:40,963
‫E, finalmente, nossa chave de tarja secreta.

289
00:15:46,320 --> 00:15:48,130
‫E, com isso, acho

290
00:15:48,130 --> 00:15:51,530
‫que temos todas as nossas variáveis relevantes definidas aqui.

291
00:15:51,530 --> 00:15:55,653
‫E então, vamos tentar novamente, heroku aberto.

292
00:15:59,850 --> 00:16:04,850
‫E isso parece perfeito, lindo.

293
00:16:04,960 --> 00:16:08,200
‫Então, realmente, nosso aplicativo agora está implantado em

294
00:16:08,200 --> 00:16:12,610
‫molas radiantes ou o que quer que você tenha em seu caso

295
00:16:12,610 --> 00:16:15,343
‫e tudo parece estar funcionando perfeitamente.

296
00:16:16,300 --> 00:16:18,083
‫Então, todas as nossas imagens estão aqui.

297
00:16:19,050 --> 00:16:22,393
‫Vamos dar uma olhada em uma única página aqui também.

298
00:16:25,280 --> 00:16:29,500
‫E, de fato, tudo isso funciona perfeitamente.

299
00:16:29,500 --> 00:16:31,333
‫Então, nosso mapa também aparece.

300
00:16:34,190 --> 00:16:37,850
‫E, sim, parece funcionar muito bem.

301
00:16:37,850 --> 00:16:41,970
‫E, o fato de tudo isso funcionar perfeitamente também mostra a

302
00:16:41,970 --> 00:16:43,360
‫beleza de

303
00:16:43,360 --> 00:16:46,550
‫ter um banco de dados hospedado o tempo

304
00:16:46,550 --> 00:16:48,690
‫todo também durante o desenvolvimento,

305
00:16:48,690 --> 00:16:50,910
‫porque não importa se estejamos em

306
00:16:50,910 --> 00:16:54,890
‫desenvolvimento ou em produção, nosso banco de dados continua funcionando.

307
00:16:54,890 --> 00:16:57,360
‫Portanto, se tivéssemos usado um banco

308
00:16:57,360 --> 00:17:00,030
‫de dados local, agora teríamos que exportar todos

309
00:17:00,030 --> 00:17:03,890
‫os dados desse banco de dados local, criar um banco de dados

310
00:17:03,890 --> 00:17:07,600
‫hospedado e carregar todos os dados nesse banco de dados hospedado.

311
00:17:07,600 --> 00:17:10,460
‫E então, isso, é claro, criaria uma etapa extra

312
00:17:10,460 --> 00:17:12,160
‫e algum trabalho extra.

313
00:17:12,160 --> 00:17:15,340
‫E, novamente, com isso, simplesmente funciona.

314
00:17:15,340 --> 00:17:19,210
‫Então, essa é uma experiência muito boa para o desenvolvedor.

315
00:17:19,210 --> 00:17:22,743
‫Então, vamos ver se também podemos fazer o login aqui,

316
00:17:23,830 --> 00:17:26,370
‫o que deve, é claro, ser possível com

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

318
00:17:34,700 --> 00:17:36,313
‫E, parece que sim.

319
00:17:39,697 --> 00:17:40,823
‫Tão bonito.

320
00:17:41,960 --> 00:17:45,353
‫Vamos ver se todas as nossas turnês de livros ainda estão

321
00:17:46,470 --> 00:17:48,440
‫aqui, mas por que não estariam?

322
00:17:48,440 --> 00:17:51,270
‫E, de fato, bem, na verdade é apenas um,

323
00:17:51,270 --> 00:17:53,373
‫mas, de fato, está aqui.

324
00:17:54,460 --> 00:17:58,100
‫Então, ótimo, isso é absolutamente fantástico.

325
00:17:58,100 --> 00:18:00,420
‫E agora, vamos dar uma

326
00:18:00,420 --> 00:18:02,763
‫rápida olhada em nosso painel do Heroku.

327
00:18:07,270 --> 00:18:09,293
‫Então, aqui, vamos abrir o Heroku.

328
00:18:11,010 --> 00:18:12,343
‫Feche esses dois.

329
00:18:14,120 --> 00:18:16,390
‫E assim, como já efetuamos

330
00:18:16,390 --> 00:18:19,810
‫login aqui anteriormente, isso deve nos levar automaticamente ao

331
00:18:19,810 --> 00:18:23,060
‫painel e esse painel irá mostrar a você, por

332
00:18:23,060 --> 00:18:26,210
‫padrão, todos os aplicativos que você implantou atualmente.

333
00:18:26,210 --> 00:18:28,800
‫E então, o que acabamos de implantar

334
00:18:28,800 --> 00:18:30,970
‫são essas fontes radiantes aqui.

335
00:18:30,970 --> 00:18:33,260
‫Então, vamos abrir esse.

336
00:18:33,260 --> 00:18:34,390
‫Então, aqui, do lado

337
00:18:34,390 --> 00:18:36,180
‫direito, você pode ver toda a atividade.

338
00:18:36,180 --> 00:18:39,390
‫Por exemplo, definir todas essas variáveis de configuração

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

340
00:18:41,040 --> 00:18:45,810
‫Você tem seus recursos e muitos deles só são interessantes se você

341
00:18:45,810 --> 00:18:47,920
‫tiver um dinamômetro pago.

342
00:18:47,920 --> 00:18:50,390
‫E, um dinamômetro é realmente apenas o termo

343
00:18:50,390 --> 00:18:53,340
‫que o Heroku usa basicamente para um contêiner no qual

344
00:18:53,340 --> 00:18:54,913
‫seu aplicativo é executado.

345
00:18:56,366 --> 00:18:58,390
‫Então, temos algumas métricas onde podemos ver

346
00:18:58,390 --> 00:19:01,410
‫quem está acessando o aplicativo, mas, mais uma vez, isso

347
00:19:01,410 --> 00:19:03,250
‫só funciona se você tiver

348
00:19:03,250 --> 00:19:05,093
‫um hobby ou um dinamômetro profissional.

349
00:19:06,950 --> 00:19:09,460
‫Mas, o que realmente importa aqui são as

350
00:19:09,460 --> 00:19:10,920
‫configurações e então aqui,

351
00:19:10,920 --> 00:19:14,420
‫eu queria mostrar a vocês que podemos revelar as variáveis de configuração.

352
00:19:14,420 --> 00:19:17,000
‫E assim, em vez de alterá-los ou

353
00:19:17,000 --> 00:19:20,253
‫adicioná-los na linha de comando, também podemos fazer isso aqui mesmo.

354
00:19:21,650 --> 00:19:24,170
‫Então, esses são todos eles que acabamos de adicionar na

355
00:19:24,170 --> 00:19:25,223
‫linha de comando.

356
00:19:27,250 --> 00:19:31,540
‫Então, outra coisa muito importante está aqui em More, podemos

357
00:19:31,540 --> 00:19:33,623
‫realmente ver nossos logs.

358
00:19:37,560 --> 00:19:40,710
‫Então, vamos esperar por isso aqui.

359
00:19:40,710 --> 00:19:44,430
‫E então, o Heroku então dá a você todos esses registros, realmente

360
00:19:44,430 --> 00:19:47,190
‫para tudo o que acontece em seu aplicativo.

361
00:19:47,190 --> 00:19:49,640
‫Então, quando abrimos o aplicativo no navegador,

362
00:19:49,640 --> 00:19:52,300
‫ele solicitou todos esses arquivos como vocês podem

363
00:19:52,300 --> 00:19:54,283
‫ver aqui, por exemplo.

364
00:19:56,600 --> 00:19:58,380
‫Então, realmente, tudo o que

365
00:19:58,380 --> 00:20:00,870
‫está acontecendo estará bem aqui nesses logs.

366
00:20:00,870 --> 00:20:04,210
‫E assim, se o seu aplicativo travar ou se algo acontecer e basicamente tudo

367
00:20:04,210 --> 00:20:07,660
‫para o qual usamos um console. o log

368
00:20:07,660 --> 00:20:10,843
‫acabará sendo mostrado aqui nesses logs.

369
00:20:10,843 --> 00:20:13,400
‫E então, esses foram os registros do Heroku

370
00:20:13,400 --> 00:20:15,933
‫que mencionei em uma das palestras anteriores.

371
00:20:17,987 --> 00:20:19,770
‫Agora, uma coisa que podemos

372
00:20:19,770 --> 00:20:22,300
‫fazer é realmente alterar o nome do nosso aplicativo.

373
00:20:22,300 --> 00:20:25,410
‫Portanto, em vez de ser chamado de nome aleatório, podemos

374
00:20:25,410 --> 00:20:27,800
‫dar a ele um nome mais significativo.

375
00:20:27,800 --> 00:20:29,960
‫Agora, poderíamos fazer isso aqui,

376
00:20:29,960 --> 00:20:34,090
‫mas isso iria bagunçar nosso aplicativo no terminal em

377
00:20:34,090 --> 00:20:35,810
‫nosso computador local.

378
00:20:35,810 --> 00:20:38,620
‫E então, em vez disso, o que fazemos

379
00:20:38,620 --> 00:20:40,763
‫é mudar o nome diretamente aqui.

380
00:20:41,970 --> 00:20:46,813
‫Então, digamos, aplicativos heroku: renomeie, assim, e então o

381
00:20:48,460 --> 00:20:51,530
‫novo nome para o aplicativo.

382
00:20:51,530 --> 00:20:53,470
‫E, vou chamá-lo de

383
00:20:53,470 --> 00:20:55,740
‫natours, mas você, é claro, então

384
00:20:55,740 --> 00:20:59,420
‫não será capaz de chamá-lo também de natours porque

385
00:20:59,420 --> 00:21:01,620
‫esse subdomínio já estará ocupado.

386
00:21:01,620 --> 00:21:04,350
‫Então, você pode chamá-lo de natours com seu nome

387
00:21:04,350 --> 00:21:07,660
‫ou com seu nome de usuário ou qualquer outra palavra

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

389
00:21:10,000 --> 00:21:12,763
‫Então, vou prosseguir e agora, realmente chamá-lo de natours.

390
00:21:13,660 --> 00:21:18,320
‫Ah, mas vejo que alguém já tirou esse nome de mim,

391
00:21:18,320 --> 00:21:20,223
‫isso é uma pena.

392
00:21:21,304 --> 00:21:24,360
‫Mas, provavelmente é porque eu já usei o nome natours

393
00:21:24,360 --> 00:21:26,570
‫em um projeto de outro curso.

394
00:21:26,570 --> 00:21:28,853
‫E então, alguém deve ter pego.

395
00:21:30,231 --> 00:21:33,080
‫Então, vamos chamá-lo de natoursapp e, claro, eu

396
00:21:33,080 --> 00:21:35,440
‫preciso escrever todo o resto.

397
00:21:35,440 --> 00:21:39,660
‫Então, apps heroku: renomear

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

399
00:21:41,840 --> 00:21:44,033
‫Então, esperançosamente, ninguém pegou este.

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

401
00:21:47,980 --> 00:21:51,020
‫alguma coisa, mas alguém já pegou esse também.

402
00:21:51,020 --> 00:21:52,373
‫Bem, isso é muito estranho.

403
00:21:53,930 --> 00:21:56,120
‫Então, acho que tenho muitos alunos

404
00:21:56,120 --> 00:21:59,110
‫por aí que postam seus aplicativos no Heroku, então

405
00:21:59,110 --> 00:22:02,250
‫vou apenas seguir o exemplo que dei anteriormente e irei

406
00:22:02,250 --> 00:22:03,920
‫adicionar meu nome aqui.

407
00:22:03,920 --> 00:22:07,800
‫Então, terceira tentativa com natours-jonas.

408
00:22:07,800 --> 00:22:12,683
‫Então, sim, vamos esperar que na terceira vez funcione.

409
00:22:13,780 --> 00:22:15,493
‫Então, vamos esperar por isso aqui.

410
00:22:17,880 --> 00:22:18,960
‫E é isso.

411
00:22:18,960 --> 00:22:21,163
‫Então, vamos tentar abrir o heroku.

412
00:22:24,800 --> 00:22:27,150
‫Tudo bem, e aqui vamos nós.

413
00:22:27,150 --> 00:22:29,030
‫E, agora, neste ponto,

414
00:22:29,030 --> 00:22:31,330
‫a versão antiga realmente não funcionará mais.

415
00:22:31,330 --> 00:22:34,163
‫Então, este se foi, vamos fechá-lo.

416
00:22:35,030 --> 00:22:36,780
‫Vamos voltar ao Pessoal aqui.

417
00:22:38,010 --> 00:22:40,840
‫E então, sim, vamos lá.

418
00:22:40,840 --> 00:22:42,993
‫Isso é natours-Jonas.

419
00:22:44,750 --> 00:22:49,640
‫Ótimo, então nosso site está oficialmente em produção.

420
00:22:49,640 --> 00:22:52,070
‫Agora, outra coisa que quero fazer

421
00:22:52,070 --> 00:22:55,340
‫aqui é realmente atualizar a variável de ambiente

422
00:22:55,340 --> 00:22:57,580
‫Postman para produção, lembra disso?

423
00:22:57,580 --> 00:22:59,480
‫Então, vamos copiar isso aqui.

424
00:23:00,440 --> 00:23:03,610
‫E também não o quão

425
00:23:03,610 --> 00:23:07,000
‫automaticamente estamos em https aqui no Heroku.

426
00:23:07,000 --> 00:23:10,620
‫Por isso, o Heroku faz todo o gerenciamento do

427
00:23:10,620 --> 00:23:14,810
‫certificado SSL para nós nos bastidores para que nossa página esteja

428
00:23:14,810 --> 00:23:16,840
‫sempre segura, sempre com https.

429
00:23:16,840 --> 00:23:20,773
‫Então, esse é outro recurso muito bom do Heroku.

430
00:23:22,540 --> 00:23:24,860
‫Então, agora, aqui no

431
00:23:24,860 --> 00:23:29,860
‫Postman, vamos em frente e mudar essa produção e a URL.

432
00:23:30,450 --> 00:23:32,733
‫Claro, este era apenas um espaço reservado.

433
00:23:33,680 --> 00:23:38,120
‫E, em vez disso, o que queremos agora é nosso URL de produção real.

434
00:23:38,120 --> 00:23:40,593
‫E não tenho certeza se está correto

435
00:23:41,820 --> 00:23:44,900
‫assim, mas apenas atualize e compare com o de desenvolvimento.

436
00:23:44,900 --> 00:23:46,340
‫Mas, de fato, é.

437
00:23:46,340 --> 00:23:48,823
‫Então, precisa terminar com essa barra.

438
00:23:50,380 --> 00:23:53,483
‫E então, aquele que acabamos de fazer também faz isso.

439
00:23:54,320 --> 00:23:57,220
‫Então, vamos atualizar, fechar, e agora, tudo

440
00:23:57,220 --> 00:24:00,560
‫o que precisamos fazer aqui é mudar do ambiente

441
00:24:00,560 --> 00:24:03,683
‫de desenvolvimento para o ambiente natours de produção.

442
00:24:04,560 --> 00:24:08,660
‫E então, agora, se, por exemplo, eu tentar obter Get All

443
00:24:08,660 --> 00:24:11,260
‫Tours, que na verdade é o que

444
00:24:11,260 --> 00:24:13,860
‫tínhamos aberto, vamos ver se funciona.

445
00:24:13,860 --> 00:24:15,363
‫Vamos desligar tudo isso.

446
00:24:17,200 --> 00:24:20,093
‫E, de fato, é, ótimo.

447
00:24:21,400 --> 00:24:23,220
‫Vamos ver se podemos

448
00:24:23,220 --> 00:24:26,543
‫realmente ver o URL completo em algum lugar aqui.

449
00:24:28,270 --> 00:24:29,823
‫Bem, isso realmente não mostra.

450
00:24:31,870 --> 00:24:34,110
‫Mas, de qualquer forma, isso

451
00:24:34,110 --> 00:24:37,810
‫realmente não importa porque ainda sabemos que realmente funcionou.

452
00:24:37,810 --> 00:24:40,110
‫Portanto, agora realmente recuperamos esses dados

453
00:24:40,110 --> 00:24:43,860
‫de nossa API de produção e podemos facilmente provar isso porque

454
00:24:43,860 --> 00:24:46,470
‫a versão de desenvolvimento nem mesmo está

455
00:24:46,470 --> 00:24:48,010
‫em execução no momento.

456
00:24:48,010 --> 00:24:50,943
‫Portanto, se enviarmos isso, obteremos esse erro.

457
00:24:54,830 --> 00:24:58,420
‫Então, mais uma vez, realmente,

458
00:24:58,420 --> 00:25:02,970
‫parabéns por quase terminar o projeto neste momento.

459
00:25:02,970 --> 00:25:04,920
‫Já está no servidor live

460
00:25:04,920 --> 00:25:07,260
‫e você pode, neste momento, compartilhar seu

461
00:25:07,260 --> 00:25:10,650
‫projeto com o mundo e mostrar a todos o que

462
00:25:10,650 --> 00:25:13,883
‫você conquistou após todo esse trabalho de construção deste projeto.

463
00:25:14,720 --> 00:25:18,420
‫Só mais uma pequena coisa que eu queria

464
00:25:18,420 --> 00:25:22,720
‫fazer aqui, como disse na última aula, é testar essa compressão.

465
00:25:22,720 --> 00:25:27,320
‫Então, vamos procurar a compressão gzip de teste aqui.

466
00:25:30,740 --> 00:25:33,850
‫E então, esse deve ser o primeiro resultado aqui,

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

468
00:25:36,150 --> 00:25:40,710
‫E assim, se inserirmos nosso URL aqui e depois verificarmos, vamos ver.

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

470
00:25:45,200 --> 00:25:47,903
‫E então, isso é por causa daquele pacote de

471
00:25:47,903 --> 00:25:50,200
‫compressão que usamos na última palestra.

472
00:25:50,200 --> 00:25:53,380
‫Então, originalmente, nossa página teria 14K, mas

473
00:25:53,380 --> 00:25:55,560
‫depois compactada, é 2K.

474
00:25:55,560 --> 00:25:58,610
‫E, claro, isso não faz uma grande

475
00:25:58,610 --> 00:26:02,610
‫diferença neste caso, mas para uma página muito maior, é claro,

476
00:26:02,610 --> 00:26:05,903
‫pode realmente fazer a diferença para seus usuários.

477
00:26:06,840 --> 00:26:10,470
‫Perfeito, agora, nos próximos vídeos, há apenas

478
00:26:10,470 --> 00:26:12,740
‫algumas pequenas coisas

479
00:26:12,740 --> 00:26:15,023
‫que ainda precisamos corrigir aqui.

480
00:26:16,020 --> 00:26:17,330
‫E assim, faremos

481
00:26:17,330 --> 00:26:20,200
‫isso nas próximas duas ou três palestras.

482
00:26:20,200 --> 00:26:21,730
‫E então é

483
00:26:21,730 --> 00:26:24,463
‫quando o projeto está realmente 100% concluído.