Développement Docker FrontEnd

Légende

Lorsqu'un nouveau développeur arrive, il est confronté à la tâche de démarrer l'environnement de développement. Et jusqu'à récemment, c'était souvent comme danser avec un tambourin. Livrez 10 packages différents de certaines versions, et il s'avère que votre propre projet familier nécessite des versions différentes, ou il peut même s'agir d'un projet différent dans le même travail. A chaque fois le spécialiste sortait de cette situation à sa manière, mais le principal problème, outre le temps passé sur cette configuration, restait que les performances de développeur à développeur ou coureur n'étaient pas garanties.

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

Dans lequel se trouve le fichier secret sectret.txt Le

fichier peut être visualisé et édité son contenu.

Résultats

Sans aucun doute, le sujet de la conteneurisation est très vaste et nous n'avons couvert qu'une infime partie, cependant, nous avons couvert la base nécessaire pour commencer. Je serais heureux si cet article fournit un point de départ pour le développement FE dans Docker.

GitHub: ici