Beelog

이제 이전 과정들에 이어서 마지막으로 사용자의 요청을 CloudFront에서 받아서 /api로 들어오는 요청은 API Gateway로 나머지 요청은 S3에 저장된 프론트엔드가 응답하도록 구성하겠습니다. 먼저, S3에 프론트엔드 소스를 올리고 CloudFront로 서비스하는 방법은 여기서 설명하지 않겠습니다. 이미 S3에 프론트엔드 소스가 올라가 있고 CloudFront로 서비스를 하고 있는 상태에서 /api로 들어오는 요청은 S3가 아닌 API Gateway로 전달하는 방법을 알아보겠습니다. 1. CloudFront에 원본 추가 먼저 CloudFront 원본에 API Gateway를 추가해줍니다. 2. CloudFront에 동작 추가 아래와 같이 동작을 생성합니다. 헤더와 쿼리 문자열은 별도 설정이 필요..

지금까지는 HTTP와 HTTPS 요청 모두를 허용했었습니다. 이제는 HTTPS 통신이 가능하기 때문에 HTTP로 들어오는 요청을 HTTPS로 리다이렉트할 수 있도록 수정해보겠습니다. 1. CloudFront 배포 동작 편집 CloudFront에 접속하여 원하는 배포 ID를 선택하고 동작(Behaviors)로 이동합니다. 모든 경로(*)에 대하여 HTTP를 HTTPS로 리다이렉트 할 것이기 때문에 기존 경로 패턴이 기본값(*)인 동작을 선택하여 아래와 같이 편집합니다. 이후 배포가 끝나면 무효화를 한번 실행해주세요. 이제 브라우저 창에서 http://대체_도메인_이름으로 접속하게 되면 자동으로 https://대체_도메인_이름으로 변경되는 것을 확인할 수 있습니다. HTTP에서 HTTPS로 리다이렉트하는 부..

지금까지 브라우저에서 CloudFront의 배포 도메인 이름을 통해 웹 서비스에 접근하였습니다. 하지만 이는 기억하기도 어렵고 불편한 도메인이기 때문에 새로운 도메인을 생성하고 적용해보도록 하겠습니다. 1. 도메인 생성 외부의 무료 도메인 사이트를 통해서 도메인을 생성할수도 있지만, Route53도 도메인 이름 등록을 지원하기 때문에 Route53을 통해 도메인을 생성하도록 하겠습니다. 사용자는 example.com과 같은 도메인 이름을 구매하여 관리할 수 있으며 Amazon Route 53에서 도메인에 대한 DNS 설정을 자동으로 구성하게 됩니다. AWS Management Console에서 Route53을 검색하고 "도메인 > 도메인 등록"을 진행합니다. 위 두 과정을 거쳐 확인을 한 뒤, 도메인을 ..

현재 S3에 프론트엔드의 빌드된 파일이 저장되어 있고 CloudFront를 통해 서비스를 하고 있습니다. 하지만 CloudFront의 배포 도메인 이름을 통해 접속하는 경우 403(또는 404) 에러가 발생하며, 반드시 뒤에 /index.html을 붙여야 정상적으로 동작합니다. 이번 글에서는 CloudFront에서 접속하는 S3의 엔드포인트 종류에 대해 알아보고 CloudFront의 배포 도메인만 입력했을 경우에도 정상적인 동작이 가능하도록 수정해보겠습니다. S3 엔드포인트 종류 1. S3 웹사이트 엔드포인트 - S3의 웹호스팅 기능을 활성화 하면 생성되는 웹사이트 주소 DOC-EXAMPLE-BUCKET.s3-website-us-east-1.amazonaws.com 2. S3 REST API 엔드포인트 ..

이전 글에서 Front-end 소스를 수정하고 CodeCommit Repository로 push하는 경우 CodePipeline을 통해 자동으로 빌드한 뒤, S3에 빌드된 소스를 저장하였습니다. 하지만 CloudFront에 캐시가 남아있어서 바로 적용되지 못해 AWS Management Console에서 CloudFront로 들어가 직접 무효화를 해줘야 하는 번거로움이 있었습니다. 이번 글에서는 CloudFront의 캐시를 지우는 내용을 Lambda로 작성하여 CodePipeline에 연결하여 자동화해 보도록 하겠습니다. 1. 람다 Role 생성하기 람다 함수를 사용하기 전 먼저 람다 역할을 생성합니다. 이번 람다에서는 CloudFront에 접근할 것이기 때문에 관련 정책을 추가합니다. 또한, 로그 정보..