안녕하세요. 스타트업에서 프론트엔드 개발을 맡고 있는 inseong입니다 😁
이번 글에서는 가비아에서 직접 구매한 도메인을 AWS 서비스를 활용해 프로젝트에 연결하고 배포하는 방법을 소개해 보겠습니다.
가비아 도메인 구매
▫️ 원하는 도메인을 구매한 뒤 가비아 > 서비스 관리 페이지에 접속하면 아래와 같이 구매한 도메인이 표시됩니다.
AWS Route 53 설정
호스팅 영역 생성
▫️도메인 이름 : 가비아에서 구매한 도메인 ( https:// 없이 )
▫️설명 : (선택) 도메인 설명
▫️유형 : 퍼블릭 호스팅 영역
가비아 네임 서버 등록
▫️ 전체 도메인 > 도메인 상세 > 네임 서버로 이동한 뒤, 네임서버 목록에 Route 53에서 생성된 4개의 NS 레코드를 등록합니다. (뒤에 온점은 삭제)
ACM SSL 인증서 발급
▫️ 미국 동부 : us-east-1에서 만들기
인증서 요청
구성 설정
▫️도메인 이름 : kickon.kr
▫️다른 이름 추가 : *.kickon.kr (*를 추가하면 www.kickon.kr, api.kickon.kr과 같은 서브도메인에서도 동일한 인증서를 사용할 수 있습니다.)
인증서 상태 확인 및 Route 53에서 레코드 생성
▫️ Route 53에서 레코드 생성을 클릭하여 2단계에서 생성한 레코드를 먼저 적용합니다. 이후 약 5분 정도 지나면 인증서가 자동으로 발급됩니다.
S3 버킷 생성
서울 리전으로 변경
▫️ 리전은 서비스 대상 지역과 가장 가까운 곳으로 선택하는 것이 좋습니다. 가까운 리전을 사용할수록 지연 시간이 줄어들어 사용자에게 더 빠른 서비스를 제공할 수 있습니다.
버킷 만들기
▫️ 버킷 이름 : 해당 프로젝트의 닉네임
▫️ 객체 소유권 : ACL 비활성화됨(권장)
▫️ 모든 퍼블릭 액세스 차단: true
S3 객체에 빌드 파일 업로드
▫️ React + Vite 프로젝트는 빌드(npm run build)를 수행하면 dist 폴더가 생성됩니다. 생성된 dist 폴더의 모든 파일을 앞에서 생성한 S3 버킷에 업로드해 주세요.
▫️ Next일 경우
Cloudfront 생성
플랜 선택
▫️무료 버전 선택
설명 옵션 선택
▫️ Distribution name : 프로젝트 닉네임
▫️ Description : (선택) 프로젝트 설명
▫️ Distribution type : Single website or app
▫️ Domain : 비워둠 ( 이미 ACM 인증서를 발급받았기 때문에 사용할 필요 X )
Origin type 설정
▫️Origin type : Amazon S3
▫️S3 Origin : Browse S3 클릭 → -admin 클릭
Enable security
▫️설정 그대로 유지 후 Next
Review and Create
▫️최종 설정 확인 후 Create distribution
▫️Add domain : 해당 되는 도메인 입력 ( 서브 도메인으로 관리자를 배포하기 위해 admin.kickon.kr 로 설정했습니다. )
▫️기본 루트 객체 : index.html
Route domains to CloudFront
▫️Route domains to CloudFront 누르면 Set up routing automatically 클릭
