https://preiner.tistory.com/12
https://happysisyphe.tistory.com/47
s3+cloudfront를 이용한 배포와 github action을 통한 자동배포
: s3, netlify, vercel
윗 부분 정리하기!!!!!
지금껏 프로젝트에 있어서, 화면 구현 즉 개발 단계까지만 진행이 되었다. 하지만 이번 프로젝트에서는 효율적인 코드 구성과 함께 직접 배포까지하여 서비스화 시키는 것이 목표였다. 하지만,,, 한 번도 프론트엔드 배포를 해본 적이 없기에, 하나부터 열 까지 모두 공부를 해야만 했다. 따라서 이번 글에서는 프론트엔드의 배포에 대한 전반적인 과정에 대해 공부한 내용들을 작성해보려고 한다.
또, 나는 애초에 프론트가 배포를 왜 해야하는 지 조차 몰랐다는.....그래서 이것저것 찾아서 공부해본 결과다.
즉, 서비스화 하기 위해서는 백과 프론트 모두 서버를 배포해야함. 프론트의 서버는 정적 리소스를 받아오는 것이고, 백의 서버는 was(web application server)로 데이터 관련 처리들을 해서 응답을 돌려주는 서버. 우리는 그 응답을 받아서 프론트 웹 서버에 정보들을 뿌려주는 것임. 프론트 서버를 배포하는 방법은 s3, netlify, vercel 이 있음. 그리고 그 배포와 빌드, 테스트를 자동화해주는 것이 ci/cd 기술임.
그렇다면, 프론트의 각 배포 방법들과 프론트의 배포에 대해서 정리를 해보겠다.
😀 프론트엔드 배포 방법
1. S3+cloudfront
S3 란?
cloudfront 란?
2. EC2
EC2 란?
3. Netlify
https://velog.io/@eliz/%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B0%B0%ED%8F%AC-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0
https://velog.io/@rkio/Netlify-Netlify%EB%A1%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
4. vercel
😀 1. CI/CD란?
개발 > 빌드 > 테스트 > 릴리즈 > 배포
: 일반적인 애플리케이션 개발 단계이다. 지금까지는 단지 화면을 구현하는 '개발'에서 그쳤다.
CI/CD는 지속적 통합(Continuous Integration)/지속적 배포(Continuous Deployment) 또는 지속적 제공 (Continuous Delivery) 의 줄임말로, CI는 한마디로 빌드 및 테스트 자동화 과정, CD는 배포 자동화 과정을 뜻합니다.
- CI - 지속적인 통합으로, 새로운 코드가 작성되었을 때 주기적으로 빌드 및 테스트가 진행되면서 공유되는 repository에 merge 되는 것
- CD - 지속적인 배포(제공)으로, CI단계를 거친 코드를 실제 운영 서버에 자동 배포 하는 것
-> 개발, 빌드, 테스트, 배포까지 모든 단계를 자동화 하여 사용자에게 빠르게 배포하는 것
😀 CI 단계
: 우리는 github를 통해 협업을 진행한다. 통합한 코드를 빌드하고 테스트하여 버그가 발생하면 버그를 해결한다. 이 과정에서 빌드와 테스트를 자동으로 진행해주는 것이다.
- 여러 개발자가 관련된 코드를 작업하여 발생하는 충돌 문제를 해결할 수 있다.
- 커밋 할 때 마다 빌드와 자동 테스트가 이루어져 잘못된 merge를 예방할 수 있다.
- 코드 검증에 들어가는 시간이 줄어들며, 개발 편의성이 좋아진다.
-> 특정 브랜치에 push 되었거나, PR 요청하였을 때 확인하여 코드 테스트 및 통합을 진행
😀 CD 단계
: CI 단계가 끝나면 배포할 준비가 되었다. 자동으로 배포하여, 사용자는 항상 최신 버전의 서비스를 사용하게 된다. 일일이 deploy하지 않아도 되며, 배포보다 개발에 집중할 수 있게 된다.
- 지속적 제공 (Continuous Delivery)
- CI를 마치고 릴리즈가 가능한 상태라면 배포까지 자동으로 해주는 것 - 지속적 배포 (Continuous Deployment)
- CI를 마치고 릴리즈가 가능한 상태라면 사람의 검증을 통해 수동으로 배포하는 것
😀 CD/CI 툴
: Jenkins, Github Action, CircleCI,TeamCity
😀 Github Action
: 작업 레파지토리에 이벤트 발생 시, 작업을 수행한다
- 누군가 PR을 생성하였다면 코드 변경분에 대하여 테스트
- 누군가 develop 브랜치에 push 하였다면 빌드하고 배포
😀 마치며
프론트엔드 배포에 대해 공부하며, CI/CD의 필요성을 더욱 느끼게 된 것 같습니다. 지금껏 프로젝트를 진행할 때에, 개발까지만 고려했었지 배포까지 고려했었던 적은 이번이 처음이라 배워야할 것도 많아 막막하였습니다. 그럼에도 조금씩 길이 보이는 것 같습니다. CI/CD의 개념에 대해서는 기초가 확실히 잡힌 것 같고, 다음 글에서는 그렇다면 CI/CD 툴을 이용한 세팅과 테스트에 대해서도 포스팅 해보겠습니다.
⭕ 참고자료
