Terminei o curso de Angular, mas surgiu logo depois uma dúvida. Como upar a aplicação para um servidor e colocá-la em produção?
Eu fiz a build do prod e copiei o conteúdo da pasta dist para o diretório do servidor como orientado no curso, mas na hora de visualizar o index.html a página aparece em branco. Fiz o teste no XAMPP e também no GitHub.
Fala ai Mauricio, tudo bem? Isso pode ser feito de N maneiras, depende muito para onde e qual stack você esta utilizando.
Mas, falando sobre aplicações web e SPA, dá uma olhada nesse video: https://www.youtube.com/watch?v=inpo5xyXQNk
O exemplo é com React mas a ideia é a mesma para todas as SPAs.
Espero ter ajudado.
Executei o comando npm run build e exportei o alurapic que está na pasta dist para o diretório do servidor apache e ao executar o endereço nada. Página em branco. Não encontrei um diretório buildcomo do vídeo, mas aí acho que é para react, né?
Fala Mauricio, o comando build dá tudo certo? Qual o conteudo da pasta? Se você abrir o console do navegador tem algum erro sendo logado?
Abraços
O comando builddá certo (não apresenta erros).
O conteúdo da pasta está nesta imagem:
https://drive.google.com/file/d/1MTLLQF9HQKkt_EAy_sUt5EMJnNrf5pxd/view?usp=sharing
Abrindo o alurapic no navegador ele apresenta uma série de erros do tipo:
Failed to load resource: the server responded with a status of 404 (Not Found)
para os arquivos javascript importados na página.
Fala ai Mauricio, tudo bem? Parece que está dando erro para carregar os assets da aplicação, no caso, os arquivos JavaScript, CSS, etc...
Por isso a página fica em branco.
Uma solução seria você verificar e setar o public path na hora de buildar o projeto em Angular, isso pode ser feito com o parâmetro --baseHref ou --deployUrl (uma delas talvez resolva o problema do 404).
Espero ter ajudado.
Como eu seto o public path?
Tentei os comandos: npm run build --baseHref e npm run build --deplyUrl e nenhum deles resolveu o problema.
Fala Mauricio, você precisa passar valor para os parâmetros.
npm run build --baseHref=DOMINIOEspero ter ajudado.
Tentei todos os seguintes comandos:
npm run build --baseHref=localhost/alurapic
npm run build --baseHref=localhost/alurapic/
npm run build --baseHref=http://localhost/alurapic
npm run build --baseHref=http://localhost/alurapic/
npm run build --deployUrl=localhost/alurapic
npm run build --deployUrl=localhost/alurapic/
npm run build --deployUrl=http://localhost/alurapic
npm run build --deployUrl=http://localhost/alurapic/
Nenhum deles funcionou.
Note que estou tentando executá-lo em um servidor local, por isso obviamente o localhost.
Qual é o próximo passo?
Fala Mauricio, passa seu projeto pra mim, vou buildar ele aqui e tentar subir na Netlify para simular o problema.
Pode compartilhar através do Github ou Google Drive (zipado).
Fico no aguardo
Conforme solicitado segue o alurapic sem a api e o log-server:
https://drive.google.com/file/d/1R-oFrpoZVdfbp4VGXy_UqDivdBh2GvAY/view?usp=sharing
Fala ai Mauricio, tudo bem? Fiz o deploy aqui para o Netlify do projeto, basicamente os passos foram:
node_modulesnpm cinpm run build.dist/alurapic e arrastei para o NetlifyDeu tudo certo, a aplicação foi renderizada e carregada.
Espero ter ajudado.
Acessando a URL deu página não encontrada 404
Fala Mauricio, desculpa, eu compartilhei a URL com rota, acessa essa:
https://unruffled-goldwasser-224cd3.netlify.app/
Para funcionar com o /home tem que criar o _redirect do Netlify, mas, como é só teste não vale a pena.
Espero ter ajudado.
Está dando erro na hora de preencher o campo username na página de registro que inviabiliza usar a aplicação.
Fala Mauricio, o erro é porque não implemento ou subi o servidor.
A ideia era apenas mostrar como subir o front, dessa forma, o servidor a gente precisa subir em um cloud e torná-lo disponível para a aplicação acessar.
A gente tem cursos aqui na Alura de como fazer isso na parte de Infraestrutura.
Abraços.
Como instalo as dependências com npm ci? Exemplifique.
Se eu fizer o mesmo procedimento que vc fez, ele deve rodar também como página do github, não?
Fala Mauricio, o npm ci ja vai fazer as instalações, você vai na pasta do projeto e roda ele na raiz.
Ele é bem parecido com o npm i, só muda que vai limpar o node_modules antes de instalar novas dependências e tem um match entre package.json e package-lock.json melhor.
Se eu fizer o mesmo procedimento que vc fez, ele deve rodar também como página do github, não?
Muito provavelmente sim, tanto o Netlify quanto o GH Pages são hosts de arquivos estáticos.
Lembrando que a pasta à ser publica é dist/alurapic e não a dist, pois, os arquivos buildados ficam dentro da dist/alurapic.
Espero ter ajudado.
Sobre o servidor em cloud, qual curso da Alura vc recomenda para aprender especificamente essa etapa?
Fala Mauricio, acho que tu pode dar uma olhada nesse aqui para subir a API no cloud: https://cursos.alura.com.br/course/amazon-lightsail
Ai, você pega a URL de produção da API que vai ser gerada no curso e adiciona no env de prod do seu projeto.
Se quiser, tem esse de DNS: https://cursos.alura.com.br/course/dns-resolucao-nomes-internet
Espero ter ajudado.
npm cinpm run build.dist/alurapic e arrastei para o htdocs do servidor XAMPPNão funcionou. O que houve?
Fala ai Mauricio, ai precisa ver como está configurado o XAMPP e qual erro está dando, essas configurações variam muito de servidor para servidor.
No caso da Netlify, eles utilizam outro servidor que não é o XAMPP, além dele tem NGINX e vários outros, onde, cada um precisa de suas configurações para funcionarem.
Espero ter ajudado.
Meu XAMPP tá configurado corretamente, todos os outros sites funcionam normalmente, só o alurapic que não. O erro que está dando é o mesmo de antes. O que eu faço?
Erro:
Failed to load resource: the server responded with a status of 404 (Not Found)
Fala Mauricio, parece que a aplicação Angular não está conseguindo carregar os arquivos estáticos.
Tente pegar a URL que ele está tentando baixar e acessá-la direto no navegador, também verifique a pasta e endereço da URL.
Como eu falei, as vezes pode ser necessário configurar qual seria a pasta pública no que teria os estáticos (como é feito com Express por exemplo).
Espero ter ajudado.
Não entendi nada da explicação.
Eu já estou acessando a URL no navegador. Estou usando localhost/alurapic. Lembrando novamente que apenas a aplicação não está funcionando nesse servidor Apache; os outros sites funcionam normalmente.
Estou no aguardo. Novidades?
Fala Mauricio, tudo bem? Faz o seguinte, ao abrir a aplicação, abre o console do navegador e me manda os erros que irão apresentar no mesmo.
Se possível, abre a aplicação, abre o console e dá um F5.
Ai as requisições serão feitas novamente, o erro provavelmente é por questões e detalhes de configuração no Apache.
Vamos ter que ir procurando e investigando o erro aos poucos, passo à passo.
Espero ter ajudado.
Dando F5 o erro muda um pouco. Segue a imagem do mesmo para conferir:
https://drive.google.com/file/d/1PdsaI975aaz6N79SsA96Dpu_ZaQWElyS/view?usp=sharing
Fala Mauricio, realmente, repare que a URL da qual a aplicação tentou baixar os arquivos foi:
http://localhost/runtime.jsMas, na verdade para funcionar, pelo que eu entendi da sua configuração do XAMPP deveria ser:
http://localhost/alurapic/runtime.jsPara resolver o problema, você pode tentar utilizar o base href, ou, na hora de rodar o ng build passar aquelas parâmetros que eu te informei: --baseHref e --deployUrl.
Testando aqui com seu projeto, tente fazer o build assim:
ng build --base-href=/alurapicE atualize a pasta no XAMPP.
Espero ter ajudado.
Com o comando que vc passou não funcionou. Mas eu consegui com o comando:
ng build --deploy-url=/alurapic/
Sem o "/" no final, ele não funciona.
Só que não funcionou 100%. Ao digitar localhost/alurapic no navegador ele cai em localhost/not-found. O not-found da aplicação e quando vc bota para logar ele não carrega a imagem da home do lado esquerdo (link quebrado). Ele está mostrando o endereço da home como se fosse localhost/home.
Como resolver?
E aí? Novidades?
Fala Mauricio, seu problema parece ser algo bem específico de configurações locais com XAMPP e Angular.
As dicas que te passei eu testei todas aqui e funcionaram tranquilamente, mas, aqui são outras configurações e outros servidores.
Basicamente você precisa definir o base-href que seria o nome da pasta criada dentro do htdocs do XAMPP.
Dessa forma na hora de gerar o build o Webpack vai levar em consideração esse prefixo para definir as URLs de download dos assets.
Abraços.