Jenkins + Docker + Nginx + React 프로젝트 배포하기 - 1

 

 

https://soyeon-story.tistory.com/46

Docker + jenkins 로 spring boot CI/CD 구축하기 - 1

지난번에는 Jenkins와 Docker를 활용하여 Spring Boot 백엔드 서버 배포를 해보았고,

이번에는 NGINX와 Docker를 이용한 React 애플리케이션 배포에 대해 공부해보려고 한다.

 

과정 : 

1. 젠킨스 빌드

2. 젠킨스 컨테이너 내에서 npm install (패키지 설치) -> npm build -> build 디렉토리 생성

3. 젠킨스 컨테이너에서 빌드된 build 디렉토리를 호스트 서버의 지정된 경로로 복사

4. 호스트 서버에 전송된 build 디렉토리를 nginx 컨테이너의 특정 경로로 이동하기 위한 셸 스크립트를 작성하여 jenkins에서 실행

5. 호스트 서버에 위치한 build 디렉토리를 nginx 컨테이너의 /usr/share/nginx/html/ 아래로 복사하여 프로젝트를 실행

---

1. Nginx 컨테이너 생성

 

1-1. Dockerfile 생성

# NGINX의 기본 이미지 사용
FROM nginx

# 호스트의 nginx.conf 파일을 컨테이너의 설정 경로에 복사
COPY nginx.conf /etc/nginx/nginx.conf

# 필요한 포트를 노출
EXPOSE 9000 9100

 

1-2. nginx.conf 파일 생성

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    # 프로젝트 1 - 포트 9000
    server {
        listen 9000;
        server_name localhost;

        location / {
            root /usr/share/nginx/html/project1;
            try_files $uri /index.html;
        }
    }

    # 프로젝트 2 - 포트 9001
    #server {
    #    listen 9001;
    #    server_name localhost;
    #
    #    location / {
    #        root /usr/share/nginx/html/project2;
    #        try_files $uri /index.html;
    #    }
    #}

    # 추가 프로젝트를 위한 server 블록
    # server {
    #     listen 9002;
    #     server_name localhost;
    #
    #     location / {
    #         root /usr/share/nginx/html/project3;
    #         try_files $uri /index.html;
    #     }
    # }
}

 

* 상세설명

worker_processes 1;

- NGINX가 실행할 워커 프로세스의 수를 설정합니다. 여기서는 1개로 지정하여 단일 워커 프로세스만 사용하도록 설정합니다.

 

해당 설정이 미치는 영향

• 처리 성능 제한:
  워커 프로세스 하나만 사용하므로 동시에 처리할 수 있는 요청 수가 제한됩니다. 요청이 많아지면 병목 현상이 발생할 수 있으며, 서버 응답 속도와 처리 능력이 낮아질 수 있습니다.
  일반적으로 CPU 코어 수에 맞춰 워커 프로세스를 설정합니다(worker_processes auto로 설정하면 CPU 코어 수에 맞춰 자동 조정됨). 코어가 많다면 여러 워커를 지정하여 요청을 병렬로 처리하는 것이 성능 면에서 유리합니다.
• 단일 프로세스의 이점:
  요청이 적은 상황에서는 워커 프로세스 하나만으로도 충분히 처리할 수 있으므로, 메모리 사용을 줄이고 관리가 단순해집니다.
  테스트 환경이나 리소스가 제한된 환경에서는 worker_processes 1;이 효율적일 수 있습니다.
• 대규모 트래픽 처리에 부적합:
  단일 워커 프로세스로는 동시에 많은 클라이언트 요청을 처리하는 데 한계가 있습니다. 특히 대규모 트래픽이 예상되는 서버에서는 성능 저하가 발생할 수 있습니다.

 

events {
    worker_connections 1024;
}

- events 블록: 워커 프로세스가 동시에 처리할 수 있는 최대 연결 수를 지정하는 설정입니다.
- worker_connections 1024: 각 워커 프로세스가 처리할 수 있는 최대 연결 수를 1024로 설정합니다.

 

include mime.types;
default_type application/octet-stream;

