circle-ci 테스트

오늘은 CICD 중에 circle-ci 를 테스트해보기 위해, circle-ci 구축을 한 경험을 공유하겠습니다.

(여기서 말하는 테스트는 사이드 프로젝트에서 CICD툴을 사용하려고 고민중인데, circle-ci 와 concourse 를 테스트해보고 저희의 상황에 더 알맞은 툴을 사용하기 위함입니다.)

 

ps. flowertaekk-dev.github.io/development/circleci-concourseci/ 에 circleci와 concourse CI 의 간단한 비교가 있습니다.

---

우선 CICD란?

    지속적인 통합(Continuous Integration)과 지속적인 배포(Continuous Deployment) 를 합쳐서 CICD 라 부른다.

    (CD 는 Continuous Delivery 의 약자로도 쓰인다. 늬앙스의 차이는 있으나 결국 파이프라인의 자동화라는 맥락에서는 동일.)

---

테스트 방식은 GitHub에 circle-ci를 연동해서 커밋&푸쉬가 일어날 경우, 서버(EC2)에 바로 반영되도록 하겠습니다.

서버에는 간단한 CRA(create-react-app) 을 nginx를 통해 호스팅을 하고 있도록 해 놓았습니다!

---

가장 먼저, 많이 사용되는 듯한(?) CICD의 구축 방식이 어떻게 되는지 알아보겠습니다!

 

이 방법은 각각의 단계에서 해야할 일들이 명확하게 나누어지기 때문에 리소스 관리(빌드 결과물)가 편리하다는 장점이 있습니다.

하지만 AWS S3 와 AWS Code Deploy 를 이용하면 추가적인 비용이 들기 때문에 저는 이 방법을 사용하지 않기로 했습니다.

 

(AWS의 1년간 무료 기간인 경우에는 S3는 무료로 사용가능합니다. 어느정도의 용량제한이 있었던 걸로 기억하는데 단순히 빌드결과물을 저장하는 정도로는 사용하시는데 문제 없으리라 생각합니다!)

 

(AWS Code Deploy는 배포작업이 일어나는 시간만큼만 요금이 부과되기 때문에, 코딩을 열심히 해서 커밋이 많이 일어나게 되면, 그만큼 요금이 나오게 되는 구조이기 때문에 개인 프로젝트 하시는 분들은 주의하세요~!)

 

그래서, 저는 다른 방법으로 아래와 같은 방법을 하기로 했습니다. 단순히 테스트 목적이기도 하고..

이렇게 하면, CICD의 모든 책임을 circle-ci 혼자 지게되지만, 부과적인 비용 지출 없이 구현이 가능합니다.

 

---

이제 circle-ci 를 이용한 환경구축을 시작해볼까요!

 

첫 단계로는 프로젝트를 세팅해야겠죠?

1. GitHub 에 프로젝트를 올립니다! (저는 CRA로 프로젝트를 생성하고 그대로 푸쉬했습니다!)

2. 이제 GitHub에 circle-ci 를 붙이는 작업!

    2.1. circleci.com/docs/2.0/getting-started/ 여기 공식문서에 있는 그대로 했습니다!

3. .circleci/config.yml 수정하기

    3.1. config.yml 는 공식문서를 보시면 GitHub에 있는 프로젝트를 연동하면 자동으로 생성해줍니다!

version: 2.1
# circle-ci 서버에서 빌드에 필요한 기초 환경을 제공해주기 때문에, 적절한 환경이 있다면 아래와 같이 사용!
# circle-ci 공식문서에서 확인 가능합니다! (버전 2.1 부터 가능하기 때문에 주의)
orbs:
  node: circleci/node@1.1

jobs:
  build:
    executor: node/default
    steps:
      # 프로젝트 체크아웃. GitHub으로부터 최신 코드를 pull 받습니다.
      - checkout 
      
      # run 을 통해 빌드에 필요한 스크립트를 작성합니다.
      - run: |
          yarn install
          yarn run build --prod
          
      # scp 로 빌드 결과물을 EC2 에 전송
      - run: |
          scp -o "StrictHostKeyChecking=no" -r ./build/* <user>@<url>:/usr/share/nginx/html/

4. 끝!!

---

이제 위에 있는 순서대로 진행하면서 겪었던 문제들을 공유하겠습니다!

 

사실 scp 하기 까지는 전혀 문제없이 너무 잘 돌아갔습니다!

scp를 하려고 했을 때, 머리 속에 떠오르는 문제는

 

1. circle-ci 는 빌드마다 매번 다른 서버가 할당되기 때문에 EC2 의 보안그룹 설정을 어떻게 해야 할 것인가?

    → ssh 포트를 완전히 개방했습니다. 어차피 ssh로 접속을 한다면 rsa 암호화가 이루어지게 되고, 그러면.. 안전하지 않을까? 하는 생각으로 했지만 혹시 이걸로 인한 문제가 발생할 여지가 있다면 알려주세요! 열심히 배우겠습니다!

 

2. ssh로 접속을 하려면 circle-ci에서 비밀키를 관리할 수 있도록 해야하는데 어떻게 해야 할 것인가? 비밀키가 공개되면 암호를 공개한 것과 다름없기 때문에 GitHub에 올리시면 절대 안 됩니다!

    → 아래와 같은 방법으로 circle-ci 에서 암호키를 직접 관리할 수 있도록 했습니다.

1. circle-ci 관리화면
2. 사이드 바에서 Projects 선택
3. 해당 프로젝트 선택
4. Project Settings 선택
5. 사이드 바에서 SSH Keys 선택
6. Additional SSH Keys 에서 새로운 SSH 추가

    2.1. SSH Key 등록이 에러때문에 잘 진행되지 않거나, 생성하는 방법을 잘 모르시는 분은 공식문서를 참조해주세요.

        support.circleci.com/hc/en-us/articles/360015467253-Adding-SSH-Permissions-fails

Adding SSH Key fails

    2.2. 제가 했던 방법은 아래와 같습니다.

1. ssh-keygen -m PEM -t rsa -C "your_email@example.com"
  1.1. SSH 키 생성
  1.2. 여러가지 질문이 있지만, 전부 엔터로 스킵하면 ~/.ssh/ 에 SSH가 생성이 됩니다!
2. ~/.ssh/id_rsa 파일을 circle-ci 의 SSH Keys 에 등록.
3. 로컬의 ~/.ssh/id_rsa.pub 를 EC2의 ~/.ssh/authorized_keys 에 추가.
  3.1. 기존에 이미 추가되어 있는 내용은 삭제하지 마시고 아래에 한 줄 추가해서 붙여넣기 해주시면 됩니다.

3. scp 테스트 했더니 권한 문제로 실패했습니다. 권한..?

    3.1. EC2의 /usr/share/nginx/html/ 에 있는 파일들의 권한이 외부에서는 작성할 수 없도록 설정되어 있는게 문제였습니다. 권한 변경을 해준 후 다시 scp 하면 성공했습니다.

chmod -R 777 /usr/share/nginx/html/*

---

이상으로 CICD 툴인 circle-ci 의 테스트를 완료했습니다.

부족한 점이 많은 포스팅이기 때문에 지적은 겸손하게 마구마구 받아들이겠습니다!

 

읽어주셔서 감사합니다~!