Amazon S3 를 활용한 정적 웹 사이트 구성하기 – 1

이번 글에서는 Amazon S3 를 활용하여 정적 웹 사이트 구성하는 방법에 대해 차근차근 함께 진행해보려고 합니다.
이렇게 구성한 정적 웹 사이트는 운영 서비스 점검으로 인한 임시 안내 페이지 등으로 활용하실 수 있습니다.

AWS 콘솔의 경우, 자주 업데이트를 하는 편이라 UI가 조금 달라질 수 있지만 내용은 동일한 점 참고 부탁드립니다.

추가로 이어지는 후속글에서는 원하는 도메인과 구성한 정적 웹 사이트를 연결하는 방법에 대해서 진행할 예정입니다.


1. 버킷 만들기

🪣 1. AWS 콘솔 로그인 후, Amazon S3 콘솔을 열어 생성을 원하는 리전을 선택하고 ‘버킷 만들기’를 선택합니다.

🪣 2. 버킷 이름 입력하고 이외의 설정은 기본값으로 그대로 두고 생성해줍니다.

신규로 생성한 버킷이 아닌 기존 버킷에 대해 설정하는 방법도 포함하여 설명드리기 위해
우선 기본값으로 생성 후 아래 순서에서 나머지 방법 안내드릴 예정입니다.

저의 경우 후속글에서 원하는 도메인과 정적 웹 사이트를 연결하기 위해 미리 구입한 도메인과 동일한 이름으로 버킷을 생성하였습니다.

버킷 이름을 제외한 아래 나머지 설정값은 기본값으로 그대로 두고 진행하도록 하겠습니다.

2. 정적 웹 사이트 호스팅 활성화

🪣 1. 범용 버킷 목록에서 정적 웹 사이트 호스팅을 사용하려는 버킷의 이름을 선택합니다.

🪣 2. [속성(Properties)] 을 선택 후, 정적 웹 사이트 호스팅(Static website hosting)에서 편집(Edit)을 선택합니다.

🪣 3. [정적 웹 사이트 호스팅] 값을 ‘활성화’로 선택하고 [호스팅 유형] 은 ‘정적 웹 사이트 호스팅’을 선택합니다.
[인덱스 문서] 값으로는 ‘index.html’, [오류 문서] 값으로는 ‘error.html’ 을 입력합니다. [리디렉션 규칙] 은 비워두고 ‘변경 사항 저장’을 클릭합니다.

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

🪣 1. [권한(Permissions)] 을 선택 후, 퍼블릭 액세스 차단(버킷 설정)(Block public access (bucket settings))에서 편집(Edit)을 선택합니다.

🪣 2. 모든 퍼블릭 액세스 차단(Block all public access)을 선택 취소하고 변경 사항 저장(Save changes)을 선택합니다.

🪣 3. 변경 사항 저장 클릭 시, 아래와 같이 팝업창이 뜨게 되는데 확인 입력 후 확인 버튼을 클릭합니다.

4. 버킷 정책 추가

🪣 1. 버킷의 [권한(Permissions)] 선택 후, 버킷 정책(Bucket Policy)에서 편집(Edit)을 선택합니다.

🪣 2. 웹 사이트에 대한 퍼블릭 읽기 액세스 권한을 부여하기 위해 아래 버킷 정책을 복사한 후 버킷 정책 편집기에 붙여 넣습니다. (⚠️Resource 내 ‘Bucket-Name’ 값을 버킷 이름으로 수정 필수!)

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

🪣 3. 아래와 같이 Bucket-Name 을 사용할 버킷 이름으로 수정한 뒤, 변겅 사항 저장을 선택하여 적용합니다.

5. 인덱스 문서 및 오류 문서 업로드

🪣 1. 버킷용 정적 웹 사이트 호스팅을 활성화할 때 표시될 인덱스 문서와 오류 문서 파일을 구성한 뒤 버킷에 업로드 합니다.

index.html

<html >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>

6. 웹 사이트 엔드포인트 테스트

🪣 1. 버킷 내 [속성(Properties)] 를 선택 후, 페이지 하단의 정적 웹 사이트 호스팅(Static website hosting)에서 버킷 웹 사이트 엔드포인트(Bucket website endpoint)를 선택합니다.

🪣 2. 성공적으로 S3 를 통한 정적 웹 사이트 호스팅한 것을 확인할 수 있습니다.

7. 마무리

이번 글을 통해 Amazon S3 를 활용하여 정적 웹 사이트 구성을 진행해보았습니다.
다만, 마지막으로 확인한 정적 웹 사이트를 자세히 보시면 HTTP 연결만 지원하고 도메인에 버킷명이 그대로 노출되기 때문에 후속글에서는 원하는 도메인과 구성한 정적 웹 페이지를 연결해보는 방법에 대해 알아보도록 하겠습니다.


NDS는 많은 클라우드 경험을 통해 서비스 도입에 도움을 드릴 수 있습니다. 관련하여 문의 사항이나 기술 지원이 필요하신 경우 NDS Sales팀으로 연락주시길 바랍니다.

SA 김다연