Configurando e iniciando o projeto React no ambiente Docker

Quem já não teve problema com versões incompatíveis na quebra de compatibilidade devido a atualização que funcionava na versão anterior em comparação com a versão atual?

Para evitar isso, recomendado utilizar o Docker no ambiente de desenvolvimento.

O objetivo deste post, é explicar os procedimentos de configuração e inicialização do projeto React no ambiente Docker.

Preparando o ambiente React no Docker

A premissa é ter o Docker e Docker-Compose instalados, caso ainda não tenha, verifique Instalando Docker e Docker Compose no Linux (qualquer distro) ou Instalando Docker no Windows 10

$ mkdir $HOME/ambiente-react-docker && cd $HOME/ambiente-react-docker
$ docker run --rm --volume "/home/reginaldo/ambiente-react-docker:/usr/node/app" --workdir "/usr/node/app" --publish 3000:3000 -it node:18 bash

O comando acima, irá conectar ao conteiner node, de modo similar como estiver conectado a outro computador via SSH.

Na primeira vez que executar, o Docker irá fazer o download da imagem node:18 e pode levar alguns minutos.

Explicando os parâmetros informados:

--volume "/home/reginaldo/ambiente-react-docker:/usr/node/app" Cria o link entre o diretório do HOST (/home/reginaldo/ambiente-react-docker) com o diretório do CONTAINER (/usr/node/app).

--WORKDIR "/usr/node/app" Diretório inicial no momento que o container foi inicializado.

--publish 3000:3000 Cria um link entre a porta 3000 do HOST com a porta 3000 do CONTAINER

--it Cria um link entre o terminal do container com o terminal do HOST

--rm Remove antigos containers (muito útil depois da primeira execução)

Criando o primeiro projeto React

Estando conectado no container node com o comando que executou anteriormente, conforme explicado, execute:

npx create-react-app .

Pronto, o primeiro aplicativo React foi criado.

É importante salientar que ambiente com Docker é volátil, quando não criado o volume que mapeia o diretório entre HOST e CONTAINER, conforme foi criado no comando é adicionado o volume.

No diretório volume do HOST, observe o Owner, provavelmente irá precisar alterar para o seu usuário.

$ sudo chown -R $USER $HOME/ambiente-react-docker

Além do arquivo .gitignore é recomendado criar o arquivo .dockerignore e adicionar o node_modules

Executando o projeto React no Docker

No diretório do volume, adaptando o nome do seu usuário, execute:

$ docker run --rm --volume "/home/reginaldo/ambiente-react-docker:/usr/node/app" --workdir "/usr/node/app" --publish 3000:3000 -it node:18 bash

Estando conectado no container node, execute o comando:

npm start

Abre o browser http://localhost:3000

Configurando o ambiente React com Docker Compose

Para não precisar executar o comando Docker Run toda hora, pode simplificar e organizar com o Docker Compose

Pode criar o arquivo docker-compose.yml no diretório de sua preferência

docker-compose.yml

version: '3'

services:
  node:
    image: node:18
    container_name: ambiente-react
    args:
      user: saitam
      uid: 1000
    ports:
      - '3000:3000'
    volumes:
      - ./src:/usr/node/app
    working_dir: /usr/node/app
    command: 'npm start'

$ docker-compose up OU
$ docker-compose up -d

O primeiro comando o log fica aberto em tempo de execução. O segundo é executado em background. Eu prefiro executar o segundo, quando preciso verificar o log, executo docker ps

E para acessar o container é docker exec -it <CONTAINERID> bash

Pronto, a partir desse momento já tem o ambiente React no Docker para seus projetos

Feito!