7단계로 AWS S3에서 반응 웹 사이트를 배포하는 방법

이 자습서에서는 AWS S3에서 React 웹 사이트를 호스팅합니다.

로컬에서 반응 애플리케이션 생성

리액트 애플리케이션을 만들기 위해서는 먼저 node와 npm을 설치해야 합니다. 둘 다 설치하려면:

다운로드: https://nodejs.org

설치가 완료되면 터미널 또는 vscode 터미널을 열고 다음을 작성하십시오.

npx create-react-app my-app
cd my-app
npm start

그런 다음 열기localhost:3000

2단계: 배포할 웹사이트 구축

이제 이 명령을 실행하여 프로덕션 빌드를 만듭니다.

npm run build

실제로 이 빌드 폴더를 프로덕션 환경에 배포합니다.

AWS 계정 생성

aws 계정aws.amazon.com을 생성하거나 aws 계정으로 이동합니다.

S3 버킷 생성

AWS 계정에 로그인합니다. AWS 콘솔에서 S3를 엽니다. "버킷 생성"을 클릭합니다.

웹사이트에 도메인 이름을 사용하려는 경우 동일한 이름으로 버킷을 생성해야 합니다.

버킷 이름을 입력하고 "만들기"를 클릭합니다.

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

S3 버킷 속성으로 이동하여 "정적 웹 사이트 호스팅"을 활성화합니다. "이 버킷을 사용하여 웹사이트 호스팅"을 선택합니다. 색인 문서 및 오류 문서로 "index.html"을 지정하십시오.

엔드포인트를 기록해 둡니다. 웹 사이트에 액세스할 수 있는 URL입니다. 완료되면 저장을 클릭합니다.

S3 버킷 읽기 권한을 공개로 설정

이제 bucker '권한'으로 이동하여 아래 코드를 붙여넣습니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your_bucket_name>/*"
        }
    ]
}

웹사이트 콘텐츠를 S3에 업로드

이제 빌드 폴더의 콘텐츠를 S3 버킷에 업로드해야 합니다.

S3 버킷을 열고 "업로드"를 클릭합니다.

빌드 폴더의 콘텐츠를 업로드 창으로 끌어다 놓습니다. 하위 폴더 및 파일을 포함하여 빌드 폴더의 모든 콘텐츠가 있는지 확인합니다. 이를 확인한 후 "업로드"를 클릭하십시오.

대박. 귀하의 웹사이트는 현재 운영 중입니다.