🧐 오늘의 주제
오늘은 AWS S3 로 정적 웹사이트를 호스팅하는 방법에 대해서 알아보겠다.
❗ 주의사항
만약 테스트 및 공부를 하고 있는 상황이라면, 생성했던 S3 또는 cloudfront앱 은 작업이 끝난 후 삭제해주자. 많은 양은 아니겠지만 혹시나 혹시나 요금이 청구될 수도 ㅎㅎ
1. 호스팅할 정적파일 준비하기
S3에 호스팅할 정적파일을 준비해주자.
나는 index.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>S3호스팅</title>
</head>
<body>
<div>Hello world</div>
</body>
</html>2. S3 버킷 생성
S3 대시보드에 접속한 후, 버킷 생성 버튼을 눌러서 버킷을 생성하자.
이름은 중복되지 않는 이름으로 하고, 리전은 아무 곳이나 해도 된다.
단, 호스팅에 cdn을 적용하지 않고 s3만으로 호스팅을 할 것이라면, 서비스할 지역과 가까운 리전을 선택하자.
ex.서울에 서비스할 웹사이트라면, 서울리전 선택
버킷을 생성하면, 대시보드에서 확인할 수 있다.
3. 정적 파일 업로드
이제 정적파일을 생성한 버킷에 업로드해주자.
업로드하고, 버킷 페이지로 돌아가면 이렇게 파일이 올라가 있는 것을 볼 수 있다.
4. 호스팅 기능 활성화
버킷 페이지 > 속성 탭 > 최하단으로 이동위 경로로 이동하면, 아래와 같이 호스팅 기능을 활성화할 수 있는 섹션이 있다.
'편집'을 눌러서 호스팅과 관련된 추가 설정을 해주자.
설정을 완료하고 다시 속성탭 최하단으로 이동하면 이번에는 버킷의 웹 엔드포인트가 있다.
엔드포인트로 접속하면, 403에러가 뜬다.
이는 접속 권한에 대한 설정이 남아서 그렇다.
5. 퍼블릭 엑세스 차단 해제
권한 탭에 들어오면 모든 퍼블릭 엑세스 차단이 활성화 되어 있는 것을 볼 수 있다.
모든 차단을 다 해제해주자.
6. 버킷 정책 설정
5번과 마찬가지로 이번 작업도 권한탭에서 진행한다.
권한탭 초반에 버킷 정책이라는 섹션이 있다. '편집' 버튼을 누르자.
그리고 '정책 생성기' 버튼을 클릭한다.
그리고 아래의 이미지와 같이 값들을 설정해준다.
버킷의 arn 은 위 이미지에서도 확인 가능하고 arn:aws:s3:::{버킷이름} 이다.
이 설정으로 generate하면 json 형태로 정책을 생성해준다. 이 것을 복사해서 정책을 입력해주는 곳에 붙여넣고 정책을 저장하자.
7. 웹사이트 접속하기
위의 과정들을 모두 마친 후, 4번에서 확인했던 s3의 엔드포인트로 접속하면 이렇게 정상적으로 웹사이트가 호스팅된 것을 확인할 수 있다.
🤔 실무에서 어케 씀?
위의 과정만으로 실무에서는 사용하기 어렵고, 아래의 기능 및 설정들이 추가로 필요하다.
- 예쁜 우리 서비스만의 도메인
- 정적 파일들을 cdn을 통해서 서비스하기 -> 국적에 상관없는 호스팅 속도
- CI/CD에 대한 대책
1번은 해당 도메인의 DNS설정에서 s3엔드포인트를 향하도록 레코드를 추가해주면 된다.
2번은 AWS의 cloudfront로 해결 가능
3번은 AWS의 code build, code deploy을 이용해서 배포 파이프라인이 구축 가능하다. 이렇게하면 S3에 직접 배포할 파일들을 올리는 일은 없을 것이다. ㅎㅎ
이 내용들은 앞으로의 포스팅에서 다뤄보도록 하겠다. 😎
마무리
오늘은 S3를 통해서 웹사이트를 호스팅하는 방법을 알아보았다.
FE에서 빌드된 앱을 배포하는 방법은 다양하지만, S3로 배포하는 방법이 가성비가 좋은 방법 중에 하나가 아닐까 싶다. ㅎㅎ
우왕 정말 유용한 글이네요