CI · CD 4회

 미션 

• 정적 파일 배포하기
  • 볼륨으로 정적 파일 공유하기
  • 정적 파일 수정해서 내용이 바로 반영되는지 확인하기
• reverse proxy를 이용하여 서비스 구성해보기
  • Nginx로 프론트엔드, 백엔드 환경 만들기(w. docker) 부분 실습

 

 정적 파일 배포하기 

볼륨을 구성한다는 의미는 container와 컨테이너가 설치된 서버가 폴더를 공유한다는 의미이다. docker-compose.yaml 파일에 볼륨 공유와 관련한 부분을 작성함으로써 컨테이너가 생성되었을 때 컨테이너를 생성시킨 서버에서 설정한 폴더와 컨테이너에서 설정한 폴더가 생성된다. 그리고 둘 중 하나만 변경하더라도 변경 사항이 양 쪽에 동시에 적용이 된다.

 

설정 파일과 같이 자주 고쳐야 하는 파일이 있다면 특징 별로 볼륨을 두어 관리한다면 컨테이너에 접속하지 않고 관리할 수 있으며 컨테이너에 적용시키기 위한 명령어만 컨테이너 내부에서 실행해주면 된다.

 

 reverse proxy를 이용하여 서비스 구성해보기 

reverse proxy 서비스 구성

reverse proxy를 설정한다는 의미는 트래픽이 들어왔을 때 URI의 형태에 따라 어느 서버로 해당 트래픽을 흘려 보낼지 결정하는 부분이다.

해당 개념을 통해서 트래픽의 목적지를 구분하는 부분을 배울 수 있었다.

 

필요 파일

- dockerfile

- image(nginx:1.23, node:16-alpine)

- docker-compose.yaml

- nginx config 파일

- backend: "server.js"

 

프론트와 백엔드 서버 설정

서비스를 구성할 때 프론트서버와 백엔드서버를 각각 컨테이너로 띄웠다. 그리고 각각의 컨테이너를 띄울 때 docker-compose.yaml 파일을 통해서 명령어를 통해 컨테이너가 한번에 올라 갈 수 있게 구성하였다. 프론트 서버의 경우 nginx:1.23 서버를 통해 정적 파일을 serve하는 용도로 구성되었고 백엔드 서버의 경우 node:16-alpine 서버를 띄워 nginx 환경 설정에서 upstream 서버로 등록하여 nginx 서버에 request가 들어왔을 때 특정 URI로의 트래픽을 다른 서버로 흘려보내게 하는 설정을 구성하였다.

 

Dockerfile 설정 (backend)

FROM node:16-alpine

WORKDIR /home/jscode

COPY source/backend .

ENTRYPOINT [ "npm", "run", "start" ]

 

app_test:prod image 만들기 (Dockerfile)

docker build -t app_test:prod -f app_test.dockerfile .

 

docker-compose.yaml 설정 

version: "3.5"

services:
  app:
    container_name: app_test
    image: app_test:prod
    ports:
      - 3001:3001

  nginx:
    container_name: nginx_test
    image: nginx:1.23-alpine
    volumes:
      - ./docker/source/frontend/build:/home/jscode
      - ./docker/source/nginx:/etc/nginx/conf.d
    command: sh -c "nginx && tail -f /dev/null"
    ports:
      - 80:80

 

nginx config 설정

upstream app {
	server app_test:3001;
}

server {
    listen 80;

    location /v1 {
        proxy_pass http://app_test:3001;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /hello {
        proxy_pass http://app_test:3001;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-Ip $remote_addr;
    }

    location / {
        root   /home/jscode;
        index  index.html;
        try_files $uri /index.html;
    }
}