IAM 사용자를 생성한뒤 IAM사용자로 로그인해서 시작함.
가비아에서 아무 도메인이나 하나 구매한 상태에서 시작함.
0. Route53 호스팅영역 생성
DNS관리 밑에 작은 호스팅영역 생성 클릭.
가비아에서 구매한 도메인을 입력하고 바로 생성.
Route53은 후반부에 마저 설정해줄 예정이다.
1. S3 버킷 만들기
원하는 버킷 이름을 설정해준다.
aws리전은 서울로 설정.
ACL설정은 여기 올린 객체의 소유권을
지금 생성한 이용자로 할지, 아니면 다른 계정에서 업로드한 사람이 소유할지 옵션인데,
추후에 필요시 활성화해서 사용하자.
우린 정적 사이트를 호스팅하지만, CloudFront를 이용해서 호스팅하므로 아래와 같이 체크한다.
참고로 만들어진 버킷 속성에 있는 아래 옵션도, 우리는 cloudFront를 이용하기 때문에 사용하지 않는다.
그리고 CloudFront 로 이동한다.
오른쪽 배포 생성을 클릭함.
배포 생성에서 원본 도메인을 누르면 아까 만든 S3 버킷이 보인다. 선택한다.
원본엑세스에서 OAI설정을 해야 퍼블릭엑세스가 막혀있는 S3 버킷에 접근할 수 있다.
CloudFront를 통해서만 사용자가 S3 버킷을 조회할 수 있게 해준다.
OAI가 없다면 오른쪽에 새 OAI생성으로 만들어주면 된다.
원본도메인 / 이름 / 원본엑세스 아이디는 동일하다.
Origin Shild는 동일한 객체에 대한 요청을 통합해서 요청 수를 줄여주고, ORigin에 대한 지연시간이 짧은 aws지역에서 origin shild를 활성화하면 성능이 개선된다 .
기본 캐시 동작 세팅
뷰어 프로토콜은 http를 https로 redirect시켜주는 옵션을 선택.
백앤드 서버와 토큰 관련 요청에서 https가 필수이기 때문에 http and https는 선택하지 않는다.
캐시 정책은 개발과정에서는 caching을 활성화하면 24시간동안 무효화하지 않으면 변경사항 적용이 안되기 때문에, 개발과정에서는 caching을 disabled하고, 서비스를 시작하면 optimized로 변경해도 된다. 이 캐싱 때문에 s3 엑세스 횟수를 매우 많이 줄여주기 때문이다.
caching optimized를 하고, 배포때마다 무효화를 시켜줘도 된다.
완료를 누르고,
배포된 CloudFront로 들어가본다.
오른쪽 설정을 눌러준다.
(아래 사진은 설정이 완료된 사이트라 항목이 조금 다를수 있다. 아마 인증서, 대체도메인, 루트객체가 비어있을것이다)
나는 가비아에서 dongnemashil.me라는 도메인을 구입해서, 아래와 같이 입력했다.
인증서가 없으면, 인증서요청 버튼을 눌러준다.
이 화면으로는 조만간 다시 돌아와야하니 옆으로 빼두자.
아래와 같은 화면이 나오면 다음
정규화된 도메인 이름에는 가비아에서 구매한 도메인을 그대로 적어준다.
dongnemashil은 내가 이미 신청을 해서,
임의의 다른 이름을 적어주었고, 본인이 구매한 도메인 이름을 아래와 같이 적어준다.
요청을 누르면 위에 파란 알림창이 뜬다 .
인증서 보기를 클릭한다.
아래 주소는 임의의 주소라 모자이크를 하지 않았다.
아래 CNAME값과 이름을 사용해야하니, 어디 복사해두거나 창을 닫지 말자.
창을 닫았을 경우 서비스 검색 -> ACM을 검색하면 나온다.
자 이제 가비아로 간다.
마이페이지 원하는 도메인의 관리 클릭
자 그럼 이런 화면이 나온다.
그럼 우선 네임서버부터 설정해줄 것이다.
아까 만들어두었던 Route53에 들어간다.
내가 만든 호스팅영역 이름 클릭
저기서 A유형은 아직 없을것인데, 곧 설정할 예정이니 걱정말고,
NS 레코드에 체크를 하면 오른쪽에 값이 나온다. 이제 가비아로 간다.
아까 가비아 도메인 관리 화면에서 네임서버에 설정을 누르고, 기존에 있던 네임서버를 모두 지우고 위에있는 4개를 넣어준다.
그리고 저장이 되었으면, 이제 DNS레코드 설정을 누른다.
그럼 DNS관리사이트로 이동하는데, 원하는 도메인을 체크하고 DNS 설정을 누른다.
여기 아마 지금은 아무것도 없을건데,
여기에 아까 인증서 생성에서 나왔던 CNAME을 사용할것이다. 본문 중간쯤 있었다.
레코드 추가 버튼을 누르고 CNAME을 선택하고,
호스트 이름에는
CNAME이름에서 뒤 도메인 주소를 제외한 값을 입력한다.
예를들어 CNAME이 아래와 같으면
_35462c67033d4aca557d93eeae877bf4.example123123a.net.
이건 아래와 같이 입력한다. (맨 뒤 점이 없음에 유의한다)
_35462c67033d4aca557d93eeae877bf4
값/위치에는 CNAME값을 그대로 넣어준다. 맨 뒤에 점까지 모두
_3b3c5b2f1c32872ae434457392df871f.qqqkmlyjyg.acm-validations.aws.
그리고 저장을 해준다!
그리고 아마 AWS Certificate Mamager에서 새로고침 버튼을 누르다보면 30분 이내에 발급됨으로 바뀐다.
자 그럼 초반부에 있었던 CloudFront 설정편집으로 돌아간다.
모르고 닫았으면, 그냥 CloudFront 에서 내가 아까 생성한 배포를 클릭해서 일반탭-설정부분-편집을 누르면 아래 화면이 뜬다.
인증서 옆에 새로고침을 누르면, 아까 생성된 인증서가 뜬다!
아래쪽에 기본값 루트객체도 요렇게 써놓는다.
그럼 CloudFront는 설정 완료!
Route53으로 가서 아까 생성한 호스팅영역으로 가본다.
아래 사진에 나온 A레코드가 아마 없을건데, 지금 만들것이다.
레코드 생성 클릭
레코드 유형 - A , 별칭을 활성화하면 아래와 같이 나오는데, CloudFront를 선택하고, 아까 만든 배포를 선택하고 생성한다.
이제 모든 과정은 끝났고, AWSCLI 업로드를 위해 아래 링크에서 AWS CLI를 받아서 설치해준다.
Command Line Interface - AWS CLI - AWS
aws-shell은 명령줄 셸 프로그램으로서, AWS 명령줄 인터페이스를 사용하는 새로운 사용자와 고급 사용자 모두에게 도움이 되는 편의 기능 및 생산성 기능을 제공합니다. 주요 기능은 다음과 같습
aws.amazon.com
이제 배포할 리엑트 프로젝트를 열고 터미널을 연다.
터미널에
aws --version를 입력했을때 버전이 나온다면 잘 설치된것이다.
터미널에서
aws configure를 입력해서 사용자 정보를 등록해준다.
AccessKey, SecretKey는 IAM사용자 생성할때 받아두었던 키를 사용하고,
리전은 ap-northeast-2
outputformat은 json으로 설정한다.
터미널에서 yarn build (혹은 npm build)를 해서 현 프로젝트를 빌드해준다.
그리고 VSCode 터미널에서
aws s3 sync ./build s3://버킷이름 --profile=IAM사용자이름이렇게 입력하면 업로드가 된다.
아까 캐시정책에서 캐싱이 비활성화되어있다면, 바로 확인이 가능하고,
캐싱이 활성화 되어있다면, 일단 다시 CloudFront로 들어온다.
무효화생성 클릭
아래처럼 /* 입력하면, 업로드된 모든 파일에 대해 캐싱을 무효화하고, 변경사항을 바로 업데이트 한다.
한 20초정도 있으면 새로 업로드된 프로젝트를 도메인에서 확인이 가능하다.
매번 이렇게 무효화하기가 귀찮다면
아래 동작 탭에서 저 기본값을 선택하고 편집 선택
아래와 같이 Caching Disabled로 바꿔준다.
단, 이용자가 들어오는 기간에는 캐싱활성화를 하고 무효화할것을 권장한다.
S3엑세스 횟수가 많이 줄어든다.
