Github Action + Docker + Nginx + React 야매 CI/CD 완성기

📒 Github Action + Docker + Nginx + React 야매 CI/CD 완성기

---

📌 계기

빈약한 서버 지식을 갖고 있었던 저는 입사 후 사내 구축된 CI/CD 환경을 보고 신문물을 만난 원주민마냥 깜짝 놀랐습니다.

 

이렇게 좋아보이는 기능을 제가 직접 해보지 않고선 직성이 풀리지 않죠. 

 

그러다 어느날 몇 개월간 사용하지 않아 먼지 쌓여있는 개인 윈도우 노트북이 눈에 들어왔고,

기존 데이터를 밀어버린 후 우분투를 설치해서 하고 있던 개인 프로젝트를 자동으로 배포할 수 있게 도전해 봤습니다.

 

서버 쪽 기초 하나 없이 삽질했던 기억에 저와 같은 상황에 있으신 분들에게

조금이나마 도움이 되었으면 하는 마음에서 쓴 글이니 기술적인 부분에서는 많이 부족할 수 있습니다.

 

또한 분량 때문에 기능 구현에만 초점을 두었기 때문에 디테일한 것들은 많이 생략되어 따로 참고 부탁드립니다.

---

📌 Docker 설치

// ubuntu 도커 설치
$ apt-get install docker

그냥 도커 없이 nginx를 실행해 배포해도 됐지만 아무것도 모르는 저도

이미지와 컨테이너로 구동되는 Docker가 편리하겠다고 생각해 도커로 Nginx를 구동하기로 했습니다.

---

📌 Nginx 컨테이너 올리기

 

# nginx 이미지 pull
$ docker pull nginx

# nginx 컨테이너 생성 및 실행
$ docker run --name myNginx -d -p 8082:80 nginx

# docker 실행 컨테이너 확인
$ docker ps

도커 이미지를 pull 받아줍니다.

 

그다음 이미지를 컨테이너로 생성, 실행해줍니다.

 

myNginx 부분은 본인이 원하는 컨테이너 명칭이고,

외부와 컨테이너의 포트를 이어주는 옵션은 -p [외부포트:컨테이너 내부포트]로 설정할 수 있습니다.

 

저는 80, 8080, 8081 포트를 이미 사용 중이라 8082를 사용했지만

점유하고 있는 포트가 없는 분은 웹 서버 기본 포트인 80으로 설정해 주시면 됩니다.

---

📌 Github Action, self-hosted runner

github action은 개발 워크플로우를 자동화시켜주는 도구로써 자체 제공하는 서버가 있지만

저는 개인 서버를 갖고 있기 때문에 Runner를 직접 설치해 보겠습니다.

 

자신의 리포지토리에 접속 후

Setting > Actions/Runners > New self-hosted runner 버튼을 클릭해 줍니다.

 

자신의 운영체제와 아키텍처를 선택해 주면 다음과 같이 친절하게 Runner를 설치 및 실행할 수 있는 명령어를 제공합니다.

 

명령어를 보면 다음과 같이 진행됩니다.

1. 폴더 생성 후 이동
2. 압축파일 다운로드
3. 압축 해제
4. 러너에 리포지토리 토큰 설정
5. 실행

제가 처음에 막연하게 어려웠을 것이라고 생각했던 것과 달리 정말 간단합니다.

 

그러면 러너 파일을 설치 및 실행하기 위해 아까 올려둔 nginx 컨테이너에 접속해 보겠습니다.

 

# 컨테이너 접속
$ docker exec -it myNginx bash

exec 명령어를 통해 bash 쉘을 실행해 컨테이너에 접속합니다.

 

러너 명령어를 입력하기 전에 러너 파일의 유효성을 검증하기 위해 shasum 패키지가 필요한데

컨테이너에 기본적으로 설치가 되어 있지 않아 먼저 해결하겠습니다.

 

# apt update
$ apt-get update

# shasum 설치
$ apt-get install libdigest-sha-perl

 

그럼 기본적인 준비가 완료 됐으니 위에서 제공한 명령어를 순서대로 실행시켜 파일을 받은 뒤 압축을 해제합니다.

---

🔎 Runner, Must not run with sudo

다음 Configure 부분의 명령어를 실행시키면 되는데

