[AWS] 프론트 배포 흐름 정리

 

본 포스트는 각 단계별로 상세히 기술한 게 아니라 흐름별로 정리하여
처음 배포할 때 보고 따라하기엔 부적합 합니다.
배포를 다 한 상태에서 흐름 정리용으로 보시는 것을 추천드립니다. 

 

 

프론트 배포는 AWS의 S3의 정적 웹 사이트 호스팅을 이용하여 진행하였다.

(Vercel을 이용한 매우 편한 방식도 있으니 참고)

 

 S3에는 css,fonts,img,js폴더가 업로드 되어야 하는데,
프론트 코드가 있는 위치에서 npm run build 명령어를 치면 dist폴더가 만들어진다. 

해당 폴더에 있는 자료를 모두 업로드 하면 된다.

npm run build를 하면 소스코드가 있는 폴더에 dist폴더가 자동으로 만들어진다.

그리고나서 아래 버킷 웹사이트 엔트포인트로 들어가서 프론트 화면이 잘 떠지면 성공한 것이다.

 

그리고 접속 도메인을  깔끔하게하기 위해 Route53에 연결, Https 인증서 처리를 위해 CloudeFront에 연결할 필요가 있다.

우선, CloudeFront를 생성하는데 Original Domain을 '웹사이트 엔드포인트 사용'하여 s3와 연결시킨다.

그리고 아래 인증서 요청을 클릭하고, www로 시작하는 내 도메인을 입력하여 SSL인증서를 생성한다.

그러면 내  도메인을 route53에 레코드 생성 버튼이 생기는데,

버튼을 눌러 인증서와 도메인을 연결시켜준다.
이 레코드 생성 버튼은 HTTPS 적용을 위한 SSL 인증서가 이 도메인이 진짜 내 도메인이 맞는지 확인 작업(도메인 검증)을 거쳐야하기 위한 것으로 이 버튼으로 인해 Route53에 검증용 레코드가 만들어지는 것이다. 이 검증용 레코드를 통해 CloudeFront에서 HTTPS가 정상 작동하게 된다. 

 

그런 다음 Route53에서 www~로 시작하는 도메인에 대한 레코드에서 트래픽 라우팅을 CloudeFront로 잡아주면

프론트 배포가 완료된다.

 

이로써 사용자가 www.도메인으로 접속하면 Route53이 CloudeFront로 라우팅이 되고 이곳에서 HTTPS인증서를 통해 암호화 통신이 이루어진다. 그리고 CloudeFront는 original domain인 S3 정적 웹호스팅 서버로 요청을 전달하고, 이에 대한 데이터를 전달받고 다시 HTTPS로 사용자에게 전달하게 됨으로써 프론트 배포가 완료되는 것이다.