본문 바로가기
📚 시리즈/- Jenkins와 Webhook을 이용한 CICD

[Webhook을 이용하여 CI CD 구성하기] - Dockerizing 및 Nginx 설정

by Wonit 2021. 8. 30.

해당 글은 Jenkins와 Github Webhook을 이용한 CICD 파이프라인 구성하기 시리즈 입니다. 자세한 사항은 아래 링크를 참고해주세요!

 

만약 해당 실습 내용의 코드가 궁금하다면 프로젝트 깃허브 에서 확인할 수 있습니다.

 

 

 

순서

  • 프론트 도커라이징
  • gradle 설치
  • 백엔드 도커라이징
  • nginx 리버스프록시 설정하기

 

이번 시간은 우리가 앞서 만든 프론트엔드와 백엔드 애플리케이션을 컨테이너 화 할 수 있도록 SPEC 을 명시하는 Dockerfile 을 작성할 것이다.

 

또한 EC2 내부에 존재하는 Nginx 를 이용해서 Reverse Proxy 를 활성화 하고 Front와 Back 을 각각 연결시켜줄 수 있도록 할 것이다.

 

1. 프론트엔드 도커라이징

 

우리가 이전 시간부터 만든 프론트엔드가 존재하는 디렉토리로 이동해서 Dockerfile 을 생성하자.

 

그리고 다음과 같이 명시해준다.

 

FROM node:latest

WORKDIR /frontend

COPY ./package*.json /frontend

RUN npm install

COPY / /frontend

RUN npm run build

CMD ["npx", "serve", "-s", "build"]

EXPOSE 5000

 

위의 Dockerfile을 간략히 해석하자면 다음과 같다.

 

  • WORKDIR /frontend : 컨테이너 내부의 working directory를 생성한다.
  • COPY ./package*.json /frontend : 의존성 목록이 있는 package.json 을 컨테이너 내부로 복사한다.
  • RUN npm install : package.json 에 명시된 의존성들을 설치한다.
  • COPY / /frontend : HOST PC의 소스 코드를 컨테이너 내부로 복사한다.
  • RUN npm run build : npm으로 build를 실행한다.
  • CMD ["npx", "serve", "-s", "build"] : serve 로 build 디렉토리 아래에 있는 파일로 웹 서비스를 실행한다.
  • EXPOSE 5000 : 5000 포트를 노출한다

 

해당 파일은 우리가 docker build 명령어를 수행할 때 필요한 인자 값들을 하나의 파일로 관리할 수 있도록 하는데, 다음에 CICD 파이프라인이 구성될 때 git 에서 pull 한 코드들을 이미지로 만드는 작업에 필요하게 된다.

 

2. gradle 설치

 

우리가 CICD 파이프라인을 만들고 백엔드가 배포되기 까지는 다음과 같은 과정을 거친다.

 

  1. 개발자가 git commit을 한다.
  2. github webhook 이 이를 인지한다.
  3. jenkins 가 commit 된 코드를 git pull 한다
  4. gradle build 를 거친다.
  5. dockerfizing 을 수행한다.

 

여기서 4번째 과정을 위해서 우리의 운영 서버, 즉 EC2 인스턴스 내부에서 Build 를 할 수 있는 Build 도구가 필요하다.

 

나는 Gradle 을 이용할 예정이니 ssh를 이용해서 인스턴스 내부로 접속하자.

 

그리고 gradle 을 설치해야 하는데, apt 에서 제공하는 gradle 은 4점대 버전으로 현재 버전의 Spring Boot Application 을 빌드하는데에 문제가 있다.

 

그래서 수동으로 gradle 을 업데이트 해야 한다.

 

$ sudo apt install -y gradle

$ wget https://services.gradle.org/distributions/gradle-7.1.1-bin.zip -P /tmp

$ sudo apt install -y unzip
$ sudo unzip -d /opt/gradle /tmp/gradle-7.1.1-bin.zip

$ sudo ln -s /opt/gradle/gradle-7.1.1 /opt/gradle/latest

 

이와 같은 과정을 거쳐서 gradle 홈페이지에서 직접 다운받고 zip을 해제하며 링크를 연결해주자.

 

그리고 터미널에서 gradle 을 입력해서 gradle.sh 를 실행할 때, 우리가 설치한 버전으로 연결을 하려면 다음과 같이 하면 된다.

 

$ sudo gedit /etc/profile.d/gradle.sh

 

그리고 다음과 같은 스크립트를 입력해주자

 

export GRADLE_HOME=/opt/gradle/latest
export PATH=${GRADLE_HOME}/bin:${PATH}

 

그리고 해당 스크립트에 실행 권한을 부여하고, source 명령어로 스크립트를 로딩한다

 

$ sudo chmod +x /etc/profile.d/gradle.sh

$ source /etc/profile.d/gradle.sh

 

그리고 gradle 로 버전을 확인하면 7.1.1 버전이 잘 설치된 것을 알 수 있다.

 

3. 백엔드 도커라이징

 

이제 다시 github 에 있는 우리의 백엔드 이미지를 만들 Dockerfile을 작성해보도록 하자.

 

우리는 운영 서버, 즉 EC2 인스턴스 내부에서 Build를 할 것이다.

 

/backend 디렉토리로 가서 다음과 같이 작성해주자.

 

FROM openjdk:17-ea-11-jdk-slim

WORKDIR /server

COPY ./build/libs/jenkins-cicd-todo-0.0.1-SNAPSHOT.jar todo-server.jar

ENTRYPOINT ["java", "-jar", "todo-server.jar"]

 

해당 파일에 명시된 정보로 보자면 /backend 디렉토리에서 docker build . 을 수행하면 /backend/build/libs 아래에 있는 jar 파일을 컨테이너 내부로 복사해서 컨테이너 실행 시점에 jar를 실행할 것이다.

 

4. Nginx 리버스프록시 설정하기

 

이제 nginx 설정을 해줘야 한다.

 

ssh 클라이언트를 이용해서 EC2 인스턴스에 접속하자. 그리고 /etc/nginx 으로 이동해보자 그럼 nginx.conf 파일이 있을텐데, 해당 파일을 삭제하고 새로운 nginx.conf 파일을 만들자.

 

$ cd /etc/nginx
$ sudo rm nginx.conf

$ sudo vi nginx.conf

 

해당 파일에서 reverse proxy 설정을 할 수 있는데, 다음을 복사해서 넣어준다.

 

worker_processes  1;

events {
    worker_connections  1024;
}

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

  upstream front-server {
    server 127.0.0.1:5000;
    keepalive 100;
  }

  upstream backend-server {
    server 127.0.0.1:8080;
    keepalive 100;
  }

  server {
    listen 80;
    server_name localhost;

    location / {
      proxy_pass http://front-server;

      proxy_set_header HOST $host;
      proxy_set_header Referer $http_referer;
    }

    location /api {
      proxy_pass http://backend-server;

      proxy_set_header HOST $host;
      proxy_set_header Referer $http_referer;
    }

    error_page 500 502 503 504 /50x.html;
    location = 50x.html {
      root /usr/share/nginx/html;
    }
  }
}

 

그리고 sudo systemctl reload nginx 를 이용해서 nginx 를 재실행하고 ec2 인스턴스에 80 포트로 접근하면 다음과 같이 nginx 가 502 에러를 반환하게 된다.

 

여기까지 한다면 정상이다!

 

댓글0