Beelog

현재 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 엔드포인트 ..

이전 글에서 S3에 프론트엔드의 빌드된 소스를 올려 정적 웹 호스팅을 진행하였습니다. 그러나 S3 자체를 외부로 노출하는 것은 다양한 보안상의 문제가 있을 수 있기 때문에 S3 앞단에 CloudFront를 두어 서비스하는 방법을 알아보겠습니다. https://aws.amazon.com/ko/cloudfront/ 1. S3 설정 수정 먼저 기존에 S3에서 정적 웹 사이트 호스팅을 활성화했었는데 이 부분을 비활성화 합니다. 그리고 S3로 들어오는 퍼블릭 엑세스를 모두 차단합니다. 마지막으로 기존에 버킷의 객체들을 읽을 수 있도록 설정했던 버킷 정책도 모두 제거합니다. 2. CloudFront 생성 원본 도메인으로 기존에 정적 웹 사이트 호스팅을 하던 S3를 선택합니다. S3 버킷 액세스를 CloudFront..

이전 글에서 S3에 프론트엔드 프로젝트의 빌드된 파일들을 업로드하여 정적 웹 호스팅을 하는 방법을 살펴보았습니다. 프론트엔드의 소스가 변경되는 경우 로컬에서 build 후 다시 그 파일들을 수동으로 S3에 업로드해야 하는 번거로움이 있었기 때문에 AWS Code Series를 사용하여 자동으로 빌드/배포하는 방법을 알아보겠습니다. 1. Code Commit에 소스 올리기 (1) Code Commit Git Repository 생성 리포지토리를 생성하고 git repository url을 복사합니다. (2) AWS 사용자 생성 및 권한 부여 AWS IAM에서 사용자를 생성합니다. 로컬에서 Repository에 접속해 pull, push 등을 사용할 사용자는 AWS Management Console에 접속할..

이전 글들에서 EC2에 Nginx를 설치하고 프론트엔드 소스를 실행하는 방법을 사용했습니다. 하지만 프론트엔드 소스(React 등)와 같이 정적인 웹 서비스는 S3에 빌드된 소스를 올려서 바로 서비스할 수 있는 방법도 있습니다. 따라서 이번 글에서는 프론트엔드 소스를 S3에 올리고 정적 웹 호스팅을 통해 서비스하도록 구조를 변경해 보겠습니다. 1. S3 버킷 생성 S3 버킷을 생성할 때, 추후 DNS 연결을 고려하여 URL과 동일하게 지정하는 것이 좋습니다. 퍼블릭 액세스 차단은 최소한으로 차단합니다. 2. Front-end 소스에 baseURL 수정 React 프로젝트에서 axios를 통해 서버로 접속할 때 서버의 주소를 지정합니다. 이때 주소를 백엔드 프로젝트가 실행중인 EC2의 IP(Public I..