[CS] 프론트엔드 배포(S3 호스팅 Hands-on) Day-68

S3 호스팅 Hands-on

정적 웹사이트 호스팅 과정

• 정적 웹 페이지 빌드
  구현이 완성된 정적 웹 페이지를 빌드합니다.

• 버킷 생성 및 정적 웹 사이트 호스팅 용으로 구성
  S3 대시보드에 접속해 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성

• 빌드된 정적 웹 페이지 업로드

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

위 모든 과정이 끝나면 사용자들이 버킷에 업로드 된 정적 웹 페이지에 접속할 수 있습니다.

정적 웹 페이지 빌드

빌드란?

작성한 코드의 불필요한 데이터를 없애고, 통합 및 압축하여 배포하기 이상적인 상태를 만드는 과정을 말합니다. (데이터 용량이 줄어들고, 웹 사이트 로딩 속도가 빨라집니다.)

빌드 전 환경 변수를 담은 .env 파일을 확인해야 합니다. 환경 변수에 담긴 서버의 주소는 문제가 없는지 확인하고, 반드시 http:// 또는 https:// 를 함께 적어야 합니다.

환경 변수를 제대로 설정하지 않으면 서버에 요청을 제대로 보내지 못하게 됩니다. 그 결과로 정상적인 응답을 받아올 수 없게됩니다.

빌드 과정이 끝나면 client 디렉토리에 build 폴더가 생성된 것을 확인할 수 있습니다. 이후 S3 콘솔에 접속해 버킷을 생성해야 합니다.

일반 구성 옵션만 완성하면 됩니다. 이름을 작성 후 생성하면 됩니다. (각 레기온에서 버킷의 이름은 고유하기 때문에 practice_bucket_deploy로는 만들 수 없습니다.)

버킷에 접속해 속성 메뉴 화면으로 들어가면 '정적 웹 사이트 호스팅' 옵션이 있습니다.
'편집' 버튼을 클릭해 정적 웹 사이트 호스팅의 활성화/비활성화 가 가능해집니다.

아무 파일도 업로드 하지 않은 경우 위와 같은 에러 메시지가 발생합니다.

객체의 업로드를 통해 build 폴더 안에 포함된 내용을 업로드 하면 됩니다.
(주의 사항: build 폴더를 업로드 하면 안됩니다. build 폴더 안에 있는 파일과 폴더를 업로드 해야합니다.)

마지막으로 권한 문제만 해결하면 됩니다.
(퍼플릭 엑세스 차단 옵션을 해제하고 정책을 생성합니다. 먼저 S3 메인 화면으로 이동해 생성한 버튼을 클릭 후 권한으로 들어갑니다.)

체크 박스를 해제 후, 변경 사항을 저장하면 됩니다.

버킷 정책도 편집해야 합니다.

정책 생성기를 클릭해

정책은 JSON 형태로 생성됩니다. 생성된 정책을 드레그 해 복사해놓습니다.

다시 버킷 정책 편집 페이지에 들어가 생성한 버킷 정책을 붙여놓고 저장합니다.

이후 정상적으로 웹 앱, 페이지가 작동할 것입니다.