Reference 4 - S3로 정적 웹 호스팅 가이드

여러분이 향후 각자 개인의 AWS 그룹 계정을 활용하는 경우에는, 아래 가이드에 따라서 S3로 정접 웹을 호스팅하고 관리할 수 있습니다.

 

이번 실습에서는 S3 버킷을 이용하여 정적 웹 사이트를 호스팅하는 방법에 대해서 알아보겠습니다.

---

먼저 정적 웹 사이트를 호스팅하는 과정은 4 단계로 요약됩니다. 첫 번째로 구현이 완성된 정적 웹 페이지를 빌드합니다.

빌드 과정이 끝나면 S3 대시보드에 접속하여 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성합니다. 

그다음으로 빌드된 정적 웹 페이지를 버킷에 업로드합니다. 업로드가 완료되면 퍼블릭 액세스 차단 설정을 해제하고, 다른 사용자의 접근 권한을 부여하는 버킷 정책을 생성합니다. 

---

 

먼저 '빌드(build)'에 대해 잠시 알아보는 시간을 가지겠습니다. 
빌드란 작성한 코드의 불필요한 데이터를 없애고, 통합 및 압축하여 배포하기 이상적인 상태를 만드는 과정을 말합니다. 
빌드 과정을 통하여 코드를 담고 있는 데이터의 용량이 줄어들고, 웹 사이트의 로딩 속도가 빨라집니다.

빌드하기에 앞서 환경 변수를 담은 .env 파일을 확인합니다.
 .env 파일의 파일명이 제대로 적혀있는지, 환경 변수에 담긴 서버의 주소는 문제가 없는지 확인합니다. 
참고로 요청을 보내는 서버의 주소를 환경 변수에 담을 때는 필히 'http://' 나 'https://'를 포함해야 합니다.

환경 변수를 제대로 설정하지 않으면 서버에 요청을 제대로 보내지 못하게 되고, 
그 결과로 정상적인 응답을 받아올 수 없습니다. 이 부분 주의하시고, 해당 과정이 끝나면 다음 슬라이드로 넘어갑니다.

---

 

환경 변수 관련 설정이 완료되면, 터미널에 'npm run build' 명령어를 입력하여 빌드 과정을 진행합니다. 

얼마간에 시간이 지나면 터미널 화면에 'Compiled Successfully'라는 문구가 보이며 빌드 과정이 마무리됩니다.

---

 

빌드 과정이 끝나면 client 디렉터리에 'build' 폴더가 생성된 것을 확인할 수 있습니다. 
이것으로 빌드 과정이 완료됐습니다. 그럼 다음 단계로 S3 콘솔에 접속하여 버킷을 생성하겠습니다.

---

AWS 홈페이지에서 로그인을 합니다. 메인 콘솔 창에서 S3를 검색하여 S3 메인 화면에 접속합니다.

---

S3 메인 화면으로 이동하면, 슬라이드에 보이는 화면과 같은 페이지를 확인할 수 있습니다.

여기에서 '버킷 만들기' 버튼을 클릭합니다. 

 

---

버킷 만들기 버튼을 클릭해 여러 옵션을 지정할 수 있는 페이지로 이동합니다. 
우리는 '일반 구성' 옵션에 있는 내용만 완성하면 됩니다.

먼저 버킷 이름을 작성합니다. 버킷 이름은 각 리전에서 고유해야 합니다. 
따라서 여러분은 위에 슬라이드에서 사용하는 버킷 이름을 이용하여 버킷을 생성하지 못합니다. 

원하는 이름으로 버킷 이름을 작성합니다.  실습 슬라이드에서는 'practice-bucket-deploy'라는 이름으로 버킷 이름을 작성했습니다.

 

---

버킷 이름 작성이 완료되면, 화면을 가장 아래로 이동합니다.  

'버킷 만들기'라는 버튼을 클릭합니다.

---

 

 

버킷 만들기 버튼을 클릭하고 일정 시간이 지나면 버킷이 성공적으로 생성되었다는 메시지와 함께 슬라이드에 보이는 화면으로 이동됩니다. 

만들어진 버킷을 클릭합니다.

 

---

속성 메뉴를 눌러 이동합니다.

---

속성 메뉴 화면에서 페이지의 스크롤을 가장 아래로 내리면, 슬라이드에 있는 화면과 같이 '정적 웹 사이트 호스팅' 옵션이 보입니다.

'편집' 버튼을 클릭합니다. 편집 버튼을 클릭하면 정적 웹 사이트 호스팅의 활성화/비활성화 여부를 묻는 창이 등장합니다.
  
'활성화' 옵션을 선택합니다.

 

---

 

활성화를 선택하면 여러 옵션을 추가로 변경할 수 있습니다. 여기서 저희는 인덱스 문서를 작성해야 합니다.

인덱스 문서 부분에는 웹 사이트 주소에 처음 접속했을 때 보일 기본 페이지를 지정합니다.

'인덱스 문서' 기입란에 'index.html'을 작성합니다. '오류 문서' 부분은 공란으로 비워두셔도 좋지만, 
혹시 모를 오류 발생 시 메인 페이지를 반환하기 위해서 'index.html'을 기입합니다.

그런 뒤 '변경 사항 저장' 버튼을 클릭합니다.  

---

 

변경 사항이 저장되면, 정적 웹 사이트 호스팅 옵션을 성공적으로 편집했다는 메시지와 함께 속성 메뉴 페이지로 리디렉션 됩니다. 
이번에도 페이지의 가장 아래로 스크롤을 내려서 방금 편집했던 정적 웹 사이트 호스팅 옵션 부분으로 이동합니다. 

예전에 존재하지 않았던 버킷 웹 사이트 엔드 포인트가 생성되어 있습니다. 

해당 주소를 클릭합니다.

---

위와 같은 에러 메시지를 확인할 수 있습니다. 왜 그럴까요?

핵심 이유로는 버킷에 정적 웹 페이지 파일을 아직 업로드하지 않았고, 
퍼블릭 액세스 설정 변경과 정책 생성을 하지 않았기 때문입니다.  

다음 슬라이드로 이동하여 남은 과정을 진행하면 해당 문제들을 해결할 수 있습니다. 

---

 

속성 메뉴 옆에 있는 '객체' 메뉴를 클릭해서 이동합니다.

---

 

객체 메뉴로 이동하여 '업로드' 버튼을 클릭합니다.

---

 

슬라이드와 같은 화면이 보입니다. 여기에 build 폴더 안에 포함된 내용을 업로드합니다.

---

 

client 폴더 안에 있는 build 폴더를 열어 안에 있는 파일을 모두 드래그하여 선택합니다.

---

 

객체를 업로드하는 페이지에 필요한 파일을 드래그& 드랍 형식으로 업로드합니다. 
이 과정에서 주의하셔야 할 점은 build 폴더 자체를 업로드하는 게 아닌 build 폴더 안에 저장된 파일만 업로드해야 한다는 점입니다. 

---

그럼 슬라이드 화면과 같이 build 폴더 안에 있는 파일들이 업로드 대기 목록에 추가됩니다.
 '업로드' 버튼을 눌러서 다음 과정을 진행합니다.

---

 

업로드가 완료되면 슬라이드 화면처럼 '업로드 성공 메시지'를 확인할 수 있습니다. 

---

이제 정적 웹 호스팅의 마지막 과정으로 퍼블릭 액세스 차단 옵션을 해제하고 정책을 생성합니다. 
먼저 S3 메인 화면으로 이동하여 생성한 버킷을 클릭합니다.

---

 

'권한' 메뉴를 클릭합니다.

---

권한 메뉴에서 '퍼블릭 액세스 차단(버킷 설정)'이라는 옵션을 찾아, '편집' 버튼을 클릭합니다.

---

 

'모든 퍼블릭 액세스 차단' 옵션의 체크 박스를 해제합니다. 
다음 '변경 사항 저장' 버튼을 클릭합니다. 
'변경 사항 저장' 버튼을 클릭하면 경고 창이 뜨는데, '확인'을 기입하고 다음 과정으로 넘어갑니다.

---

버킷 퍼블릭 액세스 차단을 변경하고 나면 다시 권한 메뉴로 리디렉션 됩니다. 

퍼블릭 액세스 차단(버킷 설정) 옵션 밑에 있는 '버킷 정책' 옵션을 찾습니다. '편집' 버튼을 클릭합니다. 

---

'정책 생성기' 버튼을 클릭합니다.

---

그럼 새로운 창이 뜨면서 슬라이드 화면에 보이는 것과 같은 페이지에 접속됩니다. 여기서 버킷 정책을 생성합니다. 

'Select Type of Policy' 옵션에서는 'S3 Bucket Policy'를 선택합니다.

'Principal' 옵션은 권한을 적용할 사용자를 정합니다. 우리는 모두에게 공개할 것이므로 *(별표)를 입력합니다.

'Actions' 옵션에서는 'GetObject'를 선택합니다. GetObject 옵션을 선택하게 되면, 버킷에 접근하는 모든 사용자가 버킷 내에 저장된 객체 데이터를 읽을 수 있게 됩니다. 버킷을 웹 사이트 용도로 구성할 때 선택해 주시면 좋습니다.

---

그리고 최종적으로 'Generate Policy' 버튼을 누르면 정책이 생성됩니다.

---

 

정책은 JSON 형태로 생성됩니다. 생성된 정책을 드래그해서 복사한 뒤 Close 버튼을 누릅니다.

---

다시 버킷 정책 편집 페이지로 돌아가서 생성한 버킷 정책을 붙여 넣습니다. 그리고 '변경 사항 저장' 버튼을 클릭합니다.

---

그럼 모든 과정이 완료되었습니다. 성공적으로 완료되었는지 테스트하기 위해서 속성 메뉴로 이동합니다.

---

정적 웹 사이트 호스팅 옵션을 찾은 뒤, 버킷 웹 사이트 엔드 포인트 주소를 클릭하여 테스트를 진행합니다. 
브라우저에 정상적으로 화면이 출력된다면 성공적으로 마무리된 것입니다.

---