‫Instrutor: Então, depois de
‫todo esse tempo e todo esse trabalho construindo esse enorme projeto
‫completo, agora é finalmente a hora de realmente
‫implantá-lo em um servidor web e realmente compartilhá-lo com o mundo.
‫Então, neste vídeo, você
‫aprenderá como implantar um projeto no Heroku.
‫E a primeira coisa que realmente precisamos
‫fazer é instalar o Heroku em nosso computador.
‫Então, vamos pesquisar Heroku NodeJS.
‫E então, aqui, basicamente temos um
‫guia de introdução para NodeJS com Heroku porque
‫você pode hospedar todos os tipos de aplicativos
‫no Heroku, como aplicativos PHP ou Ruby on Rails.
‫Portanto, não funciona apenas para NodeJS.
‫E, vamos dar uma olhada no Heroku em um
‫segundo, mas por enquanto, vamos apenas começar instalando
‫este programa aqui.
‫Então, estou na parte de configuração deste guia aqui.
‫Então, agora, vá em frente e
‫instale o instalador para sua plataforma, seja
‫macOS, Windows ou Linux.
‫Ou, neste caso aqui, acho que só funciona para o Ubuntu.
‫Não, na verdade diz aqui que também
‫está disponível para outro Linux.
‫De qualquer forma, vá em frente e instale
‫a versão que você
‫precisa para o seu computador e, enquanto isso, enquanto
‫estiver instalando, vá em frente e crie uma nova conta.
‫Então, clique aqui em Cadastre-se
‫e abra sua conta gratuita no Heroku.
‫Então, mais uma conta que você precisa criar.
‫Portanto, existem muitas contas diferentes que
‫você precisa criar para concluir este projeto, mas
‫acho que é assim que o desenvolvimento moderno da web funciona.
‫De qualquer forma, depois de criar
‫sua conta, vamos dar uma olhada rápida aqui no
‫site do Heroku para ter uma visão geral do que é essa plataforma.
‫Então, Heroku é
‫a plataforma que torna muito, muito fácil e
‫descomplicado implantar seus aplicativos da web.
‫E, novamente, eles podem usar qualquer linguagem que
‫você possa imaginar.
‫Como você pode ver, NodeJS, Ruby on
‫Rails, este eu acho que é Go, ou
‫na verdade é Java, ou PHP, Python, este é Go, certo?
‫E assim, todos os tipos de aplicativos realmente rodam no Heroku.
‫Então, vamos ver o que eles dizem aqui.
‫E, isso é principalmente conversa de marketing, eu acho.
‫Então, nada muito interessante aqui.
‫Mas, é claro, você pode dar uma olhada
‫aqui em todos esses diferentes manuais.
‫E, na verdade, é grátis começar a usar o
‫Heroku em um aplicativo realmente básico.
‫Mas, é claro, assim que você começar a subir de
‫nível, terá que começar a pagar.
‫Mas, aqui, a versão gratuita, como
‫você pode ver, vem com todos os recursos básicos da plataforma.
‫Você pode até adicionar domínios personalizados.
‫Mas, o único problema com
‫isso é que o aplicativo irá basicamente hibernar,
‫então, basicamente, após 30
‫minutos sem ninguém acessando o aplicativo.
‫Mas, de qualquer forma, você
‫pode dar uma olhada em tudo isso sozinho.
‫Então, vamos agora realmente voltar ao nosso projeto aqui.
‫E, para iniciar o processo de implantação,
‫vamos começar fazendo login no Heroku em nossa linha de comando.
‫E isso vai funcionar por causa da instalação que acabamos
‫de fazer.
‫Tudo bem, vamos dar mais espaço aqui.
‫Limpe isso e agora escreva o login do heroku.
‫Portanto, se a instalação do Heroku foi bem-sucedida, ao
‫digitar o login do heroku, você deverá ver esta mensagem aqui,
‫pressione qualquer tecla para abrir o navegador.
‫Então, basta pressionar qualquer tecla, como está escrito, exceto
‫Q porque isso irá fechar o aplicativo.
‫E então, isso vai abrir uma janela para você onde você
‫pode fazer o login.
‫E, depois disso, como num passe de
‫mágica, você estará logado no Heroku em sua linha de comando.
‫Então, provavelmente deve demorar um pouco
‫e às vezes nem funciona na primeira tentativa.
‫Então, na verdade, isso aconteceu comigo antes.
‫E então, basta apertar o controle C.
‫E assim, em um Mac, isso realmente é o controle C, não o comando C.
‫E. Vamos tentar de novo.
‫Pressione qualquer tecla, volte para o navegador, faça login novamente.
‫Volte novamente e pronto.
‫Então, veja, agora estou logado com meu endereço de e-mail.
‫Então, novamente, esta não foi a primeira
‫vez que não funcionou para mim na primeira vez.
‫E então, se
‫isso aconteceu com você, faça exatamente como fiz aqui.
‫De qualquer forma, agora, com
‫isso, estamos logados no Heroku aqui em nosso
‫console e agora devemos ser capazes de criar um novo projeto.
‫Agora, antes de fazer isso, realmente precisamos mudar
‫algo em nosso pacote NPM. arquivo json.
‫Então, este aqui.
‫E isso é porque o
‫Heroku realmente usa nosso comando start aqui para iniciar nosso aplicativo.
‫Agora, na produção, não queremos usar o nodemon aqui.
‫Simplesmente queremos executar nosso
‫aplicativo usando o comando node e não nodemon
‫porque esse é realmente apenas para desenvolvimento.
‫Então, vamos mudar isso e duplicarei essa linha e então
‫chamaremos este de dev.
‫E então, o primeiro será apenas o nó.
‫Então, novamente, em seu pacote. json, você deve
‫sempre ter este script de início como este.
‫Portanto, o comando de nó e, em seguida, seu ponto de entrada.
‫Agora, também é importante para o
‫Heroku que você especifique esses motores aqui.
‫E então, nós fizemos isso antes,
‫eu acho, porque algum
‫pacote, ou na verdade porque ESLint exigia que funcionasse corretamente.
‫Mas, se não o tivéssemos
‫configurado naquela época, bem, então precisaríamos realmente configurá-lo neste ponto.
‫Agora, uma vez que
‫mudamos este arquivo, precisamos enviar essas mudanças para nosso
‫repositório, então vamos git add package. json aqui.
‫E então, git commit.
‫E então, com uma mensagem de confirmação útil.
‫Agora, outra coisa que é realmente
‫importante ao implantar um aplicativo no Heroku é ouvir a
‫porta no processo. env. PORTA.
‫Então, aqui mesmo no servidor, nós realmente fazemos isso aqui.
‫Portanto, especificamos a variável da porta como processo. env. PORTA.
‫E então, novamente, no Heroku, isso é absolutamente obrigatório porque,
‫do contrário, não funcionará de jeito nenhum.
‫Então, se aqui, por exemplo, nós
‫apenas especificássemos alguma porta aleatória, como 3000 aqui,
‫então isso realmente
‫não funcionaria e isso porque
‫nos bastidores, o Heroku irá realmente atribuir uma porta aleatória
‫para esta variável de ambiente.
‫Mas, um pouco mais sobre isso em
‫um segundo, porque agora, estamos
‫realmente prontos para fazer a implantação real.
‫E, para isso, criamos um novo projeto Heroku em
‫nossa pasta de projetos.
‫Portanto, certifique-se de que você realmente está em
‫sua pasta raiz e,
‫depois de ter certeza de que está lá e
‫logado no Heroku, o que fizemos antes, você pode escrever heroku create.
‫E isso criará um novo aplicativo basicamente com um
‫nome completamente aleatório.
‫Portanto, no meu caso, são radiant-springs e este
‫número, mas seu aplicativo
‫terá, é claro, um nome completamente diferente.
‫Agora, o que isso
‫fez foi realmente criar um novo branch
‫remoto em nosso repositório Git.
‫E, este ramo é chamado de heroku.
‫Então, lembre-se de como antes, em uma das palestras anteriores, adicionamos
‫um branch remoto apontando para o GitHub e esse
‫branch foi chamado de origem.
‫E então, nós enviamos nosso código para
‫aquele branch remoto usando git push origin master, assim.
‫Lembre-se disso?
‫E então, agora, como
‫mencionei, temos um novo ramo remoto aqui, que é chamado de heroku.
‫E então, realmente, o processo de implantação de nosso aplicativo
‫é tão simples quanto enviar nosso código para aquele branch remoto.
‫Então, git push heroku master.
‫E realmente precisa ser o branch master.
‫É o único ramo para o qual esta implantação funciona.
‫Mas, em nosso caso, como
‫você pode ver aqui, estamos na verdade em
‫nosso branch master e você também pode vê-lo aqui no canto do VS Code.
‫E então, isso não é problema.
‫Então, vamos agora executar este
‫comando, que deve demorar um pouco
‫porque, é claro, ele irá carregar todos os seus
‫arquivos que estão no repositório para o Heroku.
‫E agora, você vê todo esse processo acontecendo e, portanto, o
‫que isso
‫está fazendo é instalar todas as nossas dependências aqui
‫em nosso novo aplicativo.
‫Então, em nosso aplicativo que agora está no Heroku.
‫Então, vamos esperar até que isso seja
‫feito e te vejo de volta quando o processo terminar.
‫E então, está feito.
‫Então, espero que você tenha entendido a mensagem, Verificando implantação ... feito.
‫Então, você vê, iniciando, e isso realmente significa que
‫nosso aplicativo agora está implantado no
‫Heroku nesta URL.
‫Então, você vê o sucesso da construção.
‫E, sério, todas essas mensagens que
‫já falei antes.
‫E então, agora, para abrir nosso aplicativo,
‫tudo o que precisamos escrever é abrir o heroku.
‫Agora, não esperamos que isso funcione
‫ainda porque todas as nossas variáveis
‫de ambiente
‫não estão realmente definidas porque excluímos este arquivo de configuração aqui
‫de nosso repositório Git.
‫Mas, ainda assim,
‫apenas por diversão, vamos tentar abrir nosso aplicativo.
‫E então, de fato, isso abre nossa URL, neste
‫caso, em radiant-springs-85848. herokuapp. com.
‫Então, basicamente, é o subdomínio do Heroku.
‫E então, novamente, como
‫esperado, nós realmente encontramos alguns erros aqui.
‫E, mais uma vez, isso é porque nossas variáveis de
‫ambiente, neste ponto, ainda não estão definidas.
‫Agora, também podemos dar uma olhada nesses
‫erros nos logs do Heroku.
‫Então, deixe-me mostrar isso também.
‫Então, heroku registra --tail.
‫Então, aqui, você vê o estado alterado de armazenamento para travado, então
‫vamos ver o que temos aqui.
‫Na verdade, você vê a mensagem
‫de erro que criamos aqui.
‫Então, EXECEPÇÃO NÃO CAUSADA com este emoji e,
‫em seguida, desligando ...
‫E, você vê
‫aqui, não é possível ler a propriedade 'substituir' de indefinido.
‫E então, novamente, isso é porque as variáveis de
‫ambiente não são definidas neste ponto.
‫Então, vamos sair desses logs aqui, novamente, com o controle C.
‫E então, agora, vamos
‫definir essas variáveis de ambiente
‫para fazer nosso aplicativo funcionar.
‫E, a maneira
‫como fazemos isso é especificar cada variável de
‫ambiente usando um comando especial do Heroku.
‫Então, Heroku e outras plataformas de hospedagem, eles
‫não usam a. env arquivo como fizemos
‫aqui no desenvolvimento para todas as nossas variáveis de configuração.
‫Portanto, novamente, aqui em desenvolvimento, usamos esta configuração. env para colocar nossas
‫variáveis de ambiente.
‫Mas, aqui no Heroku, vamos defini-los de
‫uma forma diferente.
‫Mas, então, em nosso código, tudo
‫o que temos funciona exatamente da mesma.
‫Então, vamos começar com a
‫variável NODE_ENV que precisamos definir para produção.
‫E então, fazemos isso dizendo heroku config: set e então
‫o nome da variável, NODE_ENV = production.
‫E, na verdade, essa variável NODE_ENV
‫é configurada por padrão para produção pelo Heroku.
‫Mas, ainda assim, vamos ter 100% de certeza
‫de que realmente continuará assim,
‫mesmo que o Heroku mude alguma coisa.
‫Então, realmente, com certeza, ainda vamos fazer isso
‫porque, como sabemos, muito do nosso código depende dessa
‫variável e também pode fazer com
‫que os aplicativos do Node sejam executados até três vezes mais rápido.
‫Acho que conversamos sobre isso antes.
‫Portanto, a importância de definir NODE_ENV para produção.
‫Mas, de qualquer forma, é uma boa coisa fazer isso na verdade.
‫Então, basta clicar em Return e
‫ele definirá essa variável de ambiente e
‫reiniciará o aplicativo.
‫E então, agora, tudo o que
‫precisamos fazer é basicamente fazer
‫isso para todas as variáveis de ambiente relevantes.
‫Então, fizemos o NODE_ENV, agora, a porta, não vamos configurá-la
‫porque, como mencionei antes,
‫o Heroku irá, na verdade,
‫nos bastidores, atribuir uma porta aleatória ao nosso aplicativo.
‫E então, a seguir, vamos adicionar o banco de dados.
‫E, na verdade, vamos copiar tudo isso.
‫E então, basta colá-lo aqui.
‫E isso realmente não funcionou, então vamos
‫tentar fazer isso com algumas citações aqui, talvez.
‫Sim, parece muito melhor.
‫Em seguida, a senha do banco de dados.
‫Vamos esclarecer isso aqui.
‫A seguir, o segredo.
‫Então, assim.
‫E então, isso é um pouco chato de fazer para todos eles,
‫mas, bem, só temos que fazer uma
‫vez, então não é realmente um grande problema.
‫Agora, também precisamos deste aqui porque
‫tudo isso aqui é apenas para mailtrap
‫e na verdade não precisamos disso na produção
‫porque lembre-se que quando estamos em produção,
‫todos os nossos emails são enviados usando SENDGRID e
‫não mais usando mailtrap.
‫E assim, em nosso aplicativo
‫Heroku, não precisamos deles para variáveis.
‫Mas, precisamos do e-mail de.
‫Então, esse é o nosso próximo.
‫Então, precisamos SENDGRID_USERNAME, bem
‫como a senha.
‫E, finalmente, nossa chave de tarja secreta.
‫E, com isso, acho
‫que temos todas as nossas variáveis relevantes definidas aqui.
‫E então, vamos tentar novamente, heroku aberto.
‫E isso parece perfeito, lindo.
‫Então, realmente, nosso aplicativo agora está implantado em
‫molas radiantes ou o que quer que você tenha em seu caso
‫e tudo parece estar funcionando perfeitamente.
‫Então, todas as nossas imagens estão aqui.
‫Vamos dar uma olhada em uma única página aqui também.
‫E, de fato, tudo isso funciona perfeitamente.
‫Então, nosso mapa também aparece.
‫E, sim, parece funcionar muito bem.
‫E, o fato de tudo isso funcionar perfeitamente também mostra a
‫beleza de
‫ter um banco de dados hospedado o tempo
‫todo também durante o desenvolvimento,
‫porque não importa se estejamos em
‫desenvolvimento ou em produção, nosso banco de dados continua funcionando.
‫Portanto, se tivéssemos usado um banco
‫de dados local, agora teríamos que exportar todos
‫os dados desse banco de dados local, criar um banco de dados
‫hospedado e carregar todos os dados nesse banco de dados hospedado.
‫E então, isso, é claro, criaria uma etapa extra
‫e algum trabalho extra.
‫E, novamente, com isso, simplesmente funciona.
‫Então, essa é uma experiência muito boa para o desenvolvedor.
‫Então, vamos ver se também podemos fazer o login aqui,
‫o que deve, é claro, ser possível com
‫laura @ exemplo 2, 3, 4.
‫E, parece que sim.
‫Tão bonito.
‫Vamos ver se todas as nossas turnês de livros ainda estão
‫aqui, mas por que não estariam?
‫E, de fato, bem, na verdade é apenas um,
‫mas, de fato, está aqui.
‫Então, ótimo, isso é absolutamente fantástico.
‫E agora, vamos dar uma
‫rápida olhada em nosso painel do Heroku.
‫Então, aqui, vamos abrir o Heroku.
‫Feche esses dois.
‫E assim, como já efetuamos
‫login aqui anteriormente, isso deve nos levar automaticamente ao
‫painel e esse painel irá mostrar a você, por
‫padrão, todos os aplicativos que você implantou atualmente.
‫E então, o que acabamos de implantar
‫são essas fontes radiantes aqui.
‫Então, vamos abrir esse.
‫Então, aqui, do lado
‫direito, você pode ver toda a atividade.
‫Por exemplo, definir todas essas variáveis de configuração
‫que acabamos de fazer.
‫Você tem seus recursos e muitos deles só são interessantes se você
‫tiver um dinamômetro pago.
‫E, um dinamômetro é realmente apenas o termo
‫que o Heroku usa basicamente para um contêiner no qual
‫seu aplicativo é executado.
‫Então, temos algumas métricas onde podemos ver
‫quem está acessando o aplicativo, mas, mais uma vez, isso
‫só funciona se você tiver
‫um hobby ou um dinamômetro profissional.
‫Mas, o que realmente importa aqui são as
‫configurações e então aqui,
‫eu queria mostrar a vocês que podemos revelar as variáveis de configuração.
‫E assim, em vez de alterá-los ou
‫adicioná-los na linha de comando, também podemos fazer isso aqui mesmo.
‫Então, esses são todos eles que acabamos de adicionar na
‫linha de comando.
‫Então, outra coisa muito importante está aqui em More, podemos
‫realmente ver nossos logs.
‫Então, vamos esperar por isso aqui.
‫E então, o Heroku então dá a você todos esses registros, realmente
‫para tudo o que acontece em seu aplicativo.
‫Então, quando abrimos o aplicativo no navegador,
‫ele solicitou todos esses arquivos como vocês podem
‫ver aqui, por exemplo.
‫Então, realmente, tudo o que
‫está acontecendo estará bem aqui nesses logs.
‫E assim, se o seu aplicativo travar ou se algo acontecer e basicamente tudo
‫para o qual usamos um console. o log
‫acabará sendo mostrado aqui nesses logs.
‫E então, esses foram os registros do Heroku
‫que mencionei em uma das palestras anteriores.
‫Agora, uma coisa que podemos
‫fazer é realmente alterar o nome do nosso aplicativo.
‫Portanto, em vez de ser chamado de nome aleatório, podemos
‫dar a ele um nome mais significativo.
‫Agora, poderíamos fazer isso aqui,
‫mas isso iria bagunçar nosso aplicativo no terminal em
‫nosso computador local.
‫E então, em vez disso, o que fazemos
‫é mudar o nome diretamente aqui.
‫Então, digamos, aplicativos heroku: renomeie, assim, e então o
‫novo nome para o aplicativo.
‫E, vou chamá-lo de
‫natours, mas você, é claro, então
‫não será capaz de chamá-lo também de natours porque
‫esse subdomínio já estará ocupado.
‫Então, você pode chamá-lo de natours com seu nome
‫ou com seu nome de usuário ou qualquer outra palavra
‫que desejar.
‫Então, vou prosseguir e agora, realmente chamá-lo de natours.
‫Ah, mas vejo que alguém já tirou esse nome de mim,
‫isso é uma pena.
‫Mas, provavelmente é porque eu já usei o nome natours
‫em um projeto de outro curso.
‫E então, alguém deve ter pego.
‫Então, vamos chamá-lo de natoursapp e, claro, eu
‫preciso escrever todo o resto.
‫Então, apps heroku: renomear
‫e natoursapp.
‫Então, esperançosamente, ninguém pegou este.
‫E, parece que está fazendo
‫alguma coisa, mas alguém já pegou esse também.
‫Bem, isso é muito estranho.
‫Então, acho que tenho muitos alunos
‫por aí que postam seus aplicativos no Heroku, então
‫vou apenas seguir o exemplo que dei anteriormente e irei
‫adicionar meu nome aqui.
‫Então, terceira tentativa com natours-jonas.
‫Então, sim, vamos esperar que na terceira vez funcione.
‫Então, vamos esperar por isso aqui.
‫E é isso.
‫Então, vamos tentar abrir o heroku.
‫Tudo bem, e aqui vamos nós.
‫E, agora, neste ponto,
‫a versão antiga realmente não funcionará mais.
‫Então, este se foi, vamos fechá-lo.
‫Vamos voltar ao Pessoal aqui.
‫E então, sim, vamos lá.
‫Isso é natours-Jonas.
‫Ótimo, então nosso site está oficialmente em produção.
‫Agora, outra coisa que quero fazer
‫aqui é realmente atualizar a variável de ambiente
‫Postman para produção, lembra disso?
‫Então, vamos copiar isso aqui.
‫E também não o quão
‫automaticamente estamos em https aqui no Heroku.
‫Por isso, o Heroku faz todo o gerenciamento do
‫certificado SSL para nós nos bastidores para que nossa página esteja
‫sempre segura, sempre com https.
‫Então, esse é outro recurso muito bom do Heroku.
‫Então, agora, aqui no
‫Postman, vamos em frente e mudar essa produção e a URL.
‫Claro, este era apenas um espaço reservado.
‫E, em vez disso, o que queremos agora é nosso URL de produção real.
‫E não tenho certeza se está correto
‫assim, mas apenas atualize e compare com o de desenvolvimento.
‫Mas, de fato, é.
‫Então, precisa terminar com essa barra.
‫E então, aquele que acabamos de fazer também faz isso.
‫Então, vamos atualizar, fechar, e agora, tudo
‫o que precisamos fazer aqui é mudar do ambiente
‫de desenvolvimento para o ambiente natours de produção.
‫E então, agora, se, por exemplo, eu tentar obter Get All
‫Tours, que na verdade é o que
‫tínhamos aberto, vamos ver se funciona.
‫Vamos desligar tudo isso.
‫E, de fato, é, ótimo.
‫Vamos ver se podemos
‫realmente ver o URL completo em algum lugar aqui.
‫Bem, isso realmente não mostra.
‫Mas, de qualquer forma, isso
‫realmente não importa porque ainda sabemos que realmente funcionou.
‫Portanto, agora realmente recuperamos esses dados
‫de nossa API de produção e podemos facilmente provar isso porque
‫a versão de desenvolvimento nem mesmo está
‫em execução no momento.
‫Portanto, se enviarmos isso, obteremos esse erro.
‫Então, mais uma vez, realmente,
‫parabéns por quase terminar o projeto neste momento.
‫Já está no servidor live
‫e você pode, neste momento, compartilhar seu
‫projeto com o mundo e mostrar a todos o que
‫você conquistou após todo esse trabalho de construção deste projeto.
‫Só mais uma pequena coisa que eu queria
‫fazer aqui, como disse na última aula, é testar essa compressão.
‫Então, vamos procurar a compressão gzip de teste aqui.
‫E então, esse deve ser o primeiro resultado aqui,
‫Gift of Speed.
‫E assim, se inserirmos nosso URL aqui e depois verificarmos, vamos ver.
‫E, vemos GZIP está habilitado.
‫E então, isso é por causa daquele pacote de
‫compressão que usamos na última palestra.
‫Então, originalmente, nossa página teria 14K, mas
‫depois compactada, é 2K.
‫E, claro, isso não faz uma grande
‫diferença neste caso, mas para uma página muito maior, é claro,
‫pode realmente fazer a diferença para seus usuários.
‫Perfeito, agora, nos próximos vídeos, há apenas
‫algumas pequenas coisas
‫que ainda precisamos corrigir aqui.
‫E assim, faremos
‫isso nas próximas duas ou três palestras.
‫E então é
‫quando o projeto está realmente 100% concluído.