Bem-vindo à Master Class #015: Docker do Zero para React + Node.js! Neste tutorial, vamos aprender como usar o Docker para empacotar e implantar uma aplicação web completa desenvolvida com React e Node.js. O Docker é uma ferramenta poderosa que facilita a criação, distribuição e execução de aplicativos em contêineres, isolando-os do ambiente host e garantindo que eles funcionem de forma consistente em diferentes ambientes.
Antes de começar, certifique-se de ter o Docker instalado em sua máquina. Você pode baixar o Docker em https://www.docker.com/get-started. Além disso, é útil ter uma familiaridade básica com React e Node.js antes de prosseguir com este tutorial.
Passo 1: Configurando o ambiente de desenvolvimento
Antes de começarmos a trabalhar com o Docker, vamos configurar o ambiente de desenvolvimento para nossa aplicação. Crie uma nova pasta para o projeto e navegue até ela no terminal. Dentro da pasta, crie duas subpastas: uma para o frontend (React) e outra para o backend (Node.js).
Passo 2: Configurando o frontend (React)
Navegue até a pasta do frontend e crie um novo projeto React com o seguinte comando:
npx create-react-app my-react-app
Isso criará um novo projeto React chamado "my-react-app". Dentro da pasta do projeto, você encontrará uma estrutura de arquivos padrão para um projeto React.
Passo 3: Configurando o backend (Node.js)
Navegue até a pasta do backend e crie um novo projeto Node.js com o seguinte comando:
npm init -y
Isso criará um novo arquivo "package.json" com as configurações padrão para um projeto Node.js. Agora, instale as dependências necessárias para o projeto, como o Express (um framework Node.js) com o seguinte comando:
npm install express
Em seguida, crie um arquivo de script para o servidor Node.js, como "server.js", e escreva um código básico para o servidor.
Passo 4: Dockerizando a aplicação
Agora que configuramos o ambiente de desenvolvimento e criamos os projetos React e Node.js, vamos dockerizar a aplicação. Para isso, crie um novo arquivo chamado "Dockerfile" na pasta raiz do projeto e adicione o seguinte código:
# Instalando a imagem Node.js
FROM node:alpine
# Definindo a pasta de trabalho
WORKDIR /app
# Copiando os arquivos do frontend
COPY frontend /app/frontend
# Instalando as dependências do frontend
RUN cd frontend && npm install
# Copiando os arquivos do backend
COPY backend /app/backend
# Instalando as dependências do backend
RUN cd backend && npm install
# Expondo a porta do servidor Node.js
EXPOSE 3000
# Iniciando o servidor Node.js
CMD ["node", "backend/server.js"]Este Dockerfile cria uma imagem Docker usando a imagem Node.js Alpine como base, copia os arquivos do frontend e do backend para a pasta de trabalho, instala as dependências de cada projeto e inicia o servidor Node.js na porta 3000.
Passo 5: Construindo e executando a imagem Docker
Agora que temos o Dockerfile configurado, vamos construir a imagem Docker e executar nossa aplicação. No terminal, navegue até a pasta raiz do projeto e execute o seguinte comando para construir a imagem:
docker build -t my-docker-app .
Isso irá construir a imagem Docker com o nome "my-docker-app". Em seguida, execute o seguinte comando para iniciar um contêiner usando a imagem que acabamos de criar:
docker run -p 3000:3000 my-docker-app
Isso irá iniciar o contêiner Docker e expor o servidor Node.js na porta 3000. Agora, você pode acessar sua aplicação em http://localhost:3000.
Parabéns! Você dockerizou com sucesso uma aplicação web completa desenvolvida com React e Node.js. O Docker é uma ferramenta poderosa que simplifica a implantação e a escalabilidade de aplicativos, permitindo que eles sejam executados de forma consistente em diferentes ambientes. Experimente adicionar mais recursos à sua aplicação e explorar as possibilidades do Docker para otimizar o processo de desenvolvimento e implantação.
uma pergunta, sem alguém puder ajudar
meus códigos, tudo ok (aparentemente)
no entanto, as alterações que faço, não refletem no docker!!
ou seja, edito o código, tenho derrubar o app docker, e só subir de novo não basta
tenho que antes executar o –build do docker para atualizar
não deveria atualizar automaticamente da mesma forma que desenvolvemos no nosso próprio ambiente local??
uma dica, para rodar e testar esse projeto no linux a variavel host.docker.internal(onde costumeiramente seria localhost) da string de conexão do postgres que vai no comando run dentro do readme.md do backend tem que ser trocada para o ip local da sua maquina pois essa variavel host.docker.internal so esta disponivel em windows e mac os
Ja pensou estas turma de hoje vise o Linux ou BigLinux feito e rodando em texto. E o Wiindows v3.1 ao 3.11 é tipo usando o linux hoje.
Grato
Obrigado pela aula, achei bem tranquilo de entender os conceitos abordados… Aguardando video do Deploy!!!
tem jeito muito mais simples de fazer.. Esse ficou bem mais complexo
🎯 Key Takeaways for quick navigation:
00:00 🐳 O que o Docker resolve: Uma introdução ao Docker, destacando a importância de entender o problema que essa tecnologia resolve.
– Destaca a importância de compreender o problema que uma tecnologia resolve antes de se aprofundar nela.
– Explica a necessidade de entender a diferença entre o ambiente de desenvolvimento e o ambiente de produção.
– Apresenta a motivação por trás do desenvolvimento do Docker.
03:10 🐳 Programação em 2003 e o problema do ambiente de desenvolvimento: Detalhes sobre como era o processo de desenvolvimento de aplicações em 2003 e os desafios enfrentados, como inconsistências entre ambientes de desenvolvimento e produção.
– Descreve o processo de desenvolvimento de aplicações em PHP no ano de 2003.
– Explora as dificuldades de manter a consistência entre o ambiente de desenvolvimento e produção.
– Aponta as limitações das ferramentas disponíveis na época para lidar com esses desafios.
11:46 🐳 Como o Docker resolve esses problemas: Explicação sobre como o Docker aborda os desafios mencionados, destacando sua capacidade de criar um ambiente consistente entre desenvolvimento e produção e a agilidade na transferência de imagens e containers.
– Descreve como o Docker elimina a necessidade de emular um sistema operacional completo.
– Destaca a facilidade de transferência de imagens e containers entre diferentes ambientes.
– Aponta para a importância do Docker na implementação de práticas DevOps e escalabilidade de aplicações.
18:59 🐳 Docker simplifica o processo de instalação e configuração de servidores.
– Docker permite instalar e rodar servidores de forma simplificada, utilizando containers.
– Containers podem ser compostos e combinados facilmente, criando ambientes complexos.
– Docker Hub é uma plataforma para buscar e compartilhar imagens de containers.
21:14 🚀 Vantagens e aplicabilidade do Docker na prática.
– Docker agiliza o desenvolvimento ao resolver problemas de ambientes de desenvolvimento e produção.
– Possibilita a criação de testes automatizados, sistemas monolíticos ou micro serviços.
– Permite o escalonamento de processos e facilita o deployment em diferentes ambientes.
26:13 📦 Preparando uma aplicação React e Node.js para Docker.
– Demonstração prática de como preparar uma aplicação React e Node.js para serem executadas em containers Docker.
– Uso do Docker para empacotar e orquestrar aplicações de forma independente do ambiente de hospedagem.
– Destaque para a simplicidade e versatilidade do Docker na criação e distribuição de aplicações.
37:49 🐳 Conceitos básicos de variáveis de ambiente e modularização da aplicação
– Utilização de variáveis de ambiente para configurar URLs de API em diferentes ambientes.
– Importância de modularizar a aplicação para facilitar a configuração e manutenção.
– Sugestões para gerenciar variáveis sensíveis, como senhas de banco de dados, em arquivos de ambiente.
43:15 📦 Preparação do ambiente e conceitos básicos do Docker
– Passos iniciais para trabalhar com Docker, incluindo a instalação do Docker e o uso de imagens básicas.
– Entendimento do Dockerfile e definição da estrutura básica para a criação de containers.
– Especificação da pasta de trabalho e configuração de variáveis de ambiente dentro do Docker.
48:39 🏗️ Configuração do Dockerfile e construção de containers
– Explicação detalhada do Dockerfile e suas seções, como a definição da imagem base e do diretório de trabalho.
– Demonstração prática de como copiar arquivos e executar comandos dentro do Dockerfile.
– Importância de compilar/transpilar código, como no caso do TypeScript, antes de incluí-lo no container.
56:05 🐳 Construindo a Imagem Docker
– Processo de construção de uma imagem Docker para uma aplicação React e Node.js.
– Divisão da construção em fases, como a fase de build e a fase do servidor.
– Uso de comandos como `FROM`, `COPY` e `CMD` para configurar a imagem.
58:34 📦 Configurações e Arquivos do Docker
– Uso do arquivo `Dockerfile` para definir configurações da imagem Docker.
– Gerenciamento de arquivos e pastas durante a construção da imagem.
– Importância do arquivo `.dockerignore` para evitar inclusão de arquivos desnecessários na imagem final.
01:04:04 🖥️ Processo de Build da Imagem Docker
– Execução do comando `docker build` para criar a imagem Docker.
– Descrição do processo de build passo a passo, incluindo a instalação de dependências.
– Verificação do tamanho da imagem resultante e sua distribuição para o servidor.
01:14:00 🐳 Configurando o Docker Compose para o PostgreSQL
– Explicação sobre o uso do Docker Compose para gerenciar containers na máquina local.
– Detalhes sobre o arquivo `docker-compose.yml` e sua estrutura.
– Importância do mapeamento de volumes para preservar dados entre reinicializações de containers.
01:18:10 🚀 Rodando a aplicação com Docker Compose
– Demonstração prática de como usar o Docker Compose para iniciar os containers definidos no arquivo `docker-compose.yml`.
– Visão geral sobre como o Docker facilita o gerenciamento de ambientes de desenvolvimento.
– Importância de trabalhar com imagens de qualidade e seguras para evitar problemas futuros.
01:20:15 🔧 Configuração do ambiente para execução da aplicação
– Configuração das variáveis de ambiente necessárias para conexão com o banco de dados PostgreSQL.
– Demonstração dos comandos necessários para executar as migrações do banco de dados e iniciar a aplicação.
– Importância do arquivo `entrypoint.sh` para automatizar tarefas de inicialização do servidor.
01:29:34 🚪 Conexão entre containers Docker
– Demonstração prática de como os containers Docker podem se comunicar entre si através da rede interna do Docker.
– Explicação sobre a interação entre containers do React, Node.js e PostgreSQL.
– Visão geral da estrutura de comunicação distribuída proporcionada pelo Docker.
01:31:03 🛠️ Escalabilidade e Orquestração com Kubernetes
– Discussão sobre o uso do Kubernetes para orquestração de containers e escalabilidade de sistemas.
– Apresentação das vantagens de utilizar o Kubernetes para gerenciar ambientes complexos.
– Reflexão sobre a importância de ferramentas avançadas para o controle e a manutenção de aplicações emcontêineres.
01:31:57 💬 Perguntas e Respostas sobre Docker e Prisma
– Esclarecimento de dúvidas comuns relacionadas ao uso do Docker e do Prisma.
– Informações sobre o desempenho e os requisitos de hardware para executar containers Docker.
– Discussão sobre os provedores de banco de dados suportados pelo Prisma e as vantagens de sua integração com outros frameworks.
Made with HARPA AI
Sim, queremos aprender fazer o deploy de uma imagem docker 🙂
Você ja tinha o node instalado? Temos que ter necessariamente um projeto ja criado e testado? Por que eu tenho uma dúvida: eles dizem que um benefício do Docker é deixar o seu pc limpo sem instalar nada somente o Docker como ambiente de desenvolvimento, mas em todos os tutoriais as pessoas ja tem um projeto e ai criam as imagem para "dockernizar" um projeto, tipo o seu ja tem varios arquivos e parece que ja rodou o npm install ai, mas daria para fazer criar um projeto em Docker sem ter node instalado?
Tipo, você fez uma aplicação e ai mandou ela para um container, eu queria fazer essa aplicação direto do container
Muito obrigada, aula incrível!
Sim, queremos aprender fazer o deploy de uma imagem docker 🙂
Opa, eu gostaria de ver uma aula pra subir na aws esses containers =D
Sim, queremos aprender fazer o deploy de uma imagem docker 🙂
Obrigado pelo conteúdo!
Cara, sinceramente… muito obrigado! Aliás, já havia comprado o seu curso e você tem sido um herói para mim, sério! Muito obrigado mesmo pelo conteúdo, pela forma de ensinar! É só gratidão nesse comentário!
Muito Bom! melhor aula sobre docker que ja vi!
queremos aprender a fazer o deploy.
Parabéns Felipe! Live sensacional!👏👏