Frontend/Deploy, CICD

Github Actions, S3, CloudFront OAC로 CICD 전략 구축하기 (3) - 배포 브랜치 전략에 맞는 CICD yml작성하기

그럼 이걸 활용해서 yml을 만들어보자. Github Actions Github Actions는 github에서 제공하는 CICD 툴으로써, 코드 저장소에 어떤 이벤트가 발생했을때 특정 작업을 일어나게 하거나 주기적으로 작업을 반복 실행시키는 일을해준다. 이에 따라 브랜치마다 다른 일을 할 수 있도록 처리해줄 수 있다. 그럼 브랜치마다 어떻게 작동하게 만들지 전략을 수립해보자. 배포 브랜치 전략 수립하기 우리팀은 프론트엔드 코드와 백엔드 코드가 한 레포지토리에 있기때문에, 각 파트별 배포가 필요한 상황이었다. https://github.com/boostcampwm2023/web05-AlgoITNi GitHub - boostcampwm2023/web05-AlgoITNi: 동료와 함께 할 수 있는 플랫폼, ..

Github Actions, S3, CloudFront OAC로 CICD 전략 구축하기 (2) - 서버 자원 생성 + AWS CLI사용해보기

CICD를 구성하기전에 우선은 배포를 위한 서버 자원(S3, CloudFront, IAM)을 생성하고, AWS CLI를 사용해보자. S3만들기 클라우드 프론트를 통해 OAC설정을 할것이기에 ACL비활성화, 퍼블릭 엑세스 차단설정을 해도된다. CloudFront배포 만들기 원본 도메인으로 S3 버킷을 연결시켜주자. OAC설정하기 클라우드 프론트로만 S3에 접근할 수 있도록 S3의 정책을 변경해주자 S3에 파일을 업로드 하기 웹 콘솔에서 업로드 버튼 누르기 사실 업로드하는 방법은 간단하다. AWS 콘솔에서 업로드 버튼을 누르면 된다 허허 그런데 git에 push 할때마다, 직접 빌드하고 빌드한 파일을 업로드 하기에는... 우리는 너무 할일이 많고, 충분히 자동화시킬 수 있는 부분이다. 그래서 github a..

Github Actions, S3, CloudFront OAC로 CICD 전략 구축하기 (1) - S3에 CloudFront 끼얹기

들어가며 네이버 부스트캠프의 그룹프로젝트 과정에서 진행했던 AlgoITNi의 배포전략, 선택한 이유, 방법들을 기록해두고자 한다. 프론트엔드에서 배포는 어떻게 이뤄지는가? 프론트엔드의 배포는 결국 html,css,js 정적파일을 서빙하면 끝이다. (SSR 제외) 좀더 세부적인 동작은 이전에 작성한 아래의 게시글을 참고해주면 좋을 것 같다. https://0422.tistory.com/312 프론트엔드 웹서버 직접 만들기 (1) - Content-Type, MIME 프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static ..