Desenvolvimento FrontEnd Docker

Lenda

Quando um novo desenvolvedor chega, ele se depara com a tarefa de iniciar o ambiente de desenvolvimento. E até recentemente, muitas vezes era como dançar com um pandeiro. Entregue 10 pacotes diferentes de certas versões, e acontece que seu próprio projeto de estimação requer versões diferentes, ou pode até ser um projeto diferente dentro da mesma obra. Cada vez que o especialista saía dessa situação à sua maneira, mas o principal problema, além do tempo gasto nessa configuração, era que o desempenho de desenvolvedor para desenvolvedor ou executor não era garantido.

- , , . Docker.

FrontEnd , Docker. .

, :

1. Docker

   
   
   
   
   

2. production, DevOps.

   
   
   
   
   

3. 
   
   
   
   

Docker

.

docker-compose, MacOS Docker Desktop , linux .

CLI Docker

docker docker-compose --help

docker --help
docker ps --help
docker-compose --help
docker-compose up --help
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

FE 2 package.json: "dev" "build" production .

. node , .

GitHub:

TL;DR;

docker-compose.dev.yml

version: "3.9"
services:
  web:
    image: node:15.8-alpine3.11
    ports:
      - "3000:3000"
    volumes:
      - ".:/app"
    environment:
      NODE_ENV: development
      HOST: 0.0.0.0
    working_dir: /app
    command: sh -c "cd /app; yarn install; yarn run dev --host 0.0.0.0"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

docker-compose.yml

version: "3.9"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      NODE_ENV: production

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dockerfile

FROM node:15.8-alpine3.11 AS build
WORKDIR /app
COPY package.json package.json
RUN yarn install
COPY . .
RUN yarn build

FROM nginx:1.19-alpine
COPY --from=build /app/dist /opt/site
COPY nginx.conf /etc/nginx/nginx.conf

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

nginx.conf

worker_processes auto;

events {
    worker_connections 8000;
    multi_accept on;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  server {
      listen   80;
      listen   [::]:80 default ipv6only=on;

      root /opt/site;

      location / {
          try_files $uri $uri/ /index.html;
      }
  }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, :

:

docker-compose.dev.yml - , production

1 .  ‘web’. : node:15.8-alpine3.11



  , , production build.

2 .  , .

3 .  . , rebuild, — .

4 . ‘environment’ , .

5 . ‘working_dir’ , .

6 .  (webpack-dev-server ): command: sh -c "yarn install; yarn run dev --host 0.0.0.0”

: docker-compose -f docker-compose.dev.yml up

production:

, . SSR, : node ..

docker-compose.yml



develop ?

1. Dockerfile
   
   
   
   , image
   
   
   
   

   
   
   
   
   

2. NODE_ENV: development
   
   
   
   -> production
   
   
   
   

   
   
   
   
   

3. command



nginx
   
   
   
   

   
   
   
   
   

nginx fallback /index.html , - , .

Dockerfile



: multi-stage building, .

Dockerfile

—

1 . , develop FROM node:15.8-alpine3.11 AS build

! build, , , , .

2 . /app

3-5 . :

: package.json ?

( ): , .

“package.json”, , docker , . . .

6 . build.

—

— nginx .

8 . nginx .

9 . .

10 . nginx

: docker-compose up

deveopment

volumes , docker.

? :

~/project



. secret.txt



, : “secret text”

docker-compose.yml



, .

docker-compose.yml

version: "3.9"
services:
  web:
    image: alpine:latest
    volumes:
      - "./project:/app"
    command: sh -c "sleep 3600”
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

7. 1 .

: docker-compose up -d

, docker.

: docker ps

: docker-compose exec -it {_} /bin/sh

: cd /app 

Nele está o arquivo secreto sectret.txt O

arquivo pode ser visualizado e editado seu conteúdo.

Desfechos

Sem dúvida, o tópico da conteinerização é muito extenso e cobrimos apenas uma pequena parte, no entanto, cobrimos a base necessária para começar. Eu ficaria feliz se este artigo fornecesse um ponto de partida para o desenvolvimento de FE no Docker.

GitHub: aqui