[AWS] 리액트 프론트 배포(S3+CloudFront), 가비아 도메인 https 연결하기(route53)

현재 구현중인 아키텍처 중, 빨간 박스 내의 아키텍처 부분에 대한 포스팅이다.

목표: 구매한 도메인으로 프론트 배포하기

React로 개발한 프론트엔드 프로젝트를 사용자가 직접 접근할 수 있도록, S3 + CloudFront + Route53 + 사용자 도메인을 이용해 배포하고자 한다.

---

0.  도메인 구매

임의의 긴 S3 URL 대신 www.example.com 같은 직관적인 주소로 사용자에게 서비스를 제공할 수 있다.

 

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

 

가비아는 원하는 도메인 주소를 구매할 수 있도록 해주는 사이트이다.

 

 

원하는 도메인 이름이 "studying404"라면, 위와 같이 다양한 가격의 여러 도메인을 추천해준다.

 

나는 1년에 2500원 (+부가세 250원) 짜리 도메인을 구매했다.

---

1. node 설치 및 프로젝트 깃 클론

React 프로젝트를 빌드하기 위해 Node.js와 NPM이 필요하다. 

node -v
npm -v

 

설치 전, 기존에 설치된 내용이 있는지 확인한다. 

brew install node

 

만약 설치가 안되어 있다면, 위의 코드로 설치하면 된다.

 

# 프로젝트 클론
git clone [repository 주소]

# 프로젝트 디렉토리로 이동
cd [project name]

# package.json 확인
ls

# package.json 위치에서 의존성 설치
npm install

 

위의 명령어를 통해 프로젝트를 실행하기 전의 환경 설정을 해준다.

 

# 로컬에서 실행해보기 (localhost:3000 페이지가 자동으로 열리며 확인 가능)
npm start

# 프로젝트 빌드 
npm run build

 

로컬에서 잘 동작하는 것을 확인 후에, npm build를 통해 빌드를 진행해준다.

 

이때, 빌드 결과물은 ./build 디렉토리에서 확인할 수 있다.

 

---

 

2. S3 생성 및 파일 업로드 

S3는 AWS에서 제공하는 정적 파일 저장소이다. React 프로젝트를 S3에 업로드해 웹페이지를 호스팅할 수 있다.

 

AWS Management Consol > S3 > 범용 버킷 > 버킷 만들기 

 

버킷 이름을 설정하고, 퍼블릭 액세스 차단을 풀어준다.

 

나머지는 기본으로 설정한 뒤에, 버킷 만들기를 해준다.

 

버킷을 생성한 후에, 해당 버킷을 눌러서 빌드 파일들을 업로드 해주면 된다.

 

객체 > 업로드 

 

나는 프로젝트의 빌드 폴더 내의 모든 파일들을 한번에 업로드 해주었다.

 

버킷 > 속성 > 정적 웹사이트 호스팅 > 편집 

 

위와 같이 정적 웹사이트 호스팅을 설정해준다.

 

http://[버킷 이름].s3-website.[리전 이름].amazonaws.com

 

그러면 위와 같은 버킷 웹사이트 엔드포인트가 생기는데, 여기로 접속하면 로컬에서 보이던 웹페이지가 배포된 모습을 확인할 수 있다.

 

---

3. CloudFront 배포 생성

S3 단독으로는 HTTPS 지원이 안 됩니다. CloudFront를 사용하면 보안된 HTTPS 통신과 글로벌 CDN 캐싱 기능을 제공한다.

 

CloudFront > 배포 > 배포 생성 

 

 

origin type은 s3로 설정하고,

 

s3 origin은 이전에 생성한 s3 버킷을 선택하면 된다.

 

밑에 Setting은 기본값으로 설정했다.

 

위와 같이 설정해서 배포를 생성하면 된다.

 

---

 

4. AWS Certificate Manager 로 SSL 인증서 생성

