Devops Day 40 (5.1) Project 2 AWS 배포 자동화_Day3

실습과제: 프론트엔드 배포 자동화
Bare minimum requirement

- 프론트엔드 프로젝트의 배포 자동화를 구현합니다.

- GitHub Action 또는 CodePipeline + CodeBuild 조합 중 하나를 선택해서 구현합니다.

- 프론트엔드의 변경사항이 S3에 배포가 되는지 확인합니다.

- 정적 웹사이트 설정을 통해 S3 웹사이트 URL로 접근 시 웹 페이지가 제대로 보여야 합니다.

 

1. Github Repository 에서 project2_frontend 폴더 clone 한 후에 npm install -> npm run start시 4000번 포트를 통해 프론트엔드가 작동하며, WAS는 http://localhost:3000을 바라봅니다.

2. Codebuild / Github Action 실행하기 위해 Project2-frontend 폴더에 buildspec.yml 파일 생성합니다.
 - 새로운 codepipeline 생성하고 이를 연결 할 로드 벨런서 + S3 버킷을 생성합니다.
 - 버킷 권한에서 버킷 정책 설정해야 Pipeline에서 권한이 있습니다.

- buildspec.yml 파일에 build directory가 잘 못 되어 있어 수정하고 다시 자동화 했을 때 정상적으로 완성됐습니다.

- 그전에 Base directory : project2-frontend/build 로 했을 때 문제가 생겼지만 상단 코드처럼 변경 하니깐 이상없이 완료 됐습니다.

- build는 완료 하였지만 index.html 이나 build 압축이 풀지 않아 aws pipeline에 들어 수정해야합니다.
- Pipeline에 들어가 스테이지 편집:deploy에 들어가 수정 버튼 눌러 들어갑니다.

- 들어간후에 “배포하기 전에 파일 압축 풀기” 설정 체크 해야합니다.

- 수정 후 저장하고 pipeline 위에 “변경 사항 릴리스” 실행하면 다시 빌드 및 배포 합니다.

- 압축이 풀이면서 index.html 파일이 생성됩니다.
- index.html 들어가면 하단 사진과 동일하게 error 가 뜹니다.

- 압축된 파일들이 폴더안에 문제가 생긴 error로 인해 폴더 삭제 후 같은 파일들은 객체로 바로 업로드 하고 버킷 정책 수정 하고나서 도메인 들어가면 웹페이지가 잘 나옵니다.

실습과제: 프론트엔드 HTTPS 적용

- CloudFront를 이용하여, S3 정적 웹사이트를 캐싱합니다.

- Route 53을 이용해 https://www.yourdomain.click의 트래픽이, CDN(CloudFront)에 연결되도록 만들어야 합니다.

1. AWS Cloudfront에 들어가 새로운 배포 생성에 들어갑니다.
 - 주의점 : 그전에 같이 도메인으로 만든 내역이 있으면 도메인 제거 해야합니다.

- 도메인명 기입하고 웹 사이트 엔드포인트 사용 선택합니다.
- 기본 캐시 동작은 그대로 유지 합니다.

- 다음 설정에 들어가 SSL 선택, CNAME 도메인명 기입, 루트 객체 “index.html’ 기입
- 배포 도메인 링크에 들어가면 frontend 페이지가 보입니다.

 

미션 9 -> 미진행으로 추후 업데이트 예정 ㅠ ㅠ