학부 클라우드 컴퓨팅 수업에서 AWS Academy로 실습한 내용을 정리하였습니다.
정적 웹 사이트는 백엔드 없이 정적 콘텐츠(HTML, 이미지, CSS 등)로 구성된다. 쉽게말해, 웹 페이지에 해당하는 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 된다.
AWS S3를 이용하면 백엔드 서버를 구축하지 않아도 정적 웹 사이트를 손쉽게 호스팅할 수 있다. JS를 추가해서 사용자 브라우저에서 상호작용 기능을 구현할 수도 있다.
AWS S3를 활용해서 정적 웹 사이트를 호스팅하는 방법을 알아보자.
1. 버킷 만들기
S3 > 버킷 만들기 선택
버킷 이름은 글로벌하게 고유해야 한다. 즉, 모든 리전에 거쳐서 중복되는 이름으로 설정할 수 없음.
정적 웹 사이트를 호스팅하고 인터넷에 배포할 것이기 때문에 인터넷 상의 퍼블릭 액세스를 허용해야한다.
따라서 기본값으로 체크된 모든 퍼블릭 액세스 차단을 해제하고, 아래에 노란색 박스에 동의를 해준다.
여기까지 진행한 다음, 아래로 내려서 버킷 만들기 버튼을 눌러 버킷을 생성한다.
이제 생성된 버킷을 클릭해서 속성 탭으로 들어간다.
제일 아래로 내리면 정적 웹 사이트 호스팅이 있는데 이를 활성화한다.
이렇게 인덱스 문서에 기본 페이지로 index.html을 작성해주고(이 값은 이미 표시되어 있더라도 입력해야 함) 변경 사항 저장으로 마무리.
여기까지 완료하면 버킷의 웹 사이트 엔드포인트가 생성된다.
그런데 지금 클릭을 하면 다음과 같은 에러 창이 뜨게 된다.
이는 버킷 권한을 아직 구성하지 않기 때문에 생기는 403 Forbidden 메시지로, 나중에 해결할 수 있으니 이 창은 열어둔 상태로 유지하자.
2. 버킷에 콘텐츠 업로드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정적 웹 사이트 호스팅 예제</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
p {
font-size: 18px;
color: #555;
margin-bottom: 30px;
}
button {
padding: 12px 24px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
#message {
display: none;
margin-top: 20px;
font-size: 18px;
color: #4CAF50;
}
</style>
</head>
<body>
<div class="container">
<h1>정적 웹 사이트 호스팅 예제</h1>
<p>아래 버튼을 클릭하여 메시지를 확인하세요.</p>
<button onclick="showMessage()">클릭</button>
<p id="message">안녕하세요! Amazon S3에서 호스팅된 정적 웹 사이트입니다.</p>
</div>
<script>
function showMessage() {
var message = document.getElementById('message');
message.style.display = 'block';
}
</script>
</body>
</html>
GPT에게 부탁해서 아주 간단한 실습용 HTML을 얻었다. 화면에 보이는 HTML 페이지를 S3에 업로드해서 호스팅해보자.
위의 HTML 코드를 index.html로 저장한 다음, S3 > 버킷 > 생성한 버킷을 클릭한 다음 업로드를 눌러 index.html을 업로드한다.
3. 객체에 대한 액세스 활성화
AWS S3에 저장된 객체는 기본적으로 프라이빗으로 설정된다. 데이터를 안전하게 유지하기 위함이다.
이제, 업로드된 객체에 대한 퍼블릭 액세스를 활성화해보자.
먼저, 현재 객체 상태가 프라이빗인지 확인한다. 1번의 제일 마지막에서 403 Forbidden인 것을 확인했는데 한 번 더 새로고침해서 여전히 이 메시지가 표시되는지 확인한다. 그대로 403 Forbidden이 뜨는게 정상.
다음 두 가지 방법으로 AWS S3 객체를 퍼블릭으로 설정할 수 있다.
- 전체 버킷이나 버킷의 특정 디렉토리를 퍼블릭으로 설정하려면 버킷 정책을 사용
- 액세스 제어 목록(ACL)을 사용하여 버킷의 개별 객체를 퍼블릭으로 설정할 수 있음
일반적으로 개별 객체를 퍼블릭으로 설정하면 실수로 다른 객체를 공개하는 일이 발생하지 않아 더 안전하다. 그러나 전체 버킷에 민감한 정보가 포함되지 않은 경우에는 버킷 정책을 사용해도 된다.
이번에는 ACL을 사용해서 index.html 객체에 퍼블릭 액세스를 허용하도록 구성해보자.
S3 > 버킷 > 생성한 버킷을 클릭해서 index.html을 체크한 다음, 작업 메뉴에서 ACL을 사용하여 퍼블릭으로 설정을 클릭한다.
이제 정적 웹 사이트에 퍼블릭 액세스가 가능해졌다. 403 Forbidden 메시지가 표시된 웹 브라우저 탭으로 돌아가서 새로고침하면 정상적으로 웹 사이트가 표시되는 것을 확인할 수 있다.
추가:
S3에서 정적 웹 호스팅 기능으로 웹 페이지를 배포하는 것이랑 그냥 업로드된 파일을 퍼블릭으로 변경하여 인터넷에서 접속하는 것이랑 무엇이 다른가 궁금할 수 있다.
S3에서 정적 웹 사이트 호스팅을 활성화하면 (이 포스트에서 다루었던 내용) 사용자 정의 도메인, 커스텀 에러 페이지, /로 끝나는 경로에 대한 index.html 문서 및 301 리다이렉션을 제공한다. 단, 한 가지 단점이 있는데 정적 웹 사이트 호스팅을 사용하면 HTTP로 엔드포인트가 제공되기 때문에 HTTPS 연결을 위해서는 Cloudfront나 ACM같은 서비스를 이용해야한다.
'개발 > Cloud' 카테고리의 다른 글
| [Cloud] AWS S3 파일 버전 관리 및 정책 설정하기 (4) | 2024.09.26 |
|---|---|
| [Cloud] GCP Cloud Functions로 비디오 썸네일 추출하기 (0) | 2024.05.30 |
| [Cloud] 구름 IDE를 처음 사용한다면 (2) | 2022.10.23 |