CloudFront에 HTTPS를 적용하려면 공인된 SSL 인증서가 필요하다.

 

 

먼저 리전을 미국(버지니아 북부)로 변경한 후, 인증서 요청을 클릭한다.

 

버지니아 북부 리전이 아닌 다른 리전을 선택하면 인증서 연결이 정상적으로 안되기때문에, 꼭!! 리전 변경을 확인해야한다.

 

 퍼블릭 인증서 요청 선택한다.

퍼블릭 인증서 요청 내용으로는, 내가 구매한 도메인 이름을 넣어주면 된다. 

 

예를들어, 구매한 도메인 이름이 "example.com"이라면 www.example.com, example.com을 넣어주면 된다.

 

나머지는 기본 세팅으로 선택한 뒤, 요청 버튼을 눌러 인증서를 만든다.

 

 

그러면 이런식으로 인증서가 보인다.

 

인증서를 클릭하면, 위에서 등록한 2개의 도메인에 대한 2개의 CNAME이 생긴다.

 

예를 들면, 아래와 같다.

도메인 네임	상태	유형	CNAME 이름	CNAME 값
www.example.com	검증 대기중	CNAME	_aaa.www.example.com.	_bbb.acm-validations.aws.
exmaple.com	검증 대기중	CNAME	_ccc.example.com	_ddd.acm-validations.aws.

 

 

---

5. 가비아 DNS 관리툴로 CNAME 등록

ACM 인증서의 유효성을 검증받기 위해서는 가비아에서 발급받은 도메인의 DNS 설정에 CNAME 레코드를 등록해야 한다.

 

아래 링크로 접속해서, DNS 관리툴 > DNS 설정 으로 접속한다.

 

https://webhosting.gabia.com/dns

가비아: 대한민국 No.1 웹호스팅

 

DNS 설정을 누르면, '레코드 추가' 버튼으로 등록을 진행한다.

 

이때, SSL 인증서 내용이 아래와 같았다면, 

 

레코드 등록 내용은 다음과 같다.

 

도메인 네임에 www가 포함되는지 여부에 따라 입력하는 내용이 다르므로 잘 넣어야한다.

 

이렇게 레코드를 잘 추가했다면, SSL 인증서의 상태가 '검증 대기중'에서 '성공' 상태로 바뀌게 된다.

 

 

---

6. CloudFront 설정 

CloudFront에서 도메인과 인증서를 설정해 HTTPS로 안전하게 연결되도록 한다.

 

CloudFront로 다시 돌아와서, 

 

배포 > '배포한 cloudfront 선택' > 일반 > 설정 > 편집

 

 

Use all edge locations를 선택하고(기본 설정), 두 개의 도메인 주소를 입력한다.

 

 

이전에 생성했던 SSL 인증서를 선택해준다. 

 

이때 SSL 인증서 선택창에 아무것도 안보인다면, SSL 인증서를 버지니아 북부 리전이 아닌 다른 리전(예: 서울)에 생성했을 가능성이 있다.

 

그러면 해당 인증서를 삭제한 후, 미국 버지니아 북부 리전에서 SSL 인증서를 다시 생성하면 된다.

 

배포 > '배포한 cloudfront 선택' > 일반 > 원본 > 원본 편집

원본 액세스 제어를 선택한 뒤, 

 

Create new OAC를 통해 OAC를 생성하여 선택한다. 

 

이때, 생성하는 OAC는 기존 S3와 이름이 동일해야하므로, 건드릴것 없이 그대로 create하면 된다.

 

 

---

 

7. S3 버킷 정책 설정하기

CloudFront가 S3에 접근하려면, S3에서 이를 허용하는 버킷 정책이 필요하다. 따라서 버킷 설정이 잘못되면 Access Deny 오류가 많이 발생하므로, 꽤 까다롭다.

 

