Vue.js + Docker: Development Environment

É muito importante durante o desenvolvimento de software que os programadores tenham um ambiente padrão, ou seja, estejam usando as mesmas bibliotecas e nas mesmas versões.

O package.json e o package-lock.json ajudam a controlar as dependências e suas versões. Mas como garantir que todos os programadores estejam usando a mesma versão do Node.js?

Isso pode valer para outros aplicativos do ambiente de desenvolvimento. Por exemplo, talvez no seja importante que todos os programadores tenham a mesma versão do Git.

Lembrando que os programadores ainda podem usar diferentes sistemas operacionais, como Linux, MacOs e Windows.

É nessa parte que entra o Docker. Se você sabe pouco sobre Docker, recomendo que leia este artigo para entender os principais conceitos: O que é Docker?

Neste artigo eu vou mostrar como configurar seu ambiente de desenvolvimento para criar um aplicativo web com Vue.js e Docker.

Instalação

Para este tutorial nós vamos utilizar o Docker, um editor de texto da sua preferência e o terminal.

Se você tem dúvidas sobre como instalar o Docker acesse este link: Docker Install

Atenção, você não precisa ter o Node.js instalado no seu computador! Neste tutorial vamos utilizar somente o Node.js que vem com a imagem do Docker.

Vue.js + Docker: Criando um projeto

Primeiro passo, você precisa criar uma pasta para o projeto. No meu caso estou utilizando o seguinte caminho /home/project-vue-docker (Lembrando que eu estou utilizando o Linux Ubuntu 20.04).

Agora você acessa essa pasta pelo terminal e executa o seguinte comando:

docker run --rm --volume "/home/project-vue-docker:/srv/app" --workdir "/srv/app" --publish 8080:8080 -it node:12 bash

Com este comando você executa a imagem node:12 e em seguida você se conecta ao container via terminal. Ou seja, é como se você estivesse acessando "um novo computador" com o Node.js instalado.

Na primeira vez que você executar este comando, o Docker fará o download da imagem e isso pode demorar alguns minutos, mas depois a imagem ficará salva no seu computador.

Em relação aos demais parâmetros do comando, segue uma descrição sobre cada um:

• --volume "/home/project-vue-docker:/srv/app": Compartilha a pasta do projeto do computador hospedeiro com o container.
• --workdir "/srv/app": Diretório inicial quando o container é iniciado.
• --publish 8080:8080: Compartilha a porta 8080 do container com o seu computador.
• -it: Compartilha o terminal do container com o terminal do seu computador.
• -rm: Remove antigos containers (muito útil depois do primeiro acesso).

Lembrando que o diretório "/srv/app" pertence ao container e a pasta "/home/project-vue-docker" pertence ao seu computador (hospedeiro), porém ambas possuem o mesmo o conteúdo.

Se você tem dúvidas sobre estes parâmetros, você pode consultar a documentação oficial: Docker Run

Vue.js + Docker: Configurando o projeto

Agora que você está conectado ao container via terminal, você pode iniciar a configuração do projeto.

Dentro do container, execute o seguinte comando para instalar o vue-cli:

npm install -g @vue/cli

Agora vamos criar um projeto Vue.js. Continue dentro da pasta "/srv/app" do container e execute este comando:

vue create .

Selecione as configurações desejadas para seu projeto e é só aguardar seu projeto ser configurado.

Aqui há um detalhe muito importante para esclarecer. As instalações que você faz quando está conectado ao container serão perdidas quando o container for desligado ou reiniciado.

Desta forma quando você se reconectar ao container o vue-cli não estará mais instalado. Mas isso não é um problema porque somente usaremos o vue-cli apenas uma vez durante a criação do projeto.

Já os arquivos criados pelo "vue-cli" não perderemos, porque eles foram criados dentro da pasta "/srv/app" que é um link para a pasta "/home/project-vue-docker". Ou seja, o código do seu aplicativo fica armazenado no computador hospedeiro e é apenas compartilhado com o container.

Se você precisar instalar softwares permanentes dentro do container, você precisa fazer essa instalação por meio do Docker File e construir uma nova imagem.

Vue.js + Docker: Desenvolvimento

Antes de iniciar o desenvolvimento precisamos checar as permissões dos arquivos criados dentro do computador hospedeiro, uma vez que estes arquivos foram criados por dentro do container.

Eu estou utilizando o Linux Ubuntu 20.04 e precisei alterar o owner da pasta com o comando chown. Se você estiver usando Linux execute o seguinte comando pelo terminal:

sudo chown -R <USERNAME> /home/project-vue-docker

Para executar o projeto, você deve se conectar ao container novamente. Dentro do computador hospedeiro execute o comando:

docker run --rm --volume "/home/project-vue-docker:/srv/app" --workdir "/srv/app" --publish 8080:8080 -it node:12 bash

Agora conectado no container, você executa o comando:

npm run serve

Pronto! Agora seu projeto está sendo executado dentro do container e você pode alterar os arquivos pelo computador hospedeiro com seu editor de texto favorito.

Se você acessar o navegador no endereço http://localhost:8080 você verá seu projeto em funcionamento.

Caso seja necessário instalar mais alguma biblioteca, é necessário executar o comando npm install conectado no container.

Vue.js + Docker Compose

Com o passar o tempo talvez você se canse executar o comando "docker run ..." toda vez que você precise executar o container. Uma alternativa é subir o container com o Docker Compose.

Para isso crie o seguinte arquivo "/home/project-vue-docker/docker-compose.yml":

version: '3'

services:
  node:
    image: node:12
    ports:
      - '8080:8080'
    volumes:
      - ./:/srv/app
    working_dir: /srv/app
    command: 'npm run serve'

Agora dentro da pasta "/home/project-vue-docker" execute este comando:

docker-compose up

Pronto! Container sendo executado.

Docker: Container em Background

Se você preferir, é possível executar o container em background:

docker-compose up -d

Para se conectar ao container em background via terminal, primeiramente você descobre o CONTAINER_ID:

docker ps

Agora execute o comando:

docker exec -it <CONTAINER_ID> bash

Por fim

Neste tutorial eu utilizei as seguintes versões:

• Docker: 19.03
• Docker Compose: 1.25
• Node: 12.20
• Npm: 6.14
• vue-cli: 4.5

Dúvidas ou sugestões é só entrar em contato. Abraço.