[AWS 자동 배포 시스템] 2. 웹 서버(CDN) 구축(S3 + CloudFront + Route53 + ACM)
프론트 웹 서버부터 구축하려고 한다.
구축 아키텍쳐는 S3 퍼블릭 엑세스를 차단하여 CloudFront를 통해서만 외부 접속이 가능하게 구현한다.
또 마지막으로 외부에서 구매한 도메인을 Route53 + ACM과 연동한다.
먼저 S3 버켓을 생성하자.
어려운 작업은 없다. 2022년 2월 16일 현재 기준으로는 버킷 이름만 입력 후 생성하면 된다.
리전은 서울로 하였다.
S3 버킷 도메인으로는 직접 접근하지 않을 것으로 꼭 퍼블릭 엑세스를 차단하자.
버킷 생성 후 웹서버 테스를 위한 index.html를 업로드 해놓자.
샘플 코드를 넣어 놓겠다.
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Velnova</title> </head> <body> Hello! Velnova! </body> </html>
다음으로 인증서를 생성하자.
인증서는 꼭 버지니아 북부 지역에서 생성해야한다.
그래야만 CloudFront에서 인증서를 가져올 수 있다.
검증을 위한 Route53 레코드를 생성한다.
아래와 같이 발급되어 인증서를 사용할 수 있다.
다음으로 아래와 같이 레코드를 하나 생성한다.
이제 레코드는 *를 사용하여 front.velnova.me, server.velnova.me 등으로 사용할 예정이다.
CloudFront 설정을 하자.
원본 도메인은 S3 버켓을 선택한다.
다음으로 S3 버킷은 CloudFront를 통해서만 접근함으로 S3 버킷 엑세스를 활성화 후 새 OAI 생성 후 선택한다.
버킷 정책 업데이트가 누락되어 추가하였다.
대체 도메인 이름(CNAME) 설정하자. Route53에서 CNAME으로 연동할 것 이다.
또 생성한 인증서를 선택 후 기본값 루트 객체를 S3 버킷에 업로드한 index.html로 설정후 생성한다.
마지막으로 Route53에서 CloudFront와 연결을 해주면 된다.
아래와 같이 정상적으로 호출되었다!
추가로 React, Vue와 같은 SPA에서 새로고침 시 403 에러가 뜨는 것을 해결하기 위해 CloudFront에 오류 페이지를 추가해줘야 한다.
