DevOps - Vue.js no Docker

Quarto artigo da série DevOps, continuação do livro Docker que pode ser acessado através do site Academia.edu. Em postagens passadas mostrei três opções de bancos de dados que podem ser hospedadas em contêineres do Docker,  agora quando se trata de ambientes ou linguagens de programação a figura muda um pouco.

Um exemplo simples é o NPM, um gerenciador de pacotes para aplicações JavaScript, não é viável mantê-lo em um contêiner a menos que se deseje programar exclusivamente dentro do contêiner, ou caso similar é do Node.js, um servidor de aplicações JavaScript. Em ambos os casos é ideal instalar na máquina física pois não obteríamos qualquer vantagem colocando-os em contêineres.

Agora, pensemos no Vue.js, um framework para visão da página (é um pouco mais que isso), devido a sua flexibilidade pode muito bem estar amarrado a um contêiner e utilizado apenas quando necessário (o mesmo caso se aplica ao Yeoman e outros frameworks). Porém seu contêiner é um pouco diferente pois de vez em quando necessitamos executar um determinado comando.

Antes de começar é necessário ter a última versão instalada do: npm e nodejs.

1. Instalar a imagem do Vue.js:

$ docker pull amurf/docker-vue-cli

2. Editar o bashrc:

$ nano ~/.bashrc

3. Adicionar a seguinte linha (no final do arquivo):

$ alias vue='docker run -it --rm -v "$PWD:$PWD" -w "$PWD" amurf/docker-vue-cli vue'

4. Sair e entrar novamente do terminal. 5. O Vue.js responderá ao seguinte comando:

$ vue

6. Visualizar as templates oficias para a criação de projetos no Vue.js:

$ vue list

7. Criar um projeto:

$ vue init [template|webpack] [nome_do_projeto]

8. As opções são:

Nome do Projeto?
Descrição do Projeto?
Autor?
Vue Build? [Runtime-only - extenções .vue]
vue-router? No
ESLint? Yes [auxilia a manter o codigo correto]
Padrão de Projeto? Standard
Teste Unitários? No
Teste? No

9. Depois do projeto gerado executar os seguintes comandos:

$ cd [nome projeto]
$ sudo npm install
$ npm run dev

Esperar o Node.js subir e podemos ver a execução do projeto através do endereço http://localhost:8080 com a seguinte tela:

Assista o vídeo para tirar quaisquer dúvida de como proceder:

Obrigado e até a próxima
Fernando Anselmo