Pengembangan FrontEnd Docker

Legenda

Ketika seorang pengembang baru masuk, dia dihadapkan pada tugas untuk memulai lingkungan pengembangan. Dan sampai saat ini, sering seperti menari dengan rebana. Kirimkan 10 paket berbeda dari versi tertentu, dan ternyata proyek hewan peliharaan Anda membutuhkan versi yang berbeda, atau bahkan mungkin proyek berbeda dalam pekerjaan yang sama. Setiap kali spesialis keluar dari situasi ini dengan caranya sendiri, tetapi masalah utama, selain waktu yang dihabiskan untuk konfigurasi ini, tetap bahwa kinerja dari pengembang ke pengembang atau pelari tidak dijamin.

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

Di mana letak file rahasia sectret.txt

File tersebut dapat dilihat dan diedit isinya.

Hasil

Tidak diragukan lagi, topik containerization sangat luas dan kami hanya membahas sebagian kecil, namun, kami telah membahas dasar yang diperlukan untuk memulai. Saya akan senang jika artikel ini memberikan titik awal untuk pengembangan FE di Docker.

GitHub: di sini