CloudFront , S3 , Route 53 을 통한 Vue 프로젝트 배포

1. 시작하며

그동안 프로젝트를 진행할 땐 CSR, SSR에 대한 고민 없이 프론트엔드 배포는 모두 EC2에서 진행을 했습니다.
이번 프로젝트에서는 CloudFront 학습 겸, CSR이 왜 CloudFront에서 좋은 점이 있는지 공부해가며 적용해보려 합니다.

2. S3 생성

CloudFront로 배포하기 위해서는 S3에 프로젝트가 업로드되어 있어야 합니다.

우선 프로젝트를 빌드해줍니다.

yarn build

프로젝트가 빌드되면 dist 폴더가 생성됩니다.

이제 S3를 생성하고 파일을 업로드 해보겠습니다.

S3를 생성한 후 파일을 업로드해보겠습니다.

주의
dist 폴더가 아닌 dist 폴더 내부의 파일들을 업로드해야 합니다.

3. S3 권한 설정

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

• 정책 생성기를 클릭해줍니다.

• Type of Policy : S3 선택
• Effect : Allow
• Principal : 모든 유저에게 허용할 것이므로 * 입력
• AWS Service : S3
• Actions : GetObject 선택
• ARN : S3의 고유 id 입니다. 이는 s3 이전 탭에 나와있습니다.

다음으로 Add Statement를 클릭해줍니다.

{
  "Id": "Policy1495981680273",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1495981517155",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::your-s3",
      "Principal": "*"
    }
  ]
}

이렇게 초기에 나온 S3 policy로 진행하니, S3 Bucket action doesn't apply to any resources 에러가 발생합니다.

이것을 해결하기 위해 다음과 같이 수정해줍니다.

{
  "Id": "Policy1495981680273",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1495981517155",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::your-s3/*", // 수정된 부분 
      "Principal": "*"
    }
  ]
}

https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_elements.html#Action

AWS 공식 문서를 확인해보면, s3 resources value 값은 지정해주어야 한다고 명시되어 있습니다.

4. 정적 웹 사이트 호스팅

S3의 속성 탭 클릭

정적 웹 사이트 호스팅 편집은 속성 탭의 최하단에 위치해 있습니다.

Vue는 SPA(Single Page Application)이기 때문에, 인덱스 문서, 오류 문서 모두 index.html로 시작해주어야 합니다.

설정을 마친 후 변경사항 저장을 눌러줍니다.

5. CloudFront 설정

• CloudFront 배포 생성 클릭

• 원본 도메인 선택에서 위에서 생성한 S3 정적 웹 사이트 호스팅을 선택해줍니다.

• 모든 요청은 HTTPS로 받기 위해 Redirect HTTP to HTTPS를 선택해줍니다.

• 가격 분류는 북미, 유럽, 아시아, 중동 및 아프리카에서 사용을 선택해줍니다.

• 현재는 SSL / TLS 인증서를 발급받지 않았기 때문에 추가적이 설정은 밑에서 더 해주겠습니다.

6. Route 53 설정

Route53에서 호스팅 영역을 생성해줍니다.
호스팅 영역 생성 후, 도메인을 구입한 사이트에서 값/트래픽 라우팅 대상을 설정해줍니다.

다음으로 Certificate Manager로 이동해줍니다.

중요
CloudFront에서 ACM을 사용하기 위해서는 리전을 버지니아 북부로 이동해야 합니다.

도메인 이름은 서브 도메인 사용을 위해 '*.도메인.com' 으로 설정해줍니다.

도메인을 생성한 후, DNS 검증을 위해 Route 53에서 레코드를 생성해주어야 합니다.

이를 간편하게 하기 위해
인증서 나열 - 인증서 선택 - Route 53에서 레코드 생성

이제 인증서가 발급되기까지 잠시 대기해주도록 합시다 (30분 정도 소요)

7. CloudFront 설정

인증서가 발급되었다면 CloudFront로 이동해줍니다.

CloudFront - 만든 배포 선택 - 설정 - 편집

• CNAME을 입력해줍니다. (ex: www.domain.com)
• 사용자 정의 SSL 인증서 : 위에서 생성한 SSL 인증서를 선택해줍니다.

두 설정을 마쳤다면 변경사항을 저장해줍니다.

8. Route 53 설정

생성해놓은 Route 53의 호스팅 영역으로 들어온 후, 레코드를 생성해줍니다.

1. 레코드 이름 : CloudFront에서 설정한 서브도메인을 입력합니다.
2. 별칭 선택 후 트래픽 라우팅 대상 - CloudFront 배포에 대한 별칭 - 배포 선택

레코드를 생성해줍니다.

9. 마무리

이제 10분정도 잠시 쉬다 오면, 생성한 레코드로 정상적인 접속을 할 수 있게 되었습니다.

다음 포스팅에서는 S3에 수동으로 업로드하고 배포하는 과정을 거치지 않도록, GitHub Action을 이용한 배포 자동화에 대해 알아보도록 하겠습니다.