시작하기에 앞서

이번 사이드프로젝트를 진행하면서 백엔드파트분께서 CI/CD공부를 하셔서 백엔드와 같은 방법으로 프론트도 CI/CD 구축하는게 어떻겠냐고 하셨다

처음에는 그냥 vercel로 하면 편하게 CI/CD를 구축할 수 있는데 굳이… 라는 생각이 들었지만 다시 생각해보니

언제까지 외부의도움(??)에만 기대어서 할 수 도없다고도 생각이들기도하고 언젠간 나도 공부해서 EC2에 배포 해봐야지라는 생각을 드디어(?) 실천할 수 있는 기회가 생겨서 이번 기회에 CI/CD를 구현해볼 생각이다

최종 목표로는 aws+ githubAction+Docker를 사용해서 무중단배포를 할 계획이다...

일단은 한번도 배포를해보지 않았기 때문에 갈길이 멀기때문에 차근차근 하나하나 아래의 순서로 할생각이다

1. EC2에 수동으로 배포해보기
2. github action을 사용해 EC2에서 self-hosted로 CI/CD
3. github action을 사용해 dockerhub에 푸시 -> EC2에서 self-hosted로 docker pull 받아서 CI/CD

총 이렇게 3단계로 나눠서 연습해볼 것이다

이 이후에는 사이드 프로젝트에서 서버에서 배포하는 방법까지 알아보고 배포하는과정까지 이어 나갈것이다
이왕 해보는거 차근차근 빌드,배포,EC2,docker 등등 왜 필요하고 이걸 사용하는 이유에 대해서도 알아보려고 한다

빌드?

컴파일 된 코드를 실행할수 있는 상태로 만드는 작업

배포

빌드가 완성된 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치시키는 일

CI/CD

CI는 지속적인 통합으로 간단히 말하자면 빌드/테스트 자동화 과정이다.

즉 깃허브에서 특정 브랜치에 commit이나 push 될때 해당 코드를 바탕으로 빌드하고 테스트코드를 실행하여 문제가 있는지 없는지 자동화하는 과정이다.

CI를 성공적으로 구현할 경우 애플리케이션의 코드의 변경사항이 있을 경우 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다.

CD는 지속적인 배포로 간단히 말하면 배포의 자동화 과정이다.

CI가 문제없이 진행이 된다면 자동으로 배포하는 과정이 CD이다.

그래서 CI/CD가 왜 필요한데??

• 개발 편의성 증가
• 테스트 코드를 통과한 코드만 레포에 올라 가기때문에 좋은 코드 퀄리티를 유지 할 수 있다
• 한번 구축하고 나면 개발에만 신경쓸 수 있도록 도와준다

굳이 필요한 작업인가 라는 생각이 들 수 도있지만 처음에 하고나면 프로젝트를 진행하면서 자동화 구축으로 인해 편리하다고 느낄 수있다

CI/CD의 툴로는 Jenkis 와 github action 등등이 있다

AWS vs Vercel

지금까지 배포를 Vercel로 해봤는데 정말 간편하고 CI/CD도 자동으로해주고 시간도 안들이고 정말 잘 사용했다 하지만… 많은 사람들의 이야기를 들어보면 Vercel과 netlify와 같은 사이트를 이용해 배포를 하지않는다고 한다

이유는 무엇일까?
이유로는 자유도가 떨어진다 라고 말을한다

사실 Vercel과 netlify를 사용하면 내가 선택한 기준이 아닌 정해준데로 배포를 해야되는것때문이다 그리고 현엽에서는 직접 배포하는 경우도 많기때문에
(물론 프론트에서 할일 이 있을까 싶지만)

어쨌든 이번기회에 AWS를 사용해서 배포를 해보자

일단처음으로 AWS에 접속하여 인스턴스를 빌려보자

인스턴스란??

서버를 돌리기위해 내 컴퓨터를 계속 켜놓으면서 서버를 돌릴 수 는 없기때문에 컴퓨터 한대를 빌린다고 생각하면 된다

1. AWS에 접속하여 EC2에들어가 인스턴스를 빌려보자

처음에는 os설정 해야하는데 ubutu로 선택했다.

2. 인스턴스 유형

인스턴스 유형은 아래 그림과 같이 종류가 있는데 일단 프리티어라고 되어있는 공짜인걸 사용했다.

3.키페어 생성

키페어 생성은 내가 빌린 인스턴스에 들어갈때 필요한 키라고 생각하면 된다

기존에 있는 키페어를사용하거나 키페어를 생성하면된다

• 키페어는 한번만 발급 받을 수 있어서 잃어버리지 않게 조심하자
  

4.네트워크 설정

vpc와 서브넷을 따로 사용 한다면 해당정보를 선택하고 없다면 기본값으로 설정하면된다. 보안 그룹은 어떤 포트로 들어오게 할지 보안을 담당하는곳이라고 보면된다

보안그룹 규칙을 추가해서 포트 443(https)와 80(http)를 추가했다

5.스토리지 설정

스토리지는 인스턴스의 디스크 용량이다

프리티어(공짜)는 최대 30GB여서 30으로 설정했다.

이러한 과정을 완료했으면 인스턴스 시작버튼을 누르면 끝이다.

6. 터미널에서 인스턴스 접속

이후에는 터미널에서 아래와같은 예시를 입력하되 디렉토리를 잘 확인하고 키의 위치에 맞게 입력하면 된다

ssh -i "test-key.pem" ubuntu@ec2-1-11-11-11.ap.northeast-2.compute.amazonaws.com

성공적으로 된다면 아래와같이 접속될것이다

처음 빌린 인스턴스는 아무것도 없는 컴퓨터라고 보면 되서

우리가 실행할 프로젝트의 필요한 패키지들과 노드를 아래와 같이 설치 해주면 된다

$ sudo apt-get update #update 진행 
$ sudo apt-get install -y build-essential 
$ sudo apt-get install curl #node.js 다운로드 하기위해 사용 
$ curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -- #Node.js의 공식 배포판인 Nodesource에서 Node.js를 설치하기 위한 설정을 수행하는 스크립트를 다운로드하고 실행합니다. 이 명령어는 Node.js 18.x 버전을 설치하도록 구성합니다.
$ sudo apt-get install -y nodejs
$ sudo npm install yarn --location=global #yarn 전역 설치

그다음 우리가 실행할 프로젝트를 깃에서 클론받아서

yarn install
yarn start 

해주면 된다

성공적으로 된다면 아래와같이 뜰것이다

하지만 여기서 끝난게 아니다

우리가 배포한 프로젝트는 리액트기반의 프로젝트라 보이는 거와 같이 3000번 포트로 실행 되어 있어서 들어갈 수 가 없을것이다

우리가 앞서 aws에서 설정한 보안그룹에서 80번 포트와 443번 포트 다 열어 놔서 된거아닌가? 라는 생각이 들 수 있다

하지만 우리가 설정한 포트는 ec2서버의 포트이다
우리는 내부적으로 3000번포트를 운영해서 서버를 돌리고 있기 때문에 이포트를 연결시켜 놓을 작업이 필요하다

만약 ec2서버에서 3000번 포트도 열어 놓았다면 입력할 주소에 :3000을 붙이면 자동으로 연결은 시켜줘서 들어갈 수는 있다

하지만 매번 들어갈때마다 :3000을 뒤에 입력할 수는 없으니 80번 포트와 연결 시켜 보도록 하자

아래와 같이 입력하면 80포트로 들어온 사용자를 3000번 포트로 보내준다

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

이렇게 까지 한다면 인스턴스에 서버 띄우기 성공이다

다음으로는 github action을 사용해서 ec2에 ci/cd를 구축해서 띄우기를 해볼예정이다