AWS S3 정적 웹사이트 배포하기

AWS S3를 사용하면 정적 웹사이트를 배포할 수 있다.

이 글에서는 정적 웹사이트 빌드 파일을 업로드하고, 퍼플릭 액세스 권한을 풀고, 정책을 생성하여 누구나 내가 만든 웹사이트를 사용할 수 있도록 S3에 배포하는 방법을 알아본다.

 

1. 빌드로 번들링하기

배포하기에 앞서 프로젝트를 빌드하여 번들링하는 과정이 필요하다.

vite 프로젝트 빌드

빌드과정을 거치면 dist(혹은 build)라는 폴더가 생성되는데, 여기에는 우리가 작성한 코드를 압축, 난독화하여 번들링한 파일이 들어있다.

 

2. S3 버킷 만들기

 빌드를 완료했으면 이제 AWS S3 서비스에서 버킷을 만든다.

AWS S3 웹사이트에 들어가면 다음과 같은 화면이 나온다.

AWS S3

 

버킷 만들기를 누르면 버킷 일반 구성과 옵션을 선택할 수 있는데 버킷 이름과 AWS 리전만 선택한다. 하단의 다른 옵션들은 필요하면 지정을 해주고, 단순히 정적 웹사이트만 배포할 거라면 그대로 놔 두고 제일 하단의 버킷 만들기 버튼을 클릭한다.

 

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

버킷이 생성되면 들어가서 속성 탭 부분의 

속성 탭 클릭

가장 하단에 정적 웹사이트 호스팅 옵션이 있는데, 활성화 시켜주면 된다.

속성 탭 가장 하단의 정적 웹 사이트 호스팅 편집 클릭

 

인덱스 문서는 index.html(기본값)으로 지정하고, 오류 문서 같은 경우 지정해주지 않아도 되는데 나는 index.html로 지정해주었다. 그리고 변경 사항 저장 버튼을 누르면 

 

정적 웹사이트 호스팅이 완료되고 url 주소가 생성된다.

 

그런데 여기서 바로 주소로 이동하면 403 에러가 발생한다.

아직 빌드된 파일을 올리지 않고, public access 설정을 해주지 않아서 에러가 발생하는것이다.

 

4. Public Access 설정

권한 탭으로 이동해서 퍼플릭 액세스 차단 편집에 들어간다.

 

모든 퍼플릭 액세스가 차단이 되어있는데 풀어준다.(오른쪽 이미지처럼)

변경사항 저장을 하고 권한 탭으로 돌아온다.

 

5. 버킷 정책 설정

버킷 정책 부분 편집에 들어가서 정책을 만들어야 한다.

 

버킷 정책 생성 form이 나오는데, 다음과 같이 옵션을 적용하고 Add Statement 버튼을 클릭하면 된다.

Select Type of Policy	S3 bucket Policy
Principle	*
Actions	GetObject 선택
Amazon Resource Name(ARN)	arn:aws:s3:::<버킷 이름>/*

 

그럼 바로 밑에 정책이 생성되는데 Generate Policy버튼을 클릭하면 

이러한 창이 뜨는데 텍스트를 복사하고 창을 닫는다.

 

그리고 버킷 정책 탭으로 돌아와 복사한 텍스트를 붙여 넣고 변경 사항 저장을 한다.

 

버킷 정책 작성까지 완료했고, 이제 빌드된 파일을 S3에 업로드 하면된다.

 

6. 빌드 파일 업로드

객체 탭으로 이동해서 업로드 버튼을 누른다.

 

그리고 우리가 처음에 만든 빌드 파일을 등록할껀데, 드래그 앤 드롭으로 이동시켜도 되고, 파일 추가를 눌러 등록해도 된다. 

 

* 중요한것은 dist(혹은 build)폴더 자체를 등록하는것이 아니라 dist폴더 안의 파일 및 폴더를 등록해야 한다.

 

등록 후 업로드 버튼을 누르면 업로드가 완료되고 

 

이전에 생성된 url로 들어가면 웹사이트가 나오는것을 볼 수 있다!

(url은 속성탭 가장 하단에서 볼 수 있다.)