S3 > 버킷 > 권한 > 버킷 정책 > 편집

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontReadAccess",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2XXXXXXX12345" 
        // <== CloudFront Origin Access Identity (OAI) ARN - 각자 자신의 OAI ARN으로 바꿔주기
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::s3-goorm-frontend/*" 
      // <== 자신의 버킷 이름으로 변경하기
    },
    {
      "Sid": "AllowCloudFrontServicePrincipal",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::s3-goorm-frontend/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::<YOUR_AWS_ACCOUNT_ID>:distribution/E1XXXXXXABCDEF"
          // <== CloudFront 배포의 ARN. 배포 ID를 사용하여 ARN 전체를 구성해야 한다.
        }
      }
    }
  ]
}

 

나의 정책 설정은 위와 같다. 

 

최대한 비슷하게 맞추는게 오류가 덜생기는 방법일것 같아 정책을 그대로 공유한다.

 

---

 

8. Route53 호스팅 영역 생성 + 가비아 네임서버 지정

도메인을 AWS의 Route53과 연결해 도메인과 CloudFront를 연결하려면 DNS 서버를 AWS 쪽으로 위임해야 한다.

 

route53 > 호스팅 영역 > 호스팅 영역 생성

 

구매한 도메인 네임을 그대로 입력하여, 퍼블릭 호스팅 영역을 생성한다.

 

 

생성된 호스팅 영역을 클릭하면, 두개의 레코드가 보일것이다. 

 

여기서 NS 타입의 값/라우팅 대상을 가비아의 네임서버로 지정해주면 된다.

 

 

다음으로는 가비아 네임서버를 생성된 레코드 내용에 따라 수정해준다.

 

 

my 가비아 > 관리 > 도메인 정보 변경 > 네임서버 > 설정

 

네임 서버 설정에 들어가면, 1차~4차 까지 설정된 호스트 명들이 존재하는데, 

 

내용들을 모두 지우고 route53의 네임서버 이름으로 순서대로 바꿔주면 된다.

 

이때, route53의 네임서버 명에는 맨 뒤에 '.' 온점이 들어가는데,

 

이 온점을 빼고 호스트 명으로 등록해줘야 정상적으로 호스트명이 등록된다.

 

소유자 인증 후에 적용을 누르면 된다.

 

---

9. CloudFront의 A, AAAA 레코드 등록

내가 구매한 도메인을 통해 CloudFront 배포로 접속 가능하게 만든다.

클라우드 프론트의 배포된 것을 클릭하면, 설정 부분의 중앙에 "Route domains to CloudFront" 버튼이 있다.

 

해당 버튼을 클릭하면, 

 

example.com, www.example.com  두 도메인에 대한 A,  AAAA 레코드를 편하게 등록할 수 있다.

 

Set up routing automatically를 클릭한다.

 

 

잘 등록되었는지 확인하는 방법은, route53의 호스팅영역의 레코드를 확인해보면

 

기존에 2개였던 레코드가 총 6개로 늘어난 모습을 확인할 수 있다.

 

10. CloudFront 무효화

CloudFront > 배포 > 무효화 > 무효화 생성

 

CloudFront는 기본적으로 S3의 파일을 캐싱해서 빠르게 보여준다.

그래서 파일 내용이 바뀌어도 CloudFront는 예전 캐시를 계속 보여주게된다.

 

따라서 S3버킷의 업데이트가 있을때마다 무효화 생성을 해주면 최신 캐시로 업데이트된 페이지를 볼 수 있다.

/* 로 모든 경로에 대한 무효화를 생성한다. 

 

11. 마무리 

드디어, 내가 구매한 도메인 주소로 접근이 가능해진다. >_<

https://www.exmaple.com/

 

+) 서브도메인(api.example.com)을 생성해야한다. 
https://velog.io/@yoonth95/AWS-Route53-%EC%84%9C%EB%B8%8C-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%84%A4%EC%A0%95

AWS Route53 서브 도메인 설정