project | aws 배포 및 마무리

정적 웹사이트 호스팅 과정

1. 정적 웹 페이지 빌드
2. 버킷 생성 및 정적 웹 사이트 호스팅 용으로 구성
3. 빌드된 정적 웹 페이지 업로드
4. 퍼블릭 엑세스 차단 해제 및 정책 생성

정적 웹 페이지 빌드

1. 빌드 전 환경 변수 설정
   먼저 '빌드(build)'에 대해 알아야합니다. 빌드란 작성한 코드의 불필요한 데이터를 없애고, 통합 및 압축하여 배포하기 이상적인 상태를 만드는 과정을 말합니다. 빌드 과정을 통하여 코드를 담고 있는 데이터의 용량이 줄어들고, 웹 사이트의 로딩 속도가 빨라집니다.
   빌드하기에 앞서 환경 변수를 담은 파일을 확인합니다. 환경 변수에 담긴 서버의 주소는 문제가 없는지 확인합니다. 참고로 요청을 보내는 서버의 주소를 환경 변수에 담을 때는 필히 'http://' 나 'https://'를 포함해야 합니다.
   환경 변수를 제대로 설정하지 않으면 서버에 요청을 제대로 보내지 못하게 되고, 그 결과로 정상적인 응답을 받아올 수 없습니다.

2. client 디렉토리로 이동후 npm run build 명령어 입력
   환경 변수 관련 설정이 완료되면, 터미널에 'npm run build' 명령어를 입력하여 빌드 과정을 진행합니다. 얼마간에 시간이 지나면 터미널 화면에 'Compiled Successfully'라는 문구가 보이며 빌드 과정이 마무리됩니다.

3. Build 폴더 생성 여부 확인
   빌드 과정이 끝나면 client 디렉터리에 'build' 폴더가 생성된 것을 확인할 수 있습니다. 이것으로 빌드 과정이 완료됐습니다.

버킷 생성 및 정적 웹 사이트 호스팅 용으로 구성

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

2. '버킷 만들기' 버튼 클릭
   S3안에서 버킷 클릭후 버킷만들기를 누릅니다.

3. 버킷 이름 입력 및 리전 선택
   버킷 만들기 버튼을 클릭해 여러 옵션을 지정할 수 있는 페이지로 이동합니다. 우리는 '일반 구성' 옵션에 있는 내용만 완성하면 됩니다.
   먼저 버킷 이름을 작성합니다. 버킷 이름은 각 리전에서 고유해야 합니다. 따라서 여러분은 위에 슬라이드에서 사용하는 버킷 이름을 이용하여 버킷을 생성하지 못합니다.
   프로젝트 이름으로 버킷 이름을 작성합니다.

4. 버킷 생성 후 속성 메뉴로 이동

5. 정적 웹 사이트 호스팅 메뉴로 이동한 뒤 편집 클릭

6. 정적 웹 사이트 호스팅 활성화 클릭

7. 인덱스 문서와 오류 문서 지정 후 변경사항 저장
   인덱스 문서 부분에는 웹 사이트 주소에 처음 접속했을 때 보일 기본 페이지를 지정합니다.
   인덱스 문서와 오류 문서 기입란에 index.html을 작성합니다. 오류 문서 부분은 공란으로 비워두셔도 좋지만, 혹시 모를 오류 발생 시 메인 페이지를 반환하기 위해서 index.html을 기입합니다.

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

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

1. 객체 메뉴로 이동

2. 업로드 버튼 클릭

3. Build 디렉토리에 있는 정적 파일들을 업로드
   client 폴더 안에 있는 build 폴더를 열어 안에 있는 파일을 모두 드래그해서 넣습니다.
   그 후 업로드 버튼을 눌러 다음 과정을 진행합니다.
   업로드가 완료되면 성공 메시지를 확인할 수 있습니다.

퍼블릭 엑세스 차단 해제 및 정책 생성

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

2. 퍼블릭 엑세스 차단 메뉴의 편집 클릭

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

4. 권한 메뉴의 버킷 정책 부분 편집
   버킷 퍼블릭 액세스 차단을 변경하고 나면 다시 권한 메뉴로 리디렉션 됩니다.
   퍼블릭 액세스 차단(버킷 설정) 옵션 밑에 있는 버킷 정책 옵션을 찾습니다. 편집 버튼을 클릭합니다.

5. 정책 생성기 클릭

6. 정책 생성
   여기서 버킷 정책을 생성합니다.
   Select Type of Policy 옵션에서는 S3 Bucket Policy를 선택합니다.
   Principal 옵션은 권한을 적용할 사용자를 정합니다. 우리는 모두에게 공개할 것이므로 *(별표)를 입력합니다.
   Actions 옵션에서는 GetObject를 선택합니다. GetObject 옵션을 선택하게 되면, 버킷에 접근하는 모든 사용자가 버킷 내에 저장된 객체 데이터를 읽을 수 있게 됩니다. 버킷을 웹 사이트 용도로 구성할 때 선택해 주시면 좋습니다.
   위의 과정을 마무리하고 generate policy 버튼을 누르면 정책이 생성됩니다.

7. 생성된 정책 복사하고 붙여넣기
   정책은 JSON 형태로 생성됩니다. 생성된 정책을 드래그해서 복사한 뒤 Close 버튼을 누릅니다.
   다시 버킷 정책 편집 페이지로 돌아가서 생성한 버킷 정책을 붙여 넣습니다. 그리고 '변경 사항 저장' 버튼을 클릭합니다.

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

드디어 짧으면 짧고 길다면 긴 2주동안의 프로젝트를 배포까지 진행하게 됐습니다. 처음에 기획하면서 생각했던 부분이 생각처럼 잘 됐던 부분도 있고, 잘 안됐던 부분도 있지만 이번 프로젝트를 진행하면서 사람들과의 커뮤니케이션이나 개인적인 공부부분에 대해 다시 한 번 생각해보게 되는 계기가 됐습니다. 내가 알고 있다고 해서 다 되는 것도 아님을 한 번 더 느끼게 됐고, 그때그때마다 안되는 부분을 잘 정리해서 step by step으로 차근차근 내용을 정리해서 해결하는 습관을 키워야겠다는 생각도 했습니다. 그래도 어찌저찌 잘 마무리는 된 것 같아 안심이되지만 만족하지 않고, 앞으로 나아가는 제가 되기를 기원합니다.