AWS S3 정적 웹사이트 호스팅하는 방법 (Hosting a static website on Amazon S3)

남양주개발자

·

2020. 11. 8. 09:00

728x90
반응형

AWS S3 정적 웹사이트 호스팅하는 방법 (Hosting a static website on Amazon S3)

정적 웹 사이트를 호스팅하기 위한 방법에는 다양한 방법이 있습니다. Netlify를 활용하거나 Github를 활용해서 제한적이긴 하지만 무료 웹 사이트 호스팅이 가능합니다. 이외에도 GCP(구글 클라우드 플랫폼, Google Cloud Platform)이나 마이크로소프트 애저 그리고 AWS(Amazon Web Service)에서도 정적 웹사이트를 호스팅하는 환경을 제공하고 있습니다.

Google Cloud Platform vs Microsoft Azure vs Amazon Web Services

이번 포스팅에서는 Amazon S3 버킷에 정적 웹 사이트를 호스팅하는 방법에 대해서 소개하도록 하겠습니다. 서버 측 처리에 의존하지 않는다면 S3 버킷에 정적 웹 사이트를 호스팅하는 방법도 여러 방법 중 선택할 수 있는 좋은 대안 중 하나입니다.

Amazon S3 버킷에 정적 웹사이트 호스팅하는 방법

Amazon S3 버킷에 정적 웹사이트를 호스팅하는 단계는 간략하게 설명드리면 아래와 같습니다.

  1. S3 버킷 생성
  2. S3 버킷을 정적 웹 사이트 호스팅용으로 구성
  3. index.html 파일 업로드
  4. 퍼블릭 액세스 차단 설정 편집
  5. 버킷 정책 추가

S3 버킷 생성

S3 버킷을 생성하기 위해서 AWS Management 콘솔에 로그인한 다음 여기로 이동합니다. S3 콘솔로 이동한 후 상단에 버킷 만들기 버튼을 클릭합니다.

S3 콘솔에서 버킷 만들기를 선택하는 모습

버킷 만들기를 클릭하면 아래와 같이 S3 버킷을 만들 수 있는 페이지로 이동하게 됩니다. 버킷 이름을 입력하고 최하단의 버킷 만들기 버튼을 클릭합니다.

S3 버킷을 만드는 예시

S3 버킷을 성공적으로 생성했다면 아래와 같이 생성이 완료되었다는 알림 문구가 등장합니다.

S3 버킷을 성공적으로 생성을 완료한 모습
성공적으로 S3 버킷이 생성된 모습

Amazon S3 버킷을 정적 웹 사이트 호스팅용으로 구성

S3 버킷을 정적 웹 사이트 호스팅용으로 만들려면 추가적인 설정이 필요합니다. 좀전에 생성한 버킷을 선택하면 버킷에 대한 정보를 수정할 수 있는 페이지로 이동하게 됩니다. 객체탭에서 하단으로 내려가면 정적 웹 사이트 호스팅을 설정할 수 있는 패널을 확인할 수 있습니다.

S3 버킷 정보를 수정할 수 있는 페이지 예시

정적 웹 사이트 호스팅을 활성화합니다.

객체탭의 아래쪽에 존재하는 정적 웹 사이트 호스팅 패널
정적 웹 사이트 호스팅을 활성화하는 모습(1)
정적 웹 사이트 호스팅을 활성화하는 모습(2)

S3 버킷에 index.html 파일 업로드

정적 웹 사이트 호스팅을 활성화했다면, 테스트를 위해 S3 버킷에 index.html 파일을 업로드하도록 하겠습니다.

// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AWS S3 배포 테스트</title>
</head>
<body>
  <div>
    hello s3!
  </div>
</body>
</html>

 

샘플 index.html 파일을 버킷에 업로드하는 모습 (1)
샘플 index.html 파일을 버킷에 업로드하는 모습 (2)
index.html을 정상적으로 버킷에 업로드하는 모습

index.html 파일을 정상적으로 업로드했다면 정적 웹사이트 호스팅 활성화를 할 때 부여받은 버킷 웹 사이트 엔드포인트로 이동합니다. 버킷 웹 사이트 엔드포인트는 아래에서 확인할 수 있습니다.

버킷 웹 사이트 엔드포인트를 확인하는 모습

아쉽게도 부여받은 버킷 웹 사이트 엔드포인트로 접근하면 403 Forbidden 에러를 맞이하게 될 것 입니다.

403 Forbidden 에러를 맞이하는 모습

걱정하지마세요! 버킷 권한과 관련된 이슈이기 때문에 해당 버킷의 권한만 조금 수정해주면 해결할 수 있습니다!

Amazon S3 버킷 권한 수정

정적 웹사이트를 모두에게 공개하기 위해서 몇 가지 권한 수정이 필요합니다. 우선 권한 탭으로 이동합니다.

S3 권한 탭으로 이동하는 모습

퍼블릭 액세스 차단 설정 편집

권한 탭으로 이동하면 퍼블릭 액세스 차단(버킷 설정)을 수정할 수 있는 패널이 존재하는데 모든 퍼블릭 액세스 차단의 체크를 풀어줍니다.

모든 퍼블릭 액세스 차단을 해제하는 모습

퍼블릭 액세스 차단 편집을 하기 위해 확인이 필요합니다.

퍼블릭 액세스 차단 편집을 하기 위한 절차

버킷 정책 추가

퍼블릭 액세스 차단 설정을 완료했다면 마지막으로 이제 버킷 정책을 편집하면 됩니다. 버킷에 올리는 파일들에 읽기 권한을 부여하기 위한 절차입니다.

버킷 내부의 객체에 대해서 모두에게 읽기 권한을 부여하기 위해 아래 정책을 반영합니다. 아래 JSON을 복사합니다.

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

참고로 Resource의 example.com에는 현재 자신의 버킷 이름을 넣어주면 됩니다.

// 예시
arn:aws:s3:::s3-hosting-test

복사한 정책관련 JSON 파일을 버킷 정책 편집에 붙여넣습니다.

버킷 정책 편집을 하는 예시
버킷 정책이 정상적으로 편집된 모습

정상적으로 버킷 정책을 편집했다면 다시 버킷 웹 사이트 엔드포인트로 접근해봅니다. 

S3에 정상적으로 정적 웹사이트 호스팅을 성공한 예시

권한을 수정하기 전에 403 Forbidden 에러가 발생했는데 권한을 수정하니 정상적으로 우리가 샘플로 올린 index.html파일로 구성된 정적 웹사이트가 호스팅이 된 것 을 확인할 수 있습니다.

마무리

이처럼 AWS S3 버킷을 활용하면 간단하게 정적 웹사이트를 구성해서 배포할 수 있는 환경을 만들 수 있습니다.

728x90
반응형
그리드형

이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다