AWS Cloud Snd CloudFront에 React 애플리케이션을 배포하는 방법 – 전체 연습

AWS S3 및 CloudFront에 React 앱 배포: 단계별 가이드

이 가이드에서는 정적 호스팅을 위해 Amazon S3에 React 애플리케이션을 배포하고 콘텐츠 전송을 위해 CloudFront를 사용하는 방법을 안내합니다.

1단계: 시작하기

시작하기 전에 다음 사항을 확인하세요.

1. Node.js와 npm이 로컬에 설치되었습니다.
2. 관리자 권한이 있는 AWS 계정.

2단계: React 애플리케이션 구축

1. 터미널을 엽니다.
2. Vite를 사용하여 새 React 앱 만들기: npm create vite@latest <your_project_name>(<your_project_name>을 원하는 이름으로 교체).
3. 프로젝트 디렉토리로 이동하세요: cd <your_project_name>

3단계: 검증 및 구축

1. 테스트를 위해 개발 서버를 시작합니다: npm start. http://localhost:3000.
에서 앱에 액세스하세요.
2. 개발서버를 중지합니다(Ctrl C).
3. 프로덕션용 앱 구축: npm run build. 그러면 최적화된 파일이 포함된 build/ 폴더가 생성됩니다.

4단계: S3 버킷 설정

1. AWS Management Console에서 S3 서비스로 이동합니다.
2. 고유한 이름(예: <your_unique_bucket_name>)을 제공하여 새 버킷을 만듭니다.
3. 지역을 선택하고 버킷을 생성하세요.

5단계: S3에서 정적 웹사이트 호스팅 활성화

1. 새로 생성된 버킷을 선택하세요.
2. "속성" 탭으로 이동하세요.
3. '정적 웹사이트 호스팅'에서 활성화하세요.
4. "색인 문서" 및 "오류 문서"를 index.html으로 설정합니다.
5. 변경사항을 저장합니다.

6단계: 버킷 권한 구성

"권한"탭으로 이동하십시오 버킷 정책을 편집하십시오. 정책이 귀하의 웹 사이트에 대한 공개 액세스를 허용하는지 확인하십시오 (보안 영향을 고려하고 생산 환경에 따라 조정). <.> 정책을 저장하십시오. 브라우저에서 S3 버킷 URL에 액세스하여 배포를 테스트하십시오.
2. 7 단계 : S3 배포 테스트 S3 URL을 통해 배포 된 앱에 액세스하십시오 (예 : ).
3. 8 단계 : cdn 에 대한 클라우드 프론트 구성

AWS Management Console에서 Cloudfront 서비스로 이동하십시오. 새 분포를 만듭니다. 전달 방법으로 "웹"을 선택하십시오 S3 버킷 엔드 포인트를 가리키는 원점 설정을 구성하십시오. 뷰어 프로토콜 정책을 "http를 https로 리디렉션"으로 설정하십시오. 분포를 만듭니다

9 단계 : 클라우드 프론트 배포 테스트 Cloudfront 배포판이 배포되면 Cloudfront URL을 통해 앱에 액세스하십시오. 결론

http://<your_unique_bucket_name>.s3-website-.amazonaws.com/ 당신은 반응 응용 프로그램을 AWS S3 및 Cloudfront에 성공적으로 배포했습니다! 귀하의 응용 프로그램은 이제 CDN을 통해 제공되며 전 세계 사용자에게 고 가용성과 최적화 된 성능을 보장합니다. 자리 표시 자 버킷 이름과 지역을 실제 값으로 바꾸는 것을 잊지 마십시오. 생산에 배포 할 때 항상 보안 모범 사례를 우선시하십시오

위 내용은 AWS Cloud Snd CloudFront에 React 애플리케이션을 배포하는 방법 – 전체 연습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!