Desarrollo de FrontEnd Docker

Leyenda

Cuando llega un nuevo desarrollador, se enfrenta a la tarea de iniciar el entorno de desarrollo. Y hasta hace poco, a menudo se volvía como bailar con una pandereta. Entregue 10 paquetes diferentes de ciertas versiones, y resulta que su propio proyecto favorito requiere versiones diferentes, o incluso puede ser un proyecto diferente dentro del mismo trabajo. Cada vez que el especialista salía de esta situación a su manera, pero el principal problema, además del tiempo dedicado a esta configuración, seguía siendo que el rendimiento de desarrollador a desarrollador o corredor no estaba garantizado.

- , , . 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 

En el que se encuentra el archivo secreto sectret.txt El

archivo se puede visualizar y editar su contenido.

Resultados

Sin lugar a dudas, el tema de la contenerización es muy extenso y hemos cubierto solo una pequeña parte, sin embargo, hemos cubierto la base necesaria para comenzar. Me alegraría si este artículo proporcionara un punto de partida para el desarrollo de EF en Docker.

GitHub: aquí