- include mime.types: NGINX가 다양한 파일 형식을 해석할 수 있도록 MIME 타입 설정 파일을 불러옵니다.
- default_type application/octet-stream: 파일의 기본 MIME 타입을 application/octet-stream으로 설정하여, MIME 타입이 지정되지 않은 파일이 기본적으로 이 타입으로 인식되도록 합니다.

 

server {
    listen 9000;
    server_name localhost;

    location / {
        root /usr/share/nginx/html/project1;
        try_files $uri /index.html;
    }
}

• server 블록: 특정 포트에서 요청을 처리할 서버 설정을 정의합니다.
  • listen 9000: 이 서버 블록이 포트 9000에서 들어오는 요청을 수신하도록 설정합니다.
  • server_name localhost: 서버 이름을 localhost로 설정하여 해당 이름으로 요청을 처리합니다.
• location / 블록: 루트 경로(/)에 대한 요청을 처리하는 방법을 정의합니다.
  • root /usr/share/nginx/html/project1: /usr/share/nginx/html/project1 디렉터리를 루트로 설정하여 해당 디렉터리에서 파일을 제공합니다.
  • try_files $uri /index.html: 요청한 파일이 존재하면 해당 파일을 제공하고, 없으면 index.html 파일을 기본으로 제공합니다. 이는 주로 SPA(Single Page Application)를 지원하기 위한 설정입니다
    
    

1-3. Docker 이미지 빌드

docker build -t nginx /home/soyeon/project/nginx-config

- Dockerfile이 있는 디렉토리 위치에서 해당 명령어를 실행한다.

• docker build : 
  • Dockerfile을 기반으로 Docker 이미지를 빌드합니다.
  • 지정된 컨텍스트(/home/soyeon/project/nginx-config 디렉터리)에 있는 Dockerfile을 찾아 이미지 생성에 필요한 지침을 수행합니다.
• -t nginx :
  • -t는 태그(tag)를 지정하는 옵션으로, 생성된 이미지의 이름을 nginx로 설정합니다.
  • 이미지 이름은 보통 name:tag 형식으로 지정할 수 있습니다. 여기서 nginx는 이름이고, 태그를 따로 지정하지 않으면 기본적으로 latest가 태그로 지정됩니다.
  • 이 옵션을 사용하면 이후에 docker run nginx와 같이 이름으로 쉽게 이미지를 실행할 수 있습니다.
• /home/soyeon/project/nginx-config :
  • 빌드 컨텍스트(context)라고 불리는 경로입니다. 이 디렉터리는 Dockerfile을 포함하고, 이미지 생성 시 필요한 파일들을 위치시켜야 합니다.
  • Dockerfile에 COPY 또는 ADD 명령을 사용할 때 이 경로에 있는 파일들을 컨테이너로 복사할 수 있습니다.

 

1-4. 컨테이너 생성

docker run -d --name nginx -p 9000-9100:9000-9100 nginx

- 호스트의 9000-9100 포트를 NGINX 컨테이너의 동일한 포트 범위에 매핑하여 백그라운드에서 실행하고, 컨테이너 이름을 nginx로 지정하는 명령어

 

* 컨테이너를 생성할 때 사용할 수 있는 옵션들

• -d : 백그라운드에서 컨테이너를 실행 (디태치드 모드)
• --name <name> : 컨테이너에 이름을 지정
• -p <host_port>:<container_port> : 호스트와 컨테이너 간 포트를 매핑
• -e <key>=<value> : 환경 변수를 설정 (예: -e ENV=production)
• -v <host_path>:<container_path> : 볼륨을 사용해 호스트와 컨테이너 간 디렉토리 공유
• --network <network_name> : 컨테이너가 연결될 네트워크 지정
• --rm : 컨테이너 종료 시 자동으로 삭제
• -it : 상호작용 모드와 TTY(터미널) 활성화 (쉘 접근 시 주로 사용)
• --restart <policy> : 컨테이너 재시작 정책 설정 (no, always, on-failure 등)
• --cpu-shares 및 --memory : CPU 및 메모리 리소스 제한