S3를 활용한 정적 웹 사이트 호스팅

최시열·2023년 1월 27일

DevOps, AndrewOH의 성장기 블로그를 참고하여 작성하였습니다.

❔❔ 정적 웹 페이지란?

웹 서버에 이미 저장된 html 문서를 클라이언트에게 전송하는 웹 페이지
서버에 저장된 데이터의 변화가 없다는 모든 사용자가 같은 페이지를 보게 된다.

➰ 정적 웹 페이지의 장점

- 요청에 대한 파일만 전송하면 되어 서버간 통신이 거의 없고 속도가 빠르다.
- 구축 비용이 적게 든다.
- 복원이 쉽다.

➰ 정적 웹 페이지의 단점

- 저장된 정보만 보여주기에 서비스가 한정적이다.
- 추가, 수정, 삭제의 작업을 서버에서 다운받아 편집해 다시 업로드하여 수정하므로 관리가 어렵다.

다음과 같은 순서로 정적 웹사이트를 호스팅 해보겠습니다.

✔ 아마존 콘솔 로그인
✔ S3 버킷 생성
✔ S3 정적 웹사이트 호스팅 설정
✔ 확인

1. 아마존 콘솔 로그인

먼저 아마존 콘솔에 로그인 합니다.

그리고 [서비스] - [스토리지] - [S3]에 들어가 줍니다.

2. S3 버킷 생성

버킷 만들기 버튼을 통해 버킷을 생성합니다.

고유한 버킷 이름을 만들어 주고 AWS 리전은 자신이 하고 싶은 곳으로 설정해줍니다.

객체 소유권은 디폴트를 유지해 주시고(비활성화)

모든 퍼블릭 액세스 차단을 해제하고 퍼블릭 상태를 확인하는 메시지를 체크해 주세요.

이 설정을 끝으로 버킷을 만들어주시면 됩니다.

3. S3 정적 웹사이트 호스팅 설정

생성한 버킷을 클릭해 세부 정보 창에서 속성 탭으로 갑니다.

밑에 있는 정적 웹사이트 호스팅 비활성화를 활성화 해주는 작업을 하겠습니다.
편집을 눌러주세요!

정적 웹 사이트 호스팅이 활성화 된것을 확인하시고
인덱스 문서와 오류 문서에 편의상 각각 index.html과 error.html을 넣어주세요.

그리고 변경 사항을 저장하시면
다음과 같이 설정이 변경된 것을 확인하실 수 있습니다.

index.html과 error.html 파일을 만들어 줍니다.
VScode 등의 툴 등을 사용하셔도 좋습니다.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="2299">
  <style type="text/css">s
    p.p2 {margin: 0.0px 0.0px 12.0px 0.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000}
    span.s1 {font-kerning: none}
  </style>
</head>
<body>
  <h1>Welcome Page</h1>
  <p class="p2"><span class="s1">Its a sample index HTML page<span class="Apple-converted-space"> </span></span></p>
</body>
</html>

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error Page</title>
</head>
<body>
    <h1>Error!!!!!!</h1>
</body>
</html>

만들어진 두개의 파일을 업로드 해줍니다.
업로드 버튼을 통해서

파일을 추가한 후에 업로드 버튼을 누르면

잘 올라간 것을 확인할 수 있습니다.

이제 권한을 설정해 줍니다.
버킷 상세 페이지에서 권한 탭

비어있는 버킷 정책의 편집 버튼을 눌러 수정해 줍니다.

{
"Id": "Policy1",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "replace-this-string-with-your-bucket-arn/*",
"Principal": "*"
}
]	
}

Resource에 있는 replace-this-string-with-your-bucket-arn에 자신의 버킷 arn으로 바꿔주세요!!!