Must not run with sudo라는 경고가 뜨며 토큰 설정이 안 되는 경우가 있습니다.

 

이는 루트 사용자로 명령어를 실행해서 뜨는 경고로
다음과 같은 토큰 설정과 러너 실행 스크립트 파일에 실행을 막는 조건문이 심어져 있습니다.

• run-helper.sh
• config.sh
• run-helper.sh.template

 

보안 때문에 심어진 코드로 보이나,

개인 서버 연습용으로 사용하기 때문에 다음과 같이 RUNNER_ALLOW_RUNASROOT를 전역환경변수로 등록해 해결했습니다.

# 전역환경변수 등록
$ export RUNNER_ALLOW_RUNASROOT="1"

# 환경변수 확인
$ echo $RUNNER_ALLOW_RUNASROOT

---

위 문제가 해결되었다면 제공한 Configure 명령어를 실행해 토큰을 등록해 주고

러너 설정을 마무리해 주면 다음과 같은 화면을 볼 수 있습니다.

 

저는 귀찮아서 전부 엔터키로 스킵했습니다.

 

설정까지 마쳤으니 다음과 같은 명령어로 러너를 실행시켜 보겠습니다.

$ nohup ./run.sh &

$ ./run.sh로 그냥 실행시켜도 되지만

nohup을 통해 터미널을 종료해도 실행되도록 하고

& 옵션을 통해 백그라운드에서 실행되도록 합니다.

 

정상적으로 실행되었다면 다음과 같이 깃허브에 러너가 idle 상태로 표시되게 됩니다.

---

📌 Github Action, workflow

이제 러너 준비는 끝났고 원하는 자동화 워크플로우를 작성하기 위해

프로젝트 폴더 루트에 다음과 같이 폴더와 yml 파일을 생성해 줍니다.

 

깃허브에서 워크플로우를 인식시키기 위해 폴더명은 꼭 .github/workflows로 지정해 주세요

 

그리고 다음과 같이 파일을 작성해 줍니다.

 

분량 때문에 기본적인 것만 주석으로 설명하고 나머지에 대한 설명은 생략하겠습니다.

name: CD

on:
  push:
    # main 브랜치에 푸시하면 작동
    branches: [ main ]

jobs:
  build:
    runs-on: self-hosted
    steps:    
      # 제공하는 checkout 액션을 이용해 리포지토리 가져오기
      - uses: actions/checkout@v3
      
      - run: pwd
      - run: ls -al
      
      # 노드 액션을 통해 npm 명령어 사용
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm install
      - run: npm run build

 

그다음 테스트를 위해 커밋 후 푸시하면 깃허브에서 성공적으로 빌드까지 마무리된 것을 확인할 수 있습니다.

---

📌 Nginx 설정

자동으로 빌드까지 완료했다면 정적 파일들을 서빙할 웹 서버인 Nginx 또한 설정해 주어야겠죠?

# default.conf
server{
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
    	# 빌드 파일이 존재하는 폴더 경로
        root   /actions-runner/_work/runner-ex/runner-ex/build;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

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

nginx 설정파일은 listen 부분에 컨테이너를 생성하며 명시했던 컨테이너 내부 포트를 작성해 주고

root 부분에 빌드 산출물이 존재하는 build 폴더 위치를 작성해 주면 끝입니다.

 

그런데 nginx 파일을 고정으로 박아두어도 되지만 수정이 필요할 때

workflow에 포함되어 자동화된다면 정말 편하겠죠?

 

# 기존 설정 파일 삭제
- run: rm /etc/nginx/conf.d/default.conf
# checkout 하며 받아온 설정파일 이동
- run: mv default.conf /etc/nginx/conf.d/
# 변경사항 적용을 위한 nginx 재실행
- run: service nginx reload

그럼 deploy.yml 파일의 steps에 위와 같은 코드를 추가해 주도록 합니다.

 

이제 푸시하면 성공적으로 마무리 됐음을 확인할 수 있습니다.

 

그럼 제대로 배포가 되었나 확인해 보겠습니다.

제 ip 주소와 컨테이너 외부 접속 포트인 8082를 이용해 접속해 보니 잘 작동합니다!

---

글이 생각보다 많이 길어졌는데 처음으로 도전하시는 분들께 많은 도움이 되었으면 합니다.

 

읽어주셔서 감사합니다!