‫-: Estamos quase prontos para implantar nosso aplicativo agora.
‫Mas antes
‫de fazermos isso, há algumas
‫coisas que devemos cuidar.
‫E então vamos fazer isso agora.
‫E a primeira coisa que
‫quero fazer é
‫instalar um pacote que comprimirá todas as nossas respostas.
‫Então, basicamente, sempre que enviamos uma resposta de texto a um
‫cliente, não importa se é código JSON ou HTML.
‫Com o pacote
‫de compactação, esse texto será dramaticamente compactado.
‫Tudo bem, então vamos instalar aqui.
‫Instalação por Npm e, simplesmente, compressão.
‫Tudo bem.
‫Então, vamos incluir isso aqui.
‫Agora, isso irá expor uma função da
‫camada do meio muito
‫simples que simplesmente temos que conectar
‫em nossa pilha da camada do meio.
‫Então, vamos fazer isso em algum lugar aqui.
‫Perto do fim, realmente não importa.
‫Então, app. usar,
‫digite lá compressão de chamadas.
‫Portanto, isso aqui retornará uma função do meio
‫à esquerda que irá compactar
‫novamente todo o texto enviado aos clientes.
‫Portanto, não funcionará com
‫imagens porque geralmente já estão compactadas.
‫Por exemplo, um formato JPEG já está compactado.
‫Portanto, isso só funcionará para texto.
‫Assim, quando nosso site estiver
‫realmente implantado, testaremos se essa compressão está realmente ativa.
‫De qualquer forma, a próxima etapa antes de implantar nosso aplicativo é
‫livrar-se da maior parte do console. logs que ainda temos
‫em nosso código.
‫E isso é porque esses logins acabarão nos logs
‫da nossa plataforma de hospedagem.
‫E, portanto, não queremos poluir essas toras na produção.
‫OK.
‫Então, vamos pesquisar rapidamente aqui por console.
‫E como você pode ver, existem muitos deles.
‫Então este já está comentado.
‫Portanto, não vou trabalhar nisso.
‫Mas este aqui, vamos realmente nos livrar dele.
‫E agora, um
‫por um, vamos dar uma olhada
‫em todos eles e os
‫que não são relevantes vamos simplesmente comentá-los.
‫Tudo bem.
‫Aqui no controlador de erro também temos uma tonelada deles, mas
‫alguns são realmente relevantes.
‫Agora, não este.
‫Vamos nos livrar completamente disso.
‫Também não
‫este, mas aqui temos esses
‫três que criamos propositalmente
‫para que acabem nos logs da plataforma de hospedagem.
‫OK.
‫Portanto, lembre-se de que o configuramos de
‫forma que, quando houver um erro no site de
‫renderização, obtenhamos um log
‫do erro que realmente aconteceu.
‫Junto com este emoji aqui.
‫E cada vez que
‫vemos isso, podemos identificar facilmente em nossos
‫logs que algo de ruim aconteceu do nosso lado.
‫Ok, temos mais alguns aqui.
‫Por exemplo, para outros erros desconhecidos em que
‫não queremos vazar os detalhes do erro para o cliente.
‫E então esses são bons para mantê-los.
‫Este também queremos manter para
‫nos informar nos logs que a
‫conexão com o banco de dados foi bem-sucedida.
‫Esses aqui também.
‫Este aqui está na verdade no import-dev-data, então eles
‫não são importantes.
‫Enfim, todos os logs aqui, vamos mantê-los.
‫Então aqui, nós temos este aqui,
‫que realmente só tínhamos para usar esta camada do meio.
‫Então, vamos desligar essa camada do meio.
‫O que, mais uma vez,
‫só usamos para testar a camada intermediária deste post.
‫Em seguida, no modelo do usuário.
‫Bem, este também não queremos.
‫Isso foi apenas mais uma vez para fins de teste.
‫Então temos o pacote JSON,
‫então eles nem chegam aos logs.
‫Então temos que
‫agrupar onde não vamos mudar nada.
‫Então temos o índice. js.
‫Então esse é o nosso JavaScript do lado do cliente.
‫Então, vamos nos livrar deste console. registre-se aqui.
‫Então também temos mais alguns aqui no logout,
‫mas este vamos mantê-lo.
‫Um pouco mais em faixa.
‫E não estamos interessados aqui na sessão.
‫Mas este aqui quando há um erro
‫está realmente bom.
‫E então no servidor. js, temos
‫esses aqui, que
‫na verdade, novamente, fizemos de propósito.
‫Para que eles realmente acabem aparecendo em nossos arquivos de log.
‫E não se preocupe se você realmente não sabe
‫o que quero dizer com arquivos de log.
‫Você verá quando
‫colocarmos nosso aplicativo no Heroku.
‫Vou mostrar os arquivos de log até então, tudo bem.
‫Enfim, todos esses console. os logs aqui são
‫de propósito.
‫E também este aqui
‫sobre a conexão de banco de dados bem-sucedida.
‫Este aqui
‫também nos informa a porta onde o app está rodando.
‫E este e este também são importantes.
‫Tudo bem.
‫E assim cuidamos de todo o
‫console desnecessário. logs que estamos
‫apenas poluindo nossas saídas de log.
‫Ok, então vamos fechar todos esses arquivos aqui.
‫Tudo bem.
‫E agora, na
‫próxima etapa, vamos alterar URLs ou códigos de
‫API no lado do cliente, JavaScript.
‫Então, por exemplo, aqui no login. js, agora
‫fazemos os códigos de API
‫para esta API de desenvolvimento.
‫Então aqui, é claro, temos nosso URL de desenvolvimento.
‫E
‫assim, não vai funcionar na
‫produção porque obviamente a partir
‫daí, não seremos capazes de acessar nenhuma URL de desenvolvimento.
‫E o mesmo aqui.
‫Mas, felizmente, existe uma solução muito simples.
‫Portanto, tudo o que precisamos fazer é realmente nos livrar dessa parte.
‫Então, se nós apenas deletarmos
‫assim, vamos acabar com este URL relativo.
‫E como a API
‫e o site estão hospedados
‫no mesmo servidor, isso funcionará perfeitamente.
‫Então, fazer dessa forma é
‫um pouco como especificar o caminho para as imagens no HTML.
‫Por exemplo, aqui na página de visão geral,
‫onde temos essas
‫imagens, simplesmente dizemos "/ img" e
‫isso irá para a URL
‫atual e, em seguida, adicionaremos esse caminho a ela.
‫OK.
‫E então a mesma coisa vai acontecer aqui.
‫OK.
‫Mais uma vez, isso só funciona porque a API e o
‫site estão basicamente usando o mesmo URL.
‫Portanto, estamos hospedando-os no mesmo lugar.
‫Mas se você estivesse hospedando
‫seu site ou front end em
‫um URL e, em seguida, sua API
‫em outro URL, então não funcionaria assim, ok.
‫Mas, neste aplicativo simples, podemos simplesmente fazer assim porque
‫temos uma configuração muito simples.
‫Então vamos deletar aqui no login.
‫No índice, acredito que não temos URLs.
‫Sim, está certo.
‫Também não nos alertas.
‫Não no Mapbox, eu acredito.
‫Não.
‫Mas certamente em listra.
‫Então, para começar nossa sessão.
‫Portanto, podemos fazer exatamente a mesma coisa aqui.
‫E também no updateSettings.
‫OK.
‫Dê uma chance.
‫E todos eles.
‫E então esse também é consertado.
‫E agora, finalmente, e continuando a trabalhar no JavaScript
‫do lado do
‫cliente, precisamos criar nosso pacote final.
‫Tudo bem.
‫Portanto, neste momento, este é o nosso pacote de arquivo JavaScript.
‫Mas lembre-se de que isso foi criado
‫usando a função de relógio.
‫Então, em nosso pacote. json
‫temos este relógio. script js que irá apenas
‫criar um novo pacote sempre que mudarmos um dos arquivos.
‫Mas sem nenhuma
‫compressão ou sem nenhuma otimização de desempenho.
‫Mas agora que realmente terminamos com todo o nosso
‫JavaScript, estamos prontos para realmente construir nosso JavaScript
‫em um pacote final.
‫E aqui devemos substituir este relógio por build,
‫e assim
‫criaremos nosso pacote JavaScript compactado final.
‫Tudo bem.
‫Então, vamos tentar isso aqui agora.
‫Com o npm run.
‫E mais uma vez com guia para autocompletar.
‫Então vamos ver se ...
‫E está feito.
‫E então vamos dar uma olhada em nosso pacote agora.
‫E para ver isso agora, é realmente
‫bem compactado.
‫Tudo bem.
‫Agora você também vê que temos muitos desses novos arquivos aqui e
‫isso é porque você está em nossa árvore de arquivos.
‫O Parcel realmente cria essa pasta de cache.
‫Mas não queremos essa pasta em nosso depósito git.
‫Direito.
‫Então, vamos adicionar isso aqui.
‫E
‫agora você vê que, automaticamente,
‫assim que o salvarmos, ele
‫voltará aos arquivos originais que foram atualizados.
‫OK.
‫Então, mais uma vez, o VS Code
‫é realmente inteligente sobre tudo relacionado ao git.
‫Tudo bem.
‫OK.
‫E eu acho que é realmente isso.
‫Portanto, nosso aplicativo agora está preparado para ser realmente implantado.
‫E agora a última etapa é
‫realmente comprometer todos esses arquivos modificados em nosso repositório.
‫Portanto, lembre-se de que a primeira etapa é adicionar todos os arquivos
‫à área de teste.
‫Então git add, e neste caso, todos os arquivos.
‫Tudo bem.
‫E agora tudo o que precisamos fazer
‫é git commit, então
‫a mensagem, e digamos, "Aplicativo preparado para implantação".
‫Excelente!
‫Então você vê que todas as nossas modificações desapareceram.
‫Também daqui.
‫O que significa que o ramo de trabalho
‫atual é denominado limpo.
‫E então sim, agora estamos prontos para implantar nosso aplicativo
‫no próximo vídeo.