[AWS] AWS를 이용한 정적 웹페이지 호스팅 및 도메인 연동 방법 (S3 + CloudFront + Route53을 이용한 프론트 프로젝트 배포 방법, 배포 후 403 뜨는 경우 해결 방법)
정적 웹페이지 배포하기
고정된 데이터를 그대로 보여주는 정적 웹페이지(ex. 회사 소개 페이지, 포트폴리오 페이지...)는 AWS를 이용해 간단하게 배포가 가능하다. AWS의 S3와 CloudFront 서비스를 이용해 웹페이지를 배포하고, Route53으로 개인 도메인을 연동하는 방법까지 알아보자!
배포 방법
1. S3 버킷 생성 및 설정
1-1. 우선 AWS 콘솔에 로그인하여 S3 서비스에 접속한 다음 [버킷 만들기] 버튼을 클릭한다.
1-2. 버킷 이름과 AWS 리전을 설정해 준다. AWS 리전은 가까운 곳으로 설정해 주는 것이 좋다.
1-3. 버킷의 퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단 체크 박스를 해제해 준다. 우리는 정적 웹 사이트 호스팅을 할 예정이기 때문에 퍼블릭 액세스가 필요하다.
1-4. 다른 설정 값들은 기본 값으로 두고 [버킷 만들기] 버튼을 눌러 버킷을 생성한다.
1-5. 방금 생성한 버킷의 이름을 클릭해 상세 페이지에 진입한다.
1-6. 버킷 상세페이지 상단의 [속성] 탭을 클릭해 속성 탭으로 이동 한 뒤, 아래쪽에 있는 정적 웹 사이트 호스팅 옆 [편집] 버튼을 클릭한다.
1-7. 정적 웹 사이트 호스팅을 활성화시켜 주고, 인덱스 문서에 프론트 빌드 파일의 html 파일명을 적어준 뒤 [변경 사항 저장] 버튼을 클릭해 설정을 저장한다.
1-8. 다시 버킷 상세페이지 상단의 [객체] 탭으로 이동해, [업로드] 버튼을 클릭해 프론트 빌드 파일을 업로드해 준다.
1-9. 업로드한 파일들이 잘 업로드되었는지 확인해 주면 S3 설정은 끝이다!
2. CloudFront 설정 및 배포
2-1. S3에 업로드한 파일을 CDN을 통해 배포하기 위해 AWS 콘솔에서 CloudFront 페이지로 이동해 [배포 생성] 버튼을 클릭해 준다.
2-2. 원본 도메인을 클릭해 아까 생성해 둔 S3 버킷을 선택한다.
2-3. 기본 캐시 동작을 아래와 같이 지정해 준다.
2-4. 캐시 키 및 원본 요청은 recommended 된 값을 사용하고
2-5. WAF 설정은 활성화 시 비용이 들기 때문에 활성화하지 않는다.
2-6. 나중에 cloudFront와 연결할 대체 도메인 이름(CNAME)을 추가해준다. 그리고 기본값 루트 객체에 html 파일명을 적어주고, IPv6 설정을 꺼두고 나머지 설정은 기본값을 사용하여 변경 사항을 저장한다.
2-7. 생성한 배포의 상세 페이지 상단의 [오류 페이지] 탭으로 이동한 뒤 [사용자 정의 오류 응답 생성] 버튼을 클릭한다.
2-8. SPA 프로젝트 배포 시 프론트 라우팅을 사용하기 위해 하는 설정이다.
S3에서는 찾고자 하는 파일이 없는 경우 오류코드 403을 응답하기 때문에, 오류코드를 403으로, 응답 페이지 경로를 /index.html, HTTP 응답 코드를 200으로 아래와 같이 설정 후 [사용자 정의 오류 응답 생성] 버튼을 클릭해 준다.
2-9. 이제 모든 설정이 완료되었다! 배포 상세 페이지의 배포 도메인 이름 주소로 접속하면 S3에 업로드한 웹페이지가 떠있을 것이다!
+ 만약 배포 도메인 접속 시 403이 뜬다면?
오류해결-1. 이 경우에는 S3버킷에 대한 권한 설정이 되어 있지 않아 생기는 오류로, 버킷 정책 설정이 따로 필요하다.
빌드 파일을 업로드해 두었던 S3 버킷 상세페이지로 다시 접속한 뒤, 상단의 [권한] 탭으로 이동해 준다.
오류해결-2. 권한 탭 아래에 있는 버킷 정책의 [편집] 버튼을 눌러 편집 상세페이지로 진입한다.
오류해결-3. 버킷 정책에 json 형태의 정책을 복붙 해준 뒤(Resource의 값은 정책을 편집하고자 하는 S3버킷의 ARN으로 넣어준다.), [변경 사항 저장] 버튼을 클릭해 정책을 저장한다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "{버킷 ARN}/*"
}
]
}
오류해결-4. 이제 다시 CloudFront로 배포한 도메인에 접속하면 배포한 페이지가 오류 없이 성공적으로 올라가는 것을 확인할 수 있다!
+ S3에 새로운 파일 업로드를 했지만 업로드가 되지 않는 경우? (캐시 무효화)
S3에 새로운 파일을 업로드한 경우 기존 파일의 캐시를 무효화해 주는 작업이 필요하다.
배포 상세페이지 상단의 [무효화] 탭으로 이동한 뒤 [무효화 생성] 버튼을 클릭해 준다.
무효화할 객체의 경로를 추가해 준 뒤 [무효화 생성] 버튼을 클릭해 준다.
/* 는 객체의 모든 파일의 캐시를 무효화해 주고, 특정 파일, 폴더에 대한 무효화를 지정해 줄 수도 있다.
무효화를 생성한 뒤 상태가 '완료됨'으로 변경되면 기존 캐시가 무효화되어 배포한 사이트에 새로운 파일이 업데이트된다!
도메인 연동 방법
개인 도메인 연결이 따로 필요하지 않다면 위 방법으로 정적 웹페이지 배포/호스팅은 끝이다!
하지만 개인 도메인을 가지고 있고, S3 + CloudFront로 배포한 사이트를 개인 도메인에 연동하고 싶다면, 아래 작업을 추가적으로 해주면 된다.
3. Route53으로 도메인 연결
3-1. AWS 콘솔에서 Route53 서비스에 접속해 호스팅 영역으로 이동한 뒤, [호스팅 영역 생성] 버튼을 클릭한다.
3-2. 구매한 개인 도메인 이름을 입력해 준 뒤, [호스팅 영역 생성] 버튼을 눌러준다.
3-3. 호스팅 영역을 생성하면 아래와 같이 NS 레코드와 SOA 레코드가 기본으로 생성된다.
3-4. 도메인 구매처에서 연결하고자 하는 도메인의 네임서버를 방금 Route53에서 생성한 호스팅 영역의 NS 주소로 변경해 준다. (아래 사진은 후이즈에서 구매한 경우의 도메인 네임서버 변경 화면이다.)
3-5. 이제 다시 아까 배포해 두었던 CloudFront의 배포 상세 페이지로 이동해 설정 옆 [편집] 버튼을 클릭한다.
3-6. 이제 대체 도메인 이름 (CNAME)을 설정해 줄 차례인데, AWS는 인증되지 않은 도메인은 설정하지 못한다. 과정이 조금 복잡하게 느껴질 수 있지만 조금만 참고 도메인에 대한 SSL 인증서를 먼저 발급받아보자! [인증서 요청] 버튼을 클릭한다.
3-7. [다음] 버튼을 클릭하기 전에 오른쪽 상단의 region이 '버지니아 북부'로 되어 있는지 꼭 확인해야 한다. 다른 region에서 받은 인증서는 나중에 사용할 수 없다. 위 화면에서 [인증서 요청] 버튼을 클릭해 이동했다면 region이 자동으로 지정되어 있을 것이다.
3-8. 완전히 정규화된 도메인 이름에 구매한 도메인 이름을 적어준다.
나는 www. 이 붙은 도메인과 붙지 않은 도메인 두 개를 추가해 두었다.
다른 설정은 기본값으로 둔 뒤 [요청] 버튼을 클릭한다.
3-9. 인증서를 요청하면 이렇게 인증서 목록에 검증 대기 중이라는 상태로 방금 생성한 도메인이 생긴다. 이제 도메인 구매자의 메일로 검증 링크가 전송되는데 메일에서 이 검증 링크를 클릭해 검증하면 상태가 발급됨 상태로 바뀐다. (검증 메일은 추가한 도메인 이름 개수만큼 전송되니 전부 승인해줘야 함)
3-10. 인증서를 발급 받은 뒤에 CloudFront에 연결할 A 레코드를 생성해주어야 한다. Route53의 아까 생성해둔 도메인의 호스팅 영역에 들어가 [레코드 생성] 버튼을 클릭해준다.
3-11. 레코드 이름을 지정해주고 레코드 유형을 A로 설정한 뒤 별칭을 활성화 시켜준다. 레코드 이름은 비워두거나, www를 붙여도 괜찮다. 두 가지 다 연동하고 싶다면 www 붙인 버전과 붙이지 않은 버전 두개의 A 레코드를 생성해주면 된다.
별칭이 활성화 되면 트래픽 라우팅 대상 리스트가 뜨는데 이 중 'CloudFront 배포에 대한 별칭'을 선택한다.
3-12. 그 다음 아래에 있는 배포 선택을 클릭해 리스트 중 배포를 위해 생성해둔 CloudFront를 선택해준 뒤, 레코드를 생성한다.
나는 www 버전과 없는 버전 두가지를 만들기 위해 총 2개의 레코드를 생성했다. 생성 뒤 레코드 리스트에 생성한 A 레코드가 뜨면 성공 !
3-13. 이제 다시 CloudFront 배포 상세 페이지의 설정 옆 [편집] 버튼을 클릭해 설정 편집 페이지로 이동해, 대체 도메인 이름(CNAME)을 설정해 준다.
아까 만들어둔 A레코드 이름을 아래와 같이 추가해 준 뒤, 사용자 정의 SSL 인증서를 클릭해 리스트에서 이전에 발급받아둔 도메인의 인증서를 선택해 준다. 그리고 [변경 사항 저장] 버튼을 눌러 저장해 주면 끝!
3-11. 배포 상세 페이지에서 대체 도메인 이름과 사용자 정의 SSL 인증서를 확인할 수 있다면 성공이다. 이제 연결한 도메인으로 접속하면 S3에 업로드한 페이지가 성공적으로 올라간 것을 확인할 수 있다.
(실제로 사용 중인 도메인이라 모자이크 처리함)
마무리
간단한 정적 웹페이지를 빠르게 호스팅 해야 하는 상황에서, AWS를 이용해 사이트를 직접 배포하는 방법과, Heroku나 Koyeb과 같은 클라우드 솔루션을 이용해 배포하는 방법. 이 두 가지 중에서 어떤 방법을 사용할지 고민을 많이 했다.
처음엔 깃헙에 코드 푸시만 하면 바로 배포가 되는 클라우드 솔루션을 이용해 빨리 끝내버릴까 하는 생각도 들었지만,
나중에 트래픽이 증가할 경우에 비용 걱정이 있었고, 언젠가는 관리 차원에서라도 사이트를 다시 AWS로 옮겨오게 될 것 같아 개발 처음부터 그냥 AWS로 직접 배포를 해야겠다는 생각으로 점점 바뀌게 되었다.
하지만 아직까지 한 번도 AWS로 실제 웹 페이지를 호스팅 해본 적이 없어, 생각보다 큰 작업이 되지 않을까 약간 걱정도 되었는데, 다행히 구글링 해본 결과 서버설정이 따로 필요 없는 정적 웹페이지 호스팅은 시도해 볼 만해 보였고, 1년간 무료 프리티어 요금제를 사용해 초기 서버 비용도 줄일 수도 있는 등 여러모로 이점이 많았다.
더불어 작년에 AWS 자격증 공부를 한번 해둔 덕분에 AWS에 대한 부담감과 거리감(?)이 많이 적어진 상태라 결국 최종적으로 AWS로 사이트를 배포하기로 결정했다!
결론적으로는 예상보다 빠르게 AWS를 이용해 웹 페이지 호스팅과 도메인 연결을 모두 완료했고, 이번 작업 덕분에 기억 저편으로 점점 멀어져 갈 뻔했던 AWS 지식들도 다시 슬금슬금 되돌릴 수 있는 계기가 되었던 것 같다!
배포 후 바로 정리하지 않으면 나중에 까먹게 될 것 같아 정적 웹 페이지 배포를 하면서 겪었던 오류 해결 과정과 다소 복잡한 옵션 설정 과정을 바로 정리해 두었다. 다른 누군가에게 도움이 되길 바라며 포스팅을 마무리해 본다 🤓