예전부터 기록하고 싶었지만, 너무 귀찮아서 미루다가 이번에 계정 해킹으로 다시 배포할 기회가 생겼습니다. 그래서 이번에는 반드시 블로그에 잘 기록 해둬야겠다는 생각으로 S3배포부터 시작해서 가비아, ACM, CloudFront, Route53를 활용해 총 3개의 포스트로 https적용까지 과정을 작성하도록 하겠습니다.

1. 배포할 프로젝트 준비 및 빌드

배포를 하기 전에 프로젝트를 준비하세요. 연습용이라면 어떤 프로젝트든 상관없습니다.
프로젝트가 준비되었다면 프로젝트 IDE를 실행해서 npm run build or yarn build 로 드를 진행하시면 됩니다.
빌드를 하게 되면 build 같은 폴도가 생기게 됩니다.

• 이 파일은 나중에 s3에 객체를 추가할 것이니 일단 build가 성공되었다면 해당 파일은 잠시 내려놓고 aws에 접속합니다.

2. S3에 Bucket 생성

1. aws s3에 접속 하여 버킷만들기 클릭.
   

2. 버킷 이름과 지역 선택하기.
   이름은 원하는대로 지으면 됩니다. 저는 도메인 이름으로 지정했습니다.
   그리고 지역은 왠만하면 서울로 합니다.
   

3. Publick Access 활성화하기.
   Publick Access 차단(모든 퍼블릭 액세스 차단) 해제 버튼을 클릭 하면 하단에 !주의표시 아이콘이랑 체크 박스가 나타나게 되는데 그걸 선택해주면 Publick Access 활성화 됩니다.

4. 버킷 만들기를 클릭하여 생성을 완료합니다.
   

3.build 완료된 파일 업로드

1. 생성된 버킷을 클릭하여 페이지에 접속합니다.
   

2. 접속하여 업로드 버튼 클릭합니다.
   

3. 프로젝트에서 build한 파일을 업로드해줍니다.
   

4. 빌드가 끝나면 업로드 버튼을 클릭하여 업로드를 시작합니다.
   

5. 일정 시간이 지나면 업로드 성공이라는 메세지가 뜹니다.
   

4.정적 웹사이트 호스팅 설정

1. S3페이지에서 버킷 클릭 후 속성 버튼을 클릭합니다.
   

2. 속성메뉴 제일 하단에 정적 웹 사이트 호스팅 이라고 보입니다. 그 옆에 편집 버튼을 클릭합니다.
   

3.활성화 클릭 후 인덱스 문서와 오류 문서 페이지를 작성해줍니다.

• 인덱스 문서는 index.html으로 작성하고 오류페이지는 오류가 발생하면 나타나는 페이지를 입력해주면 되지만 저는 따로 없기에 index.html을 작성해주었습니다.
  이 부분은 각자 상황에 맞춰서 작성해주면 됩니다.
  생략도 가능한 것으로 알고 있습니다.

4. 설정이 완료 되었으면 제일 밑에 변경 사항 저장 버튼을 클릭합니다.
   

5.버킷 정책 수정

1. S3페이지에서 해당 버킷 클릭 후 권한 메뉴 이동합니다.
   

2. 하단에 버킷 정책이라고 보입니다. 편집 버튼 클릭합니다.
   편집을 눌러 버킷정책을 생성합니다.
   

3. 정책생성기클릭합니다.
   

4. 해당 화면에서 다음과 같이 작성해줍니다.
   

• Select Type of Policy: S3 Bucket Policy
  Effect: Allow
  Principal: *
  Actions: Get Objects
  Amazon Resource Name(ARN): arn:aws:s3:::example
  example는 설정한 버킷이름을 작성해줍니다.

5. 작성이 끝난 후 Add Statement를 클릭하면 Generate Policy가 나타나고 Generate Policy 버튼을 클릭합니다.
   

6. 아래와 같이 창이 발생하면 안에 있는 내용을 전부 복사 후 close 버튼을 누릅니다.
   

7. 아까 정책생성기 버튼을 누른 화면으로 돌아와서 아래 정책에 방금 전 복사한 내용 전부를 붙여넣기합니다.
   

8. 정확히 붙여넣기를 하였다면 변경 사항 저장을 클릭합니다.
   

이로써 S3정적 웹페이지 배포는 끝났습니다.
다음 포스트에 가비아로 도메인을 얻어서 ACM, CloudFront, Route53을 설정하겠습니다.