기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
Amazon S3 및에 React 기반 단일 페이지 애플리케이션 배포 CloudFront
작성자: Jean-Baptiste Guillois(AWS)
요약
단일 페이지 애플리케이션(SPA)은를 사용하여 표시된 웹 페이지의 콘텐츠를 동적으로 업데이트하는 웹 사이트 또는 웹 애플리케이션입니다 JavaScript APIs. 이 접근 방식은 서버에서 전체 웹 페이지를 다시 로드하는 대신 새 데이터만 업데이트하므로 웹사이트의 사용자 경험과 성능을 향상시킵니다.
이 패턴은 Amazon Simple Storage Service(Amazon S3) 및 Amazon의 React에 작성된를 코딩하고 호스팅SPA하는 접근 방식을 제공합니다 step-by-step CloudFront. 이 패턴SPA의는 Amazon API Gateway에 구성되고 Amazon CloudFront 배포를 통해 노출RESTAPI되는를 사용하여 교차 오리진 리소스 공유(CORS) 관리를 간소화합니다.
사전 조건 및 제한 사항
사전 조건
아키텍처
이 아키텍처는 AWS CloudFormation (인프라 코드)를 사용하여 자동으로 배포됩니다. Amazon S3와 같은 리전 서비스를 사용하여 정적 자산을 저장하고 Amazon API Gateway와 CloudFront 함께 Amazon을 사용하여 리전API(REST) 엔드포인트를 노출합니다. 애플리케이션 로그는 Amazon을 사용하여 수집됩니다 CloudWatch. 모든 AWS API 호출이 감사됩니다 AWS CloudTrail. 모든 보안 구성(예: 자격 증명 및 권한)은 AWS Identity and Access Management ()에서 관리됩니다IAM. 정적 콘텐츠는 Amazon CloudFront 콘텐츠 전송 네트워크(CDN)를 통해 전송되며 DNS 쿼리는 Amazon Route 53에서 처리됩니다.
도구
AWS 서비스
Amazon API Gateway는 모든 규모의 , 및 WebSocket APIs REST를 생성, 게시, 유지 관리HTTP, 모니터링 및 보호하는 데 도움이 됩니다.
AWS CloudFormation는 AWS 리소스를 설정하고, 빠르고 일관되게 프로비저닝하고, AWS 계정 및 리전의 수명 주기 동안 리소스를 관리할 수 있도록 지원합니다.
Amazon CloudFront은 전 세계 데이터 센터 네트워크를 통해 웹 콘텐츠를 제공하여 웹 콘텐츠 배포 속도를 높이므로 지연 시간이 단축되고 성능이 향상됩니다.
AWS CloudTrail는의 거버넌스, 규정 준수 및 운영 위험을 감사하는 데 도움이 됩니다 AWS 계정.
Amazon CloudWatch은 AWS 리소스 및 실행 중인 애플리케이션의 지표를 AWS 실시간으로 모니터링할 수 있도록 지원합니다.
AWS Identity and Access Management (IAM)는 AWS 리소스에 대한 액세스를 인증하고 사용할 수 있는 권한을 부여받은 사용자를 제어하여 리소스에 대한 액세스를 안전하게 관리하는 데 도움이 됩니다.
Amazon Route 53는 가용성과 확장성이 뛰어난 DNS 웹 서비스입니다.
Amazon Simple Storage Service(S3)는 원하는 양의 데이터를 저장, 보호 및 검색하는 데 도움이 되는 클라우드 기반 객체 스토리지 서비스입니다.
코드
이 패턴의 샘플 애플리케이션 코드는 GitHub React 기반 CORS 단일 페이지 애플리케이션
모범 사례
Amazon S3 객체 스토리지를 사용하면 애플리케이션의 정적 자산을 안전하고 복원력이 뛰어나며 성능이 뛰어나고 비용 효율적인 방식으로 저장할 수 있습니다. 이 작업에는 전용 컨테이너 또는 Amazon Elastic Compute Cloud(Amazon EC2) 인스턴스를 사용할 필요가 없습니다.
Amazon CloudFront 콘텐츠 전송 네트워크를 사용하면 사용자가 애플리케이션에 액세스할 때 발생할 수 있는 지연 시간을 줄일 수 있습니다. 웹 애플리케이션 방화벽(AWS WAF)을 연결하여 악의적인 공격으로부터 자산을 보호할 수도 있습니다.
에픽
| 작업 | 설명 | 필요한 기술 |
|---|---|---|
리포지토리를 복제합니다. | 다음 명령을 실행하여 샘플 애플리케이션의 리포지토리를 복제합니다.
| 앱 개발자, AWS DevOps |
애플리케이션을 로컬 방식으로 배포합니다. |
| 앱 개발자, AWS DevOps |
애플리케이션에 로컬로 액세스합니다. | 브라우저 창을 열고 | 앱 개발자, AWS DevOps |
| 작업 | 설명 | 필요한 기술 |
|---|---|---|
AWS CloudFormation 템플릿을 배포합니다. |
| 앱 개발자, AWS DevOps |
애플리케이션 소스 파일을 사용자 지정합니다. |
| 앱 개발자 |
애플리케이션 패키지를 빌드합니다. | 프로젝트 디렉터리에서 | 앱 개발자 |
애플리케이션 패키지를 배포합니다. |
| 앱 개발자, AWS DevOps |
| 작업 | 설명 | 필요한 기술 |
|---|---|---|
애플리케이션을 액세스하고 테스트합니다. | 브라우저 창을 연 다음 CloudFront 배포 도메인(이전에 배포한 CloudFormation 스택의 | 앱 개발자, AWS DevOps |
| 작업 | 설명 | 필요한 기술 |
|---|---|---|
S3 버킷 콘텐츠를 삭제합니다. |
| AWS DevOps, 앱 개발자 |
AWS CloudFormation 스택을 삭제합니다. |
| AWS DevOps, 앱 개발자 |
관련 리소스
웹 애플리케이션을 배포하고 호스팅하려면 AWS Amplify 호스팅을 사용할 수도 있습니다. 호스팅은 지속적인 배포를 통해 풀 스택 서버리스 웹 앱을 호스팅하기 위한 Git 기반 워크플로를 제공합니다. Amplify Hosting은 프런트엔드 웹 및 모바일 개발자AWS Amplify가 빠르고 쉽게 풀 스택 애플리케이션을 구축할 수 있도록 특별히 제작된 도구 및 기능 세트를 제공하는의 일부입니다 AWS.
추가 정보
403개의 오류를 생성할 수 있는 사용자가 URLs 요청한 잘못된 오류를 처리하기 위해 CloudFront 배포에 구성된 사용자 지정 오류 페이지는 403개의 오류를 포착하여 애플리케이션 진입점()으로 리디렉션합니다index.html.
의 관리를 간소화하기 위해 CloudFront 배포를 통해 CORS가 노출RESTAPI됩니다.
