AWS S3에서 정적 웹 사이트 호스팅

시작하다

먼저 AWS S3에서 호스팅할 반응 애플리케이션을 생성해야 합니다. 이 자습서의 단순성을 위해 create-react-app의 기본 템플릿을 사용하겠습니다.

이를 위해 다음 명령을 사용합니다.

npx create-react-app s3-hosting-demo

배포에 사용할 수 있는 다음 폴더 구조로 간단한 반응 애플리케이션을 생성합니다.



이 자습서의 단순성을 위해 App.js 파일을 약간 편집하겠습니다. 시작 페이지의 기본 텍스트를 변경하겠습니다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <h1>Hello World</h1>
      <h2>Hosted in s3</h2>
      </header>
    </div>
  );
}

export default App;

이것은 localhost에 다음 출력을 표시합니다.

이제 S3 버킷에서 이 애플리케이션을 호스팅하는 방법을 살펴보겠습니다.

먼저 AWS console에 로그인합니다. AWS 계정이 없는 경우 free tier 사용자로 등록할 수 있습니다.

로그인 후 Amazon S3 서비스로 이동합니다. 대시보드는 다음과 같아야 합니다.

새 S3 버킷 생성

오른쪽 상단 모서리에 있는 "버킷 만들기"버튼을 클릭합니다.


그런 다음 s3 버킷에 이름을 지정하십시오. 이 경우 버킷 이름을 blog-demo-react-app 로 지정하겠습니다. AWS에서 확인 권장s3 bucket naming rules

그런 다음 s3 버킷에 대한 공개 액세스를 허용해야 합니다. 이렇게 하려면 Block Public Access settings for this bucket 아래의 확인란을 선택 취소해야 합니다.



그런 다음 다음 상자를 선택하여 설정을 확인해야 합니다.



마지막으로 양식 아래의 Create Bucket 버튼을 클릭하면 s3 버킷이 생성됩니다.

버킷 정책 추가

버킷이 생성되면 버킷 내부의 콘텐츠에 공개적으로 액세스할 수 있도록 버킷 정책을 추가해야 합니다. 이렇게 하려면 방금 생성한 새 s3 버킷으로 이동하고 다음을 클릭해야 합니다.Permissions 탭.



조금 아래로 스크롤하면 버킷 정책을 편집할 수 있는 곳이 보입니다.



편집 버튼을 클릭하고 다음 정책을 붙여넣습니다. <<YOUR_BUCKET_NAME>>를 생성한 버킷의 이름으로 바꿉니다. 그런 다음 하단의 "변경 사항 저장"버튼을 클릭하여 정책을 저장합니다.

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

보너스

AWS policy generator을 사용하여 AWS 서비스에 대한 정책을 생성할 수 있습니다.

정적 사이트 호스팅 활성화

그런 다음 s3 버킷에 대한 정적 웹 사이트 호스팅을 활성화해야 합니다. 이렇게 하려면 s3 버킷의 Properties 탭으로 이동합니다.



그런 다음 맨 아래로 스크롤하십시오. Static website hosting에 대한 설정을 볼 수 있습니다. Edit 버튼을 클릭합니다.



다음 화면에서 Enable를 클릭하면 새로운 설정 세트가 나타납니다.

이제 이것을 잠시 동안 유지하고 우리가 만든 반응 앱으로 다시 이동하겠습니다. 다음 명령을 사용하여 프로덕션 빌드를 생성합니다.

npm run build

이렇게 하면 프로젝트 루트에 새build 폴더가 생성됩니다.


index.html가 이 프로젝트의 항목 파일이 됩니다. 이제 S3 콘솔로 돌아가 필요한 구성을 추가해 보겠습니다.



필요한 경우 오류 문서를 추가할 수도 있습니다. 모든 구성이 완료되면 하단의 Save Changes 버튼을 클릭하여 변경 사항을 저장합니다.
모든 것이 제대로 구성되면 Static website hosting 아래에서 웹 사이트 엔드포인트를 볼 수 있어야 합니다.



그런 다음 S3 버킷의 Objects 탭으로 이동하여 ./build 폴더 안에 있는 콘텐츠를 버킷으로 끌어다 놓고 업로드합니다. 콘텐츠가 업로드되면 다음과 같이 표시됩니다.



그런 다음 웹 브라우저에서 website endpoint로 이동합니다. 반응 애플리케이션이 실시간으로 표시되는 것을 볼 수 있어야 합니다.



당신이 즐겼기를 바랍니다.

문제가 발생하면 의견을 말하십시오. 기꺼이 도와드리겠습니다. 또한 나를 따라