[1주차] CloudFront, S3 쉽게 배포하기

[월간-CS][24년 4월] React, Next 배포와 배포 자동화 A부터 Z

이민석

Mar 27, 2024

Contents

프로그램 설치 aws cli terraform aws iam 생성하기 aws-cli profile 설정하기 인프라 소개하기 작업 환경 준비 작업 환경 준비 실습 진행 결론

프로그램 설치

1주차 실습을 위한 인프라의 손쉬운 배포를 위해서 아래의 프로그램 설치가 필요합니다.

aws cli — 공식문서 참고
terraform — 공식문서 참고

aws cli

주의사항
반드시 본인의 운영체제에 맞는 버전으로 설치하여야 합니다.

terraform

주의사항
설치일(2024-04-04) 기준으로 최신 버전으로 설치하여야 합니다.
8주 동안 버전 변경이 없을 예정이지만, 버전이 변경될 경우 업데이트 일정을 전달해드립니다.

aws iam 생성하기

AWS Console 로그인하기
검색창에 IAM을 검색하고 클릭하기
IAM 대쉬보드에서 사용자 생성하기 클릭
사용자 명은 monthly-cs-full-access로 통일
스터디 원활한 운영을 위해서 이름을 통일하려고 합니다.
직접 정책 연결 클릭하기
AdministartorAccess 검색하고 선택한 후, 사용자 생성하기
스터디 원활한 진행을 위해서 모든 권한을 열고 있는 만큼 IAM 키를 절대로 외부에 유출하시면 안됩니다!! 특히, GitHub 업로드 하면안됩니다!!!
IAM 대쉬보드에서 monthly-cs-full-access 클릭하기
monthly-cs-full-access 엑세스 키 만들기 선택하기
Command Line Interface(CLI) 선택하고 동의하고 다음 클릭
엑세스 키 복사, 붙여넣기해서 보관하기

aws-cli profile 설정하기

aws configure --profile monthly-cs
스터디 원활한 운영을 위해서 이름을 통일하려고 합니다.
프로필 명이 다르면 나중에 나오는 모든 스크립트를 바꿔야 해서 번거롭습니다.
IAM CLI 키 생성하셨을 때,
- 엑세스 키 → AWS Access Key ID
- 비밀 엑세스 키 → AWS Secret Access Key

인프라 소개하기

특정 도메인을 검색하게 되면 그 도메인을 소유하고 있는 네임서버 쪽으로 요청을 보내게 됩니다.

도메인을 구매한 가비아에서 네임서버를 AWS Route53의 네임서버로 변경하게되면, 사용자의 요청이 AWS Route53으로 가게 됩니다.

unchaptered.shop으로 접속을 시도하면, Route53은 해당 url 에 대한 A 레코드가 있는지 탐색합니다. 만약 CloudFront를 향한 A 레코드가 있다면 CloudFront로 요청을 보내게 됩니다.

CloudFront를 생성할 때, HTTPS 설정을 해두었기 때문에 ACM(Certificate Manager)로부터 TLS/SSL 인증서를 받아와서 사용자는 https://unchaptered.shop으로 접속이 가능해집니다.

또한 CloudFront는 요청에 대해서 원본 저장소인 S3에서 파일을 꺼내오게 되고 기본 경로인 /index.html에 있는 리엑트 파일에 접근하게 됩니다.

이런 과정을 통해서 사용자는 CSR 방식으로 배포된 리액트에 접속하게 됩니다.

번외
ACM으로 TSL/SSL 인증서를 발급받고 나면 해당 인증서의 Key & Value 값을 Route53의 CNAME 레코드로 등록해야 합니다.
AWS에서는 이 과정을 자동으로 진행해줍니다.

작업 환경 준비

실습용 저장소 접속하기
https://github.com/monthly-cs/2024-04-cicd-week-1-template
실습용 저장소를 개인 저장소로 포크 뜨기

해당 저장소를 클론 받기

git clone https://github.com/<본인 GitHub UserName>/2024-04-cicd-week-1-template

예)
git clone https://github.com/unchaptered/2024-04-cicd-week-1-template.git 2024-04-cicd-week-1-template-practice

실습 진행

DNS 리소스 배포하기
```
cd ./infra/dns

terraform init
terraform apply -var="profile=monthly-cs" -var="domain_name=<가비아에서 구매한 도메인>"

예)
terraform apply -var="profile=monthly-cs" -var="domain_name=unchaptered.shop"
```
1. terraform apply를 입력하고 yes를 입력해야 리소스가 생성이 됩니다.
2. DNS 리소스 배포까지 60~120초 정도의 시간이 걸립니다.
  완료 이후, dns_ns_record 배열에 ns-***** 의 형태로 4개의 문자열이 나옵니다.
  해당 터미널을 종료하지 말아주세요!
  종료하셨다면 해당 폴더에서 3번에서 입력한 terraform apply를 다시 입력하시면 됩니다.
가비아에서 구매한 도메인의 NS 수정하기
1. 가비아 메인홈에 들어가서 우상단의 My가비아 들어가기
2. 구매한 도메인이 있는지 확인하고 있으면 관리 버튼 클릭하기
3. 아래 페이지에서 네임서버 옆의 설정 버튼 클릭하기
4. 3-b 단계에서 나왔던 dns_ns_record 값을 옮기기

CloudFront, S3 배포하기

해당 리소스는 60초에서 300초 이내로 생성이 완료됩니다.

cd ../../ # 프로젝트 경로로 가기
cd ./infra/website

terraform init
terraform apply -var="profile=monthly-cs" -var="domain_name=<가비아에서 구매한 도메인>"

예)
terraform apply -var="profile=monthly-cs" -var="domain_name=unchaptered.shop"

로컬에서 배포 준비하기
1. 프로젝트 루트 디렉토리로 이동하기
```
cd ../../
```
2. yarn install를 이용해서 모듈 다운받기
3. yarn build를 이용해서 빌드하기
4. 빌드 파일 s3에 업로드하기
```
aws s3 cp --recursive ./build s3://<가비아에서 구매한 도메인> --profile monthly-cs

예)
aws s3 cp --recursive ./build s3://unchaptered.shop --profile monthly-cs
```