CI/CD와 클라이언트 빌드, 배포에 대해서

쉐런·2022년 10월 12일

CI/CD는 몇 가지의 다른 의미를 가지고 있다.

CI는 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미한다.
- CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합됨
- 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결
CD는 지속적인 서비스 제공 및 지속적인 배포를 의미하며 두 용어는 상호 교환적으로 사용
- 두 가지 의미 모두 파이프 라인의 추가 단계에 대한 자동화를 뜻하지만
- 때로는 얼마나 많은 자동화가 이루어지고 있는지를 설명하기 위해 별도로 사용되기도 함

현대의 웹앱은 정적 웹페이지, AJAX 등의 기술을 사용하여 SPA로 되면서 고도화 되었다.
- 클라이언트의 규모가 커지고 웹사이트 구성요소를 각 파일로 분리하는 모듈화가 이뤄지면서
  단일 파일로 자바스크립트나 페이지를 만드는 작업이 더욱 고도화 됨
고도화된 클라이언트 웹 앱은 수많은 모듈로 이루어져 있다.
이처럼 수많은 모듈을 하나로 묶어주는 작업을 번들링(bundling)이라고 하며 이런 일련의 과정을 소프트웨어 빌드라고 부른다.
즉, 소프트웨어 빌드는 소스코드를 실행 가능한 결과물로 변환하는 작업이다.
다양한 모듈은 정적 파일로 결과가 만들어져야 하고 이러한 빌드 과정은 배포에 필수적!
+ 예를 들어 React 프로젝트를 내 로컬 컴퓨터에서 자체적으로 실행할땐 npm start로 개발 서버를 실행해야함
- 하지만 인터넷 상에 배포할 때에는 이러한 개발 서버를 실행할 필요가 없으며 정적 파일을 호스팅하는 서비스에 결과물을 업로드 하기만 하면 됨
Create React App으로 생성한 리엑트는 npm build 명령어가 package.json 파일에 포함되어 있어서 이 명령어로 모듈을 정적인 파일로 만들 수 있다.

로컬 활경에서 개발한 코드를 실제 서비스로 만들기 위해서는 빌드 과정과 이를 웹에 노출시키는 배포과정이 필요하다
-> 빌드를 통해 정적 파일이 웹을 통해 제공되려면 정적 파일을 제공할 웹 서버가 필요하다!

AWS에서 아이디와 비밀번호를 만들고 클라이언트 배포를 위해 S3를 검색해서 들어간다.

버킷에는 깃허브 아이디가 연결되어 있어서 깃허브 아이디를 검색하면 버킷으로 들어갈 수 있다.

그리고 내가 만든 클라이언트쪽 코드를 번들링 하고 .env에 서버의 주소를 잘 넣어야 한다!

# .env.example 의 내용을 참고하여, .env 파일을 생성하고 build합니다.
REACT_APP_API_URL=http://ec2-{your-address}.ap-northeast-2.compute.amazonaws.com

그리고 나서 npm install, npm run build로 번들링 실행!!
=> Crete-react-app은 이렇게 바로 번들링이 가능해서 빠른 배포가 가능하다!

잘 됐으면 실행 결과는 build 디렉터리에서 확인할 수 있다.

그러고 난 후 build 디렉터리의 모든 파일을 자신의 버킷 루트 경로에 넣어야한다
+ 이때 주의해야 하는 것은 build 파일안에 모든 파일을 드레그 앤 드랍 해야 하고
+ build 폴더 자체를 넣지 않도록 주의한다.
그리고 나서 버킷 - 속성 - (최하단) 정적 웹사이트 호스팅에서 url을 클릭해서 잘 열린다면 성공!