FrontEnd Docker Development

Legend

When a new developer comes in, he is faced with the task of starting the development environment. And until recently, it often became like dancing with a tambourine. Deliver 10 different packages of certain versions, and it turns out that your own pet-project requires different versions, or it may even be a different project within the same work. Each time the specialist came out of this situation in his own way, but the main problem, in addition to the time spent on this configuration, remained that the performance from developer to developer or runner was not guaranteed.

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

In which lies the secret file sectret.txt The

file can be viewed and edited its contents.

Outcomes

Undoubtedly, the topic of containerization is very extensive and we have covered only a tiny part, however, we have covered the necessary base to get started. I would be glad if this article provides a starting point for FE development in Docker.

GitHub: here