Executando verificação de segurança...
5
JoaoRibeiro
3 min de leitura ·

Criando um Ambiente de Desenvolvimento Nuxt 3 com Docker e Hot Reload

Se você está desenvolvendo um projeto com Nuxt 3 e deseja utilizar o Docker para encapsular seu ambiente, este guia vai te mostrar como configurar o Docker para suporte ao Hot Reload e gerenciamento eficiente de volumes.

Estrutura do Projeto

Certifique-se de que seu projeto Nuxt 3 possui a seguinte estrutura básica:


nuxt-docker/
├── Dockerfile
├── docker-compose.yml
├── package.json
├── pnpm-lock.yaml
├── nuxt.config.ts
└── ...

Dockerfile

O Dockerfile define a imagem base e as etapas de configuração do ambiente de desenvolvimento.


# Etapa base
FROM node:20-slim

# Define o diretório de trabalho
WORKDIR /app

# Copia os arquivos de dependências
COPY package.json pnpm-lock.yaml ./

# Habilita o corepack e instala dependências usando pnpm
RUN corepack enable && pnpm install

# Copia o restante dos arquivos (excluindo node_modules, devido ao .dockerignore)
COPY . .

# Exposição da porta para desenvolvimento
EXPOSE 3000

# Comando padrão para iniciar o Nuxt em modo de desenvolvimento
CMD ["pnpm", "dev"]

Pontos importantes do Dockerfile:

  • Imagem Base: Utilizamos node:20-slim para manter a imagem leve.
  • Corepack: Habilita o suporte ao PNPM nativamente.
  • Volumes: Evita copiar o node_modules do host para o container, reduzindo conflitos.
  • Hot Reload: A porta 3000 é exposta para desenvolvimento.

docker-compose.yml

O docker-compose.yml configura os serviços, volumes e portas necessários para o desenvolvimento.


version: '3.8'

services:
  nuxt-app:
    build:
      context: . # Diretório do projeto
    ports:
      - "3000:3000" # Mapeia a porta do container para o host
    volumes:
      - .:/app # Monta o diretório local no container
      - /app/node_modules # Previne conflito entre o host e o container
    environment:
      - NODE_ENV=development
      - HOST=0.0.0.0
      - PORT=3000
    command: pnpm dev # Comando para iniciar o Nuxt no modo de desenvolvimento

Explicação:

  • Volumes:
    • Monta o diretório local (.:/app) para refletir as alterações no container.
    • Exclui o diretório node_modules do host para evitar conflitos.
  • Portas: Mapeia a porta 3000 do container para o host.
  • Variáveis de Ambiente:
    • Define NODE_ENV como development.
    • Configura o HOST para 0.0.0.0, permitindo conexões externas (necessário no Docker).

Hot Reload

O Hot Reload permite que mudanças no código sejam refletidas instantaneamente. Ele é ativado automaticamente pelo Nuxt 3, mas o mapeamento correto dos volumes no Docker é essencial.

Para garantir que o Hot Reload funcione:

  1. Certifique-se de que o volume .:/app está corretamente configurado no docker-compose.yml.
  2. Verifique se o arquivo nuxt.config.ts possui as configurações padrão. O vite já está integrado para desenvolvimento.

Comandos Úteis

  • Iniciar o container: 
    docker-compose up --build
  • Parar o container: 
    docker-compose down
  • Acessar o container: 
    docker exec -it <container-id> sh

    Use este comando para depurar diretamente no ambiente do container.

.dockerignore

Adicione um arquivo .dockerignore para evitar que arquivos desnecessários sejam copiados para o container:


node_modules
dist
.cache
.vscode
.DS_Store

Benefícios da Configuração

  • Hot Reload: Modificações no código são refletidas em tempo real no container.
  • Isolamento: O ambiente de desenvolvimento é encapsulado no container, eliminando dependências do sistema operacional.
  • Eficiente: O uso de volumes para node_modules previne conflitos comuns entre host e container.

Essa configuração oferece um ambiente de desenvolvimento estável e produtivo. Com ela, você pode se concentrar em escrever código sem se preocupar com problemas de configuração. 🚀

Carregando publicação patrocinada...