Video není dostupné.
Omlouváme se.

COMO CONFIGURAR O DOCKER PARA FRONTEND | Angular + Nginx

Sdílet
Vložit
  • čas přidán 27. 04. 2024
  • ⭐ Seja um membro do canal e tenha acesso à lives, vídeos e conteúdos exclusivos!
    / @kipperdev
    Nesse vídeo eu vou te mostrar como configurar o Docker criando seu dockerfile para hospedar seus sites Angular usando a abordagem de SPAs e sites estáticos com Nginx. Esse Dockerfile podem ser facilmente adaptados para outras abordagens de sites estáticos, como por exemplo, os gerados usando Next js e Nuxt js.
    🎁 APRENDA SOBRE DEVOPS NA TRILHA DA ROCKETSEAT (10% OFF)
    tr.ee/kipperde...
    🔗 Link do arquivo Mime.types
    github.com/Fer...
    🔗 Repositório do projeto
    github.com/Fer...
    👉 Aprenda inglês com 47% OFF
    tr.ee/kipperde...
    👉 Me siga no instagram!
    / kipper.dev
    🌎 Comunidade do Discord
    / discord

Komentáře • 57

  • @kipperdev
    @kipperdev  Před 3 měsíci +8

    ATENÇÃO!
    Acabei não mostrando como HABILITAR o SSG no Angular, então vou deixar o link aqui para quem quiser buildar e servir sua aplicação usando a técnica de SSG
    angular.io/guide/prerendering

  • @med.brunofreire
    @med.brunofreire Před 3 měsíci +6

    Fernanda, seria bem legal ensinar como fazer o CI/CD com GithubActions para a instancia do Docker sem ter que fazer o rebuild a cada mudança no código do projeto, por exemplo, ao fazer mudanças no app/src, como fazer o deploy do novo código sem ter que fazer o rebuild da imagem, mas somente fazer com que a instancia do docker no VPS puxe o novo código e execute sem fazer o servidor ter que reiniciar...

  • @FelipeOliveir4
    @FelipeOliveir4 Před 3 měsíci +13

    Esse canal tem mais conteúdos do que eu consigo consumir, muito bom, logo teremos uma nova Loiane Groner :D

    • @kipperdev
      @kipperdev  Před 3 měsíci +1

      Ahahahahah valeu Lipe, tmjj! 💜

  • @CRISTOVIVE_EM_MIM
    @CRISTOVIVE_EM_MIM Před 3 měsíci +4

    Encontrei esse canal, e é a primeira pessoa que não tem medo de ensinar, e não fica enrolando com papinhos. Estou amando seu conteúdo @kipperdev

    • @kipperdev
      @kipperdev  Před 3 měsíci

      Que bomm 💜
      Fico muito feliz em saber que você tem gostado

  • @eduardodefati4892
    @eduardodefati4892 Před 18 dny

    Tu é a melhor mesmo. Parabéns. Me ajudou muito!

  • @gabrielguimaraes7925
    @gabrielguimaraes7925 Před 3 měsíci +1

    Fe, vc é melhor canal de dev atualmente, sem blablabla da bolha tech . Obrigado

    • @kipperdev
      @kipperdev  Před 3 měsíci

      muito obrigadaa, Gab 💜💜

  • @eduardoorlandimelle9229
    @eduardoorlandimelle9229 Před 3 měsíci +1

    Vídeo excelente!
    Muito obrigado por compartilhar o conhecimento! 🙂

    • @kipperdev
      @kipperdev  Před 3 měsíci

      Muito obrigadoo, Edu 💜

  • @RodrigoSouza-vb4iq
    @RodrigoSouza-vb4iq Před 2 měsíci

    Obrigado! Deu certo aqui! Estava precisando dessa aula! Explicação top!! :D Ganhou o inscrito no canal!

  • @arozendojr
    @arozendojr Před 3 měsíci +2

    Gostei das duas abordagens, só conhecia uma

  • @wever5593
    @wever5593 Před 3 měsíci +3

    Kipper, beleza?!
    A abordagem para Produção com a sua experiência do dia a dia, é sempre realizar o Deploy com o NGINX (ou outro do gênero), e o servidores Angular, Vue e etc só para desenvolver?
    Eu entendi que também é possível deixar rodando diretamente com esses servidores, é só para entender como funciona a tomada de decisão em um cenário real...

    • @kipperdev
      @kipperdev  Před 3 měsíci +5

      Oii, tudo bem? Ótima pergunta!
      Isso depende muito da necessidade de cada empresa. Tem alguns casos em que a aplicação precisa controlar um pouco mais a requisição para rotear ela entre diferentes aplicações, nesse caso a abordagem com nginx é preferível.
      Já se você quer subir um backend em node, Que não precisa de geração estática, por exemplo, talvez um nginx seja um over engineering e apenas a aplicação node bastasse.
      Mas, como sempre na computação, a resposta é depende hahaha

  • @AltoDeData
    @AltoDeData Před 3 měsíci +1

    Muito bom
    Explicação muito boa

  • @shift564
    @shift564 Před 23 dny

    atualmente qual melhor framework css para se trabalhar com angular, um que sejá fácil de configurar, bom para escala e que ganhe tempo para estilos mais complexos? Em suma se hoje você fosse montar um "setup" para criação de design system com angular (estilização, CD/CI, testes, animações, componentes), quais tecnologias vc escolheria? (EX: Prime NG)

  • @Gu-yu5wu
    @Gu-yu5wu Před 2 měsíci

    Muito obrigado, me ajudou muito.

  • @arissonlimafreire
    @arissonlimafreire Před 3 měsíci

    Muito bom o vídeo, parabéns

  • @camilaqueirozdev
    @camilaqueirozdev Před 3 měsíci

    Muito show, didática top

  • @XINTSUAI
    @XINTSUAI Před 3 měsíci

    Faz um video depois subindo um app Angular 17 SSR usando App Engine e Firestore do Google rs...

  • @arozendojr
    @arozendojr Před 3 měsíci

    Olhando seus links do instagram, HyperX Duocast - USB é o que você usa hoje ?

  • @arissonlimafreire
    @arissonlimafreire Před 3 měsíci

    Faz um vídeo desse ensinando a dockerizar uma aplicação com React

  • @gabrielrochasantana
    @gabrielrochasantana Před 3 měsíci

    Muito legal o conteúdo, parabéns.
    Dá para rodar essa aplicação com o docker instalado no wsl2 do windows?

  • @Jhoonnn
    @Jhoonnn Před 3 měsíci

    valeuuu pelas dicas Fer, mais um vídeo de alta qualidade

    • @kipperdev
      @kipperdev  Před 3 měsíci +1

      Valeuu John! Que bom q gostou do videooo 💜

  • @luisdomiciano
    @luisdomiciano Před 3 měsíci

    Muito bom

  • @gabrielguimaraes7925
    @gabrielguimaraes7925 Před 2 měsíci

    Fe,conforme eu vou alterando e criando novos arquivos localmente, é para nginx perceber isso e atualizar meu contêiner automaticamente, por enquanto que contêiner está rodando ? Ou sempre que tiver alterações eu tenho que dar down na img atual e buildar novamente ?

  • @arozendojr
    @arozendojr Před 3 měsíci

    Em micro serviço backend usamos Endpoint Health Checks, para fronte existe algo semelhante ?

  • @WesleyNascimento-fo3rf
    @WesleyNascimento-fo3rf Před 3 měsíci

    Faz de NextJS

  • @Fernando-vb1wt
    @Fernando-vb1wt Před 3 měsíci

    FALA FERNANDA, SOU SEU CHARÁ E TBM DESENVOLVEDOR WEB RS FUI TENTAR USAR O MÓDULO DE FILTRO NGX FILTER PIPE NO ANGULAR 17 MAS NA HORA DE IMPORTAR ELE DIZ Q NÃO PODE IMPORTAR COMPONENTE SEM SER STANDALONE... VC USA OUTRO FILTRO P ANGULAR 17 OU TEM ALGUMA MANEIRA DE CONTORNAR ISSO?? DESDE JÁ, OBRIGADO

  • @maicon.wagner
    @maicon.wagner Před 2 měsíci +2

    Qual é o intuito de criar isso? Sendo que o angular já tem seu próprio cli para subir um servidor e até mesmo gerar os arquivos estáticos?

    • @koba1-671
      @koba1-671 Před 2 měsíci

      Tenho a mesma dúvida

  • @kennyroger22
    @kennyroger22 Před 3 měsíci

    Será que possível você fazer com VUE ou NUXT..
    Sucesso aí 👊🏽

    • @andersonsmont
      @andersonsmont Před 3 měsíci

      Sim, dockerfile é feito de sequência de "determinações" ou vamos dizer ações.
      Imagine você indo se preparar para executar um serviço em Vue, você define isso no Dockerfile.
      Então a maneira que você imaginar faça.

  • @familiamarquesdamasceno6974

    E o hot reload? Funciona?

    • @romuloaps
      @romuloaps Před 17 dny

      Queria saber também. Tô na dúvida de pq usaria dessa forma em desenvolvimento

  • @user-fz3vk2og4s
    @user-fz3vk2og4s Před 3 měsíci

    Fernanda ci vogliono i sottotitoli per favore

  • @bruno-dev
    @bruno-dev Před 3 měsíci

    Pow faz como dockerizar o nextJs

    • @FelipeOliveir4
      @FelipeOliveir4 Před 3 měsíci

      Mano, uma dica, você tem que começar a expandir a mente e pensar fora da caixa, pegue esse conteúdo e faça você um video portado pro NextJS. Eu já usei vídeos de Angular para me ajudar com .NET porque falava do mesmo conceito de orientação a objetos.

    • @enriquesantosdeoliveira5798
      @enriquesantosdeoliveira5798 Před 3 měsíci

      Tem na documentação do next 😅

  • @GuiZeroUm
    @GuiZeroUm Před 3 měsíci +1

    Faz mais vídeos sobre React pls

    • @FelipeOliveir4
      @FelipeOliveir4 Před 3 měsíci

      Já tem muito conteúdo de React na internet, se você quer ser contratado no momento atual estude Angular.

    • @GuiZeroUm
      @GuiZeroUm Před 3 měsíci +1

      @@FelipeOliveir4 Não consegui pegar gosto por angular

    • @FelipeOliveir4
      @FelipeOliveir4 Před 3 měsíci

      @@GuiZeroUm Eu trabalho com React mas não gosto muito não, muito desorganizado, não tem padrão, para iniciante isso é horrível. O React é bom pro dev experiente que quer implementar seu próprio padrão ao meu ver ou para projetos que requerem ajustes finos.

    • @FelipeOliveir4
      @FelipeOliveir4 Před 3 měsíci

      @@GuiZeroUm É igual Java, falam mal, mas é o que tem vaga 🤷🏾‍♂️

    • @GuiZeroUm
      @GuiZeroUm Před 3 měsíci

      @@FelipeOliveir4 vou tentar aprender angular, e que eu acho muito mais interessante react, principalmente agora que ele tá caminhando para ser uma linguagem voltado ao full stack. Gosto por exemplo de utilizar tailwind, que pra mim casa perfeitamente com o react

  • @samuel_coder
    @samuel_coder Před 3 měsíci

    enginéx

  • @elivanmaia2082
    @elivanmaia2082 Před 3 měsíci

    Alguém aqui é bom em frontend para me dar uma força em um trabalho da escola?

    • @kipperdev
      @kipperdev  Před 3 měsíci

      Oii, Eli! Lá no Discord da comunidade (o link tá na descrição) o pessoal sempre ajuda com dúvidas e sugestões. Te convido a participar!

  • @FelipeOliveir4
    @FelipeOliveir4 Před 3 měsíci +2

    A galera só quer saber de React, essa galera sabe que no momento atual é melhor estudar Angular? Que é justamente o que as grandes empresas usam? Que lá fora um dev front não se limita a 1 ou 2 frameworks? Vejo muito colega meu do layoff reclamando da vida, mas correr atrás que é bom nada.

    • @kipperdev
      @kipperdev  Před 3 měsíci +1

      É isso aí! A linguagem/framework tem que ser uma ferramenta que usamos, não o fim do nosso aprendizado