지난번 서버 배포에 이어 클라이언트 호스팅에 대해서 살펴보겠습니다.

정적 웹 페이지 빌드

환경변수 설정 (.env파일)

.env 파일에 환경변수로 우분투 인스턴스의 퍼블릭 IPv4 DNS 주소를 적어줍니다.
중요! http:// 를 포함해야 합니다!

빌드

다음의 명령어를 통해 클라 디렉토리에 있는 파일들을 빌드해줍니다.

빌드란?
: 작성한 코드의 불필요한 데이터를 없애고, 배포하기 이상적인 상태를 만들기 위해 파일을 통합, 압축하는 것입니다. 빌드를 통해 데이터의 용량이 줄고, 웹 사이트의 로딩 속도가 빨라집니다.

$ npm run build

빌드가 완료되면 다음과 같이 build 폴더가 생성된 것을 확인할 수 있습니다.

버킷 생성, S3 호스팅

1. 버킷 생성

AWS 홈페이지에서 S3를 검색하여 S3 메인 화면에 접속한 후 버킷을 만들어줍니다.

버킷 이름을 작성하고 리전을 선택하면 끝!

2. 정적 웹 사이트 호스팅 용으로 구성

버킷의 이름을 클릭하여 '정적 웹 사이트 호스팅' 옵션을 편집하여, '비활성화'를 '활성화'로 바꿔주도록 합니다.

또한 인덱스 문서와, 오류 발생시 리디렉트 될 경로를 index.html로 지정해줍니다.

그럼 아래와 같이 정적 웹 사이트 호스팅이 활성화되고, 버킷 웹 사이트 엔드포인트가 생성됩니다.

링크를 클릭한다면!!

짜잔 에러가 발생합니다@

왜냐하면 아직 클라이언트 파일들을 업로드하지 않았기 때문이죠.

이제 방금 전 빌드한 파일들을 업로드해보겠습니다!

3. 빌드 파일 업로드

AWS 버킷의 객체 메뉴로 이동한 후 빌드한 파일들을 업로드합니다.
프로젝트의 클라이언트 디렉토리로 이동하여 빌드 폴더 안의 모든 파일들을 드래그 & 드롭다운하여 업로드를 진행합니다.

파일들이 올라와있습니다. 업로드 버튼을 클릭하면 업로드가 진행됩니다.

4. 정책 생성

업로드가 완료되면, 버킷을 클릭해 퍼블릭 액세스 차단 해제 및 정책을 생성하러 갑니다.

권한 탭으로 이동하여 퍼블릭 액세스 차단을 해제하고,

권한 메뉴의 버킷 정책을 편집합니다.

정책 생성기 버튼을 클릭해 정책을 생성하는데요,

아래를 참고하여 정책을 만들어줍니다.

그리고 Add Statement를 클릭해 정책의 내용을 추가하고 생성하면!!

다음과 같이 정책이 JSON 형식으로 생성된 것을 확인할 수 있습니다.
해당 내용을 복사합니다.

그리고 권한 탭으로 돌아와 정책을 붙여 넣어주고 저장!!

5. 테스트

다시 속성 탭으로 이동하여 테스트를 진행하면,

다음과 같이 정적 웹 페이지가 무사히 호스팅된 것을 확인할 수 있습니다!!

여기까지 클라이언트 S3 호스팅이었습니다!