우리 서비스의 웹은 큰 기능을 하지 않았기 때문에 간단하게 Django-Template을 이용해 만들어왔다.
이번에 FE(NextJS)가 추가되면서 AWS 아키텍처가 계속해서 변경되었다. 그 중에 아래 사진과 같은 아키텍처로 만들때 여러가지 상황에 대해 기록하려고 한다.
변경 전
위 글에서 적혀있듯이 Django와 Template으로 이루어 져 있다보니 하나의 EC2에서 처리를 했고, SSL인증서 ACM을 이용하기 위해 ALB를 사용하여 https를 처리했다. 굉장히 간단한 구조이기에 아키텍처를 이해하기에 어렵지 않았다고 생각했다. (Route53 사용 O 이미지 누락)
변경 후
NextJs, React를 배포하는 방법으로 검색했을 때 가장 많이 나오던게 CloudFront였다. 그래서 이 방법으로 아키텍처를 구축했다(첫 https 적용). 그런데 처음 해봤고, 결과도 처음 봤기에 적용된건지 아닌건지 판단하기도 어려웠다.
배포 프로세스
ACM(AWS Certificate Manager)
Https를 이용하기 위해서 SSL인증서가 필요하다. 우리는 ACM을 이용하여 무료 인증서를 발급해서 사용중이다.
그리고 ACM 인증서를 이용하기 때문에 ALB(Application LoadBalancer)를 필수로 사용해야한다. - 한국 인증서 발급
CloudFront를 사용하기 위해서는 버지니아 북부 인증서가 필요하다.(없으면 인식 불가) - 버지니아 북부 인증서 발급
Region이 다르더라도 요청하는 도메인 이름이 일치하다면 AWS에서 연결을 해 준다.
example.com
*.example.com등으로 입력 가능하다.
인증서를 요청한 후에 Route53에서 레코드를 생성하지 않으면 사용할 수 없다.
S3 배포
S3에 NextJs 빌드 파일 업로드 > 권한 "S3:GetObject" > 정적 웹 사이트 호스팅
CloudFront
원본 도메인에서 배포 할 S3 버킷을 선택 > 버지니아 북부에서 발급 한 SSL 인증서를 선택 후 CNAME 입력 후 배포
Route53
내가 사용 할 도메인에서 A레코드를 생성한다. 버지니아 인증서를 이용하여 CloudFront생성했다면 리스트에 뜨기 때문에 선택해서 레코드를 생성하면 된다. 나는 이 부분을 몰라 좀 많이 고생했다.
여기까지 Route53과 CF, S3배포는 완료가 되었다. (정적 배포...)
BackEnd 서버는 EC2와 ALB를 사용하여 배포했다. ALB는 Http를 리디렉션하여 Https로 보내는 방식으로 요청을 처리했다.
문제점 및 의문점
처음엔 CloudFront에 SSL인증서를 적용했기에 클라이언트 부분에서 Https가 적용이 되었다. 하지만 API를 사용하려니 계속해서 인증서가 일치하지 않다는 에러가 발생했다...
이 부분에 질문을 했는데 API와 같은 동적인 컨텐츠를 CDN으로 배포하는게 굳이 라는 답변이 있었다. CF에서 정적 / 동적 호스팅을 분리할 수 는 있다고는 하지만... (정확한 이유는 아직도 모르겠다. ㅠㅠ 도와주세요..)
Route53에 ALB, EC2 ip도 입력 해 보고,
