[React] Docker + Nginx + GitHub Actions 프로젝트 배포하기 (2)

리액트 프로젝트를 깃허브 액션을 통해 도커 허브에 푸쉬하는 과정까지는 이전 글에.

 

조직 내에 deploy용 레포지토리를 하나 파서 사용한다. 이곳에선 도커 컴포즈를 이용해 백엔드, 클라이언트, nginx 세개의 이미지를 받아와 실행한다. 먼저 깃허브 액션부터.

prod-deploy.yml

name: Deploy to Ec2
on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@master

      - name: create remote directory
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ubuntu
          key: ${{ secrets.KEY }}
          script: mkdir -p ~/srv/bankids

      - name: copy source via ssh key
        uses: burnett01/rsync-deployments@4.1
        with:
          switches: -avzr --delete
          remote_path: ~/srv/bankids
          remote_host: ${{ secrets.HOST }}
          remote_user: ubuntu
          remote_key: ${{ secrets.KEY }}

      - name: excuting remote ssh commands using password
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ubuntu
          key: ${{ secrets.KEY }}
          script: |
            sh ~/srv/bankids/deploy.sh
            echo "start docker-compose up: ubuntu"
            sudo docker-compose -f ~/srv/bankids/docker-compose.yml pull
            sudo docker-compose -f ~/srv/bankids/docker-compose.yml up --build -d

create remote directory

• 레포지토리 secret에 저장된 호스트 주소와 pem key를 이용해서 EC2에 접속한다.
• 초기에 디렉토리가 없으면 생성한다.

copy source via ssh key

• ssh를 이용해 rsync를 통해 원격 폴더에 파일을 배포한다..?
• 액션이 감지된 레포에서 리눅스로 소스를 복사해오는 것 같음

excuting remote ssh commands using password

• EC2에 접속해, script에 작성한 소스를 실행한다.
• deploy.sh 을 실행한다. Deploy.sh 에선 도커를 실행하기 전에 필요한 작업을 수행할 쉘파일을 작성한다. 내용은 구글링하면 다 나오니까 생략.
  (도커와 도커-컴포즈가 설치되어 있지 않으면 설치한다.)
• -f 옵션은 docker compose 설정파일의 경로를 지정해줄 때 사용한다.
• Up : 도커 컴포즈에 정의되어 있는 모든 서비스 컨테이너를 한번에 생성하고 실행한다.
• Pull : 이미지의 최신본을 가져오는 듯..?

 

docker-compose.yml

프로젝트 전체가 배포가 되기 위해선 스프링 서버, 리액트, nginx 웹서버 세개가 모두 돌아가야 한다. 여러개의 컨테이너의 실행을 한번에 관리하기 위해 도커 컴포즈를 사용한다.

version: "3"
services:
  backend:
    image: ******/bankids-server-prod:main
    container_name: backend
    hostname: backend
    expose:
      - "8080"

  client:
    image: ******/bankids-client:main
    container_name: client
    ports:
      - "3000:3000"

  nginx:
    depends_on:
      - backend
      - client
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - "80:80"

위에서 언급한 세개의 서비스로 구성되어 있다. 허브에서 해당 도커 이미지를 가져온 다음 client라는 이름으로 컨테이너를 만든다. 도커 허브에 push하는 것에 대한 내용은 저번 글에서 정리했다. client의 포트포워딩은 3000:3000, nginx는 80:80. 순서대로 <호스트 포트>:<컨테이너 포트>이다.

 

nginx/default.conf

server{
    listen 80;
    server_name ******.com;
    location / {
        proxy_pass http://client:3000;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    }
}

deploy 디렉토리의 nginx 설정이다. 클라이언트와 연결된 서버 블록만 가져왔다. 80번 포트를 listen한다. 아까 도커 컴포즈 파일에서 nginx 컨테이너를 만들때 80번을 열어놨었기 때문에. https 설정은 route53 로드밸런서를 이용해 뭐 어쩌구저쩌구 했다고 한다. 잘 모름.

server_name에 등록한 도메인으로 요청이 오면 프록시 패스를 이용해 http://client:3000으로 돌려준다. client는 도커 컴포즈로 생성한 리액트 프로젝트 컨테이너의 이름이다. client 컨테이너는 3000번 포트로 열려 있다.

 

    server {
    listen 3000;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    error_log /var/log/nginx/api_error.log;
    access_log /var/log/nginx/api_access.log;
   }

저번 글에도 올린, client 레포지토리의 nginx 설정 파일이다. 여기선 3000번 포트를 열고 대기하고 있다가 요청이 들어오면 해당 경로에서 파일을 찾아서 호스팅해준다.

즉, nginx가 다른 nginx로 감싸져 있는 형태. deploy 에서 실행된 nginx가 80에서 받고 있고, 웹사이트 도메인으로 요청이 들어오면 client 컨테이너의 3000번 포트로 프록시로 돌려준다. client에서 말아올린 도커 안에 있는 nginx에선 3000번을 열고 있기 때문에 요청이 도달하게 되는 것.

성공적으로 테스트페이지가 배포된 것을 확인할 수 있다. 도커를 이용해서 배포를 세팅한건 아예 처음이었지만 예상보다 흐름을 이해하는게 쉽게 끝났다. 라이징캠프 어쩌면 도움 되는걸지도..?

 

---

 

 

민준이가 그려온 아키텍쳐. 저희 앱은 이렇게 배포 된답니다.