Como rodar seu projeto Nuxt em um container Docker? 🐳

Oi! Nesse guia, vou te mostrar como é bem simples e rápido dockerizar uma aplicação Nuxt. Bora lá?

Nuxt

O objetivo e foco desse guia é entender como podemos adicionar um projeto Nuxt dentro de um container Docker. Inicialmente, para criar e rodar o seu projeto Nuxt, consulte a documentação oficial do Nuxt.

Docker

O arquivo YAML

Na raiz do seu projeto Nuxt, precisamos criar um arquivo YAML chamado docker-compose.yml.

Dentro desse arquivo, iremos adicionar nossa configuração para dockerizar a nossa aplicação. Abaixo, você consegue visualizar como ficou o meu arquivo de configuração:

version: '3'

services:
  app:
    image: node:14.18.2-buster-slim
    container_name: docnux
    volumes:
      - .:/var/www/html
    working_dir: /var/www/html
    stdin_open: true
    tty: true
    ports:
      - 3007:3000

Você pode usar essa configuração para o seu projeto também, mas é importante entender o que cada carinha presente nesse arquivo faz:

version→ Versão do docker-compose que você quer utilizar;

services→ Instanciar os serviços (containers) que você quer subir;

app→ Nome do serviço;

image→ Declara a imagem que vai ser utilizada para subir o container em questão (é possível pegar essa imagem em https://hub.docker.com/search?image_filter=official&type=image&q=);

container_name → Declara o nome do container (para não gerar um aleatório);

volumes → Atrelar diretórios de fora do container (ou seja, na sua máquina) para algum diretório dentro do container (diretório de fora : diretório de dentro)

working_dir → Diretório de entrada a partir do momento em que o container é inicializado;

stdin_open → Quando true, permite que a entrada padrão de dados (standard input ou stdin) esteja "aberta". Isso serve para poder rodar o container interativo, ou seja, você poderá acessar o seu shell, executar comandos e etc;

tty → (TeleTypeWriter);

ports → Expor portas para uso posterior. Nesse contexto, podemos atrelar portas de fora do container à portas de dentro do container (porta de fora : porta de dentro).

Subindo nosso container Docker

Após definir as configurações do seu container, basta executar o seguinte comando:

docker-compose up -d

Se a mensagem no terminal retornar …done significa que seu container foi upado e está pronto!

Usando nosso projeto Nuxt com Docker

Agora, para rodar comandos dentro do container, é necessário seguir o padrão de comando:

docker-compose exec <nome do serviço> <comando>

Para a nossa aplicação Nuxt, podemos rodar dois comandos iniciais:

docker-compose exec app npm i

docker-compose exec app npm run dev

Repare, o docker-compose executa os comandos do Nuxt dentro do meu serviço nomeado como app, assim como vimos na criação do YAML.

Pronto! Você pode visualizar a aplicação no navegador em http://localhost:3007 e agora seu projeto Nuxt está dockerizado. Massa, né? 🚀

Lembre-se: Esse guia é produzido de maneira rápida e objetiva. Para saber mais sobre imagens e qual escolher ou usar no seu container, consulte a documentação oficial do Docker Hub.

Curtiu? Se conecte comigo onde preferir acessando minhas redes em: https://www.hosana.me.