Github Actions CI/CD(4) - NGINX 적용

이번에는 Github Actions CI/CD(1) - git submodule 포함시키키에서 추가적으로 NGINX를 적용해보겠다.

개발 환경은 다음과 같다.

• Window 11
• Spring Boot 2.7.7
• java 11
• Ubuntu Server.22.04 LTS
• Intellij IDEA Ultimate

0. NGINX란?

---

NGINX는 트래픽이 많은 웹사이트의 서버(WAS)를 도와주는 비동기 이벤트 기반 구조의 웹 서버 프로그램이다.

클라이언트로부터 요청을 받았을 때 요청에 맞는 정적 파일을 응답해 주는 Web Server로 활용되기도 하고, 리버스 프록시 서버로 활용되어 로드 밸런싱의 역할을 하기도 한다.

여기서 리버스 프록시 개념이 중요한데, 클라이언트의 요청을 받아 서버로 요청을 대신 전달하는 것을 의미한다.

리버스 프록시 서버(port:80)가 클라이언트의 요청을 단순히 전달(포워딩)하고 실제 요청에 대한 작업은 내부의 애플리케이션 서버(ex.스프링부트 8080)에서 처리하게 하는 것이다.

이렇게 되면 요청을 분산시켜 주어 위에서 말한 로드 밸런싱의 역할을 할 수 있고, 캐싱이 가능해 응답성이 증가하며, 클라이언트에게 애플리케이션 서버를 감추기 때문에 보안도 강화된다.

그럼 NGINX에 대한 개념은 여기까지 하고, 실제 적용을 해보도록 하겠다.

1. NGINX 파일(app.conf) 작성

---

다음과 같이, 프로젝트 root 경로에 nginx/conf.d 경로를 만들고 app.conf 파일을 생성해준다.

파일 내용은 다음과 같다.

proxy_pass http://myacademy:8080 부분에서 docker container 이름을 넣어준다.

나의 경우엔 myacademy.

server {
    listen 80;
    listen [::]:80;

    location / {
        proxy_pass http://myacademy:8080;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

2. Nignx DockerFile 작성

---

다음으로, Github Actions에서 CI/CD 하기 위한 NGINX DockerFile을 작성 해보겠다.

경로는 위에서 만든 /nginx 경로에 생성해주면 된다.

내용은 다음과 같다.

마지막의 COPY 부분은 프로젝트 ./nginx/conf.d/ 경로의 app.conf 파일을 docker에 설치되어 있는 NGINX 경로인 /etc/nginx/conf.d/ 경로로 복사하라는 의미이다.

FROM nginx:latest
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY ./nginx/conf.d/app.conf  /etc/nginx/conf.d/app.conf

3. docker-compose.yml 수정

---

기존에 NGINX 적용 전에는 docker-compose.yml 파일이 다음과 같았다.

version: '3'
services:
  web:
    container_name: myacademy
    image: percyfrank/myacademy
    ports:
      - '8080:8080'

NGINX를 적용하게 되면 다음과 같이 수정된다.

클라이언트가 접근할 수 있는 포트인 80:80로 NGINX ports 옵션을 설정해 준다.

그리고, 애플리케이션 서버의 경우 NGINX를 거쳐서 오기 때문에 컨테이너 내부에서 연결해 줄 8080 포트로 지정해 준다.

여기서 expose 옵션은 클라이언트에게 공개하는 것이 아니라 도커 내의 컨테이너에게만 포트를 공개한다.

version: '3'
services:
  web:
    container_name: myacademy
    image: percyfrank/myacademy
    expose:
      - 8080
  nginx:
    container_name: myacademy-nginx
    image: percyfrank/nginx
    restart: always
    ports:
      - '80:80'
    depends_on:
      - web

4. Github Actions CI/CD 스크립트 수정

---

마지막으로, 기존의 CI/CD 스크립트를 수정해야 한다.

수정할 부분만 가져와서 보여주겠다.

4-1. docker image 생성 및 docker hub에 push

Before

- name: build and release to DockerHub
  env:
    NAME: $
    APP: myacademy
  run: |
    docker build -t $NAME/$APP -f ./DockerFile .
    docker push $NAME/$APP:latest

After

- name: build and release to DockerHub
  env:
    NAME: $
    APP: myacademy
    NGINX: nginx
  run: |
    docker build -t $NAME/$APP -f ./DockerFile .
    docker build -t $NAME/$NGINX -f ./nginx/DockerFile .
    docker push $NAME/$APP:latest
    docker push $NAME/$NGINX:latest

4-2. docker-compose를 통해 EC2 인스턴스에 컨테이너 올리기

Before

- name: EC2 Docker Run
  uses: appleboy/ssh-action@master
  env:
    APP: "myacademy"
    COMPOSE: "/home/ubuntu/compose/docker-compose.yml"
  with:
    username: ubuntu
    host: $
    key: $
    envs: APP, COMPOSE
    script_stop: true
    script: |
      sudo docker-compose -f $COMPOSE down --rmi all
      sudo docker pull $/$APP:latest
      sudo docker-compose -f $COMPOSE up -d

After

- name: EC2 Docker Run
  uses: appleboy/ssh-action@master
  env:
    APP: "myacademy"
    NGINX: "nginx"
    COMPOSE: "/home/ubuntu/compose/docker-compose.yml"
  with:
    username: ubuntu
    host: $
    key: $
    envs: APP, NGINX, COMPOSE
    script_stop: true
    script: |
      sudo docker-compose -f $COMPOSE down --rmi all
      sudo docker pull $/$APP:latest
      sudo docker pull $/$NGINX:latest
      sudo docker-compose -f $COMPOSE up -d

5. 결과 확인

---

NGINX를 위한 모든 작업이 끝났다.

코드 PUSH 후, Github Actions에서 CI/CD가 성공하면 컨테이너가 2개 올라올 것이다.

확인해보자.

제대로 올라왔다. 이제 배포 주소 뒤에 :8080을 붙이지 않아도 된다.

References

• InvalidConfigDataPropertyException
• linux chmod 사용법
• Github Action에서 Permission Denied가 발생할 때
• Github Action With Gradle
• 빌드 시 2가지 jar가 생성되는 현상