AWS CloudFront를 사용한 프론트엔드 배포2 (CLI 방법)

eunbi·2020년 8월 8일
4

Study프로젝트

목록 보기
5/13

CloudFront 생성

지난 포스팅에 이어 이번에는 CloudFront 서비스를 사용하는 방법에 대해 알아보겠습니다. CloudFront의 필요성은 지난 포스팅에서 설명했으니 생략하도록 하겠습니다.


콘솔에 로그인 클릭 후 CloudFront를 검색하여 페이지에 들어갑니다.


Create Distribution 버튼을 클릭합니다.


우리는 Web이기 때문에 Web에서 Get Started버튼을 클릭합니다.

여기서 우선 용어에 대한 사전 지식을 알면 설정하는데 이해하기가 수월해집니다.

CloudFront를 이용하게 되면 브라우저는 더 이상 서버와 직접 통신하지 않고 CloudFront를 통해서 통신하게 됩니다. 즉, 브라우저 - CloudFront - 웹서버 구조로 웹서버 앞에 CloudFront가 있는 구조인 것입니다.

처음 사용자가 정보를 요청하면 CloudFront는 웹서버에게 정보를 요청합니다. 웹서버는 정보를 CloudFront에게 보내준 뒤 CloudFront는 그 정보를 사용자에게 응답하게 됩니다.
그 뒤로 사용자가 정보를 요청하게 되면 CloudFront는 더 이상 서버에게 요청하지 않고 자신이 가지고 있던 정보를 가지고 사용자에게 응답하게 되는 것입니다.

용어정리를 하자면

  • Origin : CloudFront에게 정보를 제공하는 원천이라는 뜻에서 우리의 서버는 Origin으로 불립니다.
  • Distribution : 전 세계에 있는 CloudFront의 캐시서버로 분배된다는 뜻에서 CloudFront는 Distribution으로 불립니다.

이제 다시 CloudFront을 생성해봅시다.

우선 배포정보를 입력합니다.

  • Origin Domain Name : 웹서버(Origin)의 주소를 적는 곳 입니다. 서버의 성격을 가지고 있는 aws의 서비스를 이용하고 있다면 항목에서 선택할 수 있습니다. 직접 서버를 운영하고 있다면 주소를 붙여넣으면 됩니다. (이곳에는 도메인만 적어주어야 합니다.) 저는 S3를 이용하고 있어서 선택해 주었습니다.
  • Origin ID :고유값인데 자동 생성됩니다.
  • Restrict Bucket Access (버킷 액세스 제한) : Yes 로 체크합니다.
  • Origin Access Identity : Create a New Identity 를 선택하면 됩니다. 기존에 만들었던 게 있다면 Uee an Existing Identity 를 선택합니다.
  • Grant Read Permission on Bucket (버킷에 대한 읽기 권한 부여) : Yes, Update Bucket Policy 를 선택합니다.
  • 나머지 항목은 기본값으로 설정했습니다.

다음 항목인 Default Cache Behavior Settings 은 캐시정책과 관련된 설정입니다.

  • Viewer Protocol Policy : Redirect Http to Https 를 선택하면 모든 트래픽이 https 로 서빙 됩니다.
  • 나머지 항목은 기본 설정값으로 해주시면 됩니다.

다음항목인 Distribution Settings은 CDN과 관련된 설정입니다.
여기서는 도메인을 연결해 주어야 하는데 지금은 도메인이 없는 상태이므로 나중에 도메인이 생겼을때 다시 설정해주도록 합니다. 아래로 쭉 내려서 Create Distribution 을 누릅니다.

위처럼 In Progress 라고 뜨는 항목이 보일 것입니다. 약 15분 ~ 30분 걸려야 CloudFront 생성이 완료 됩니다. 저기에 보이는 Domain Name의 주소가 CDN 이 적용된 주소입니다. ID를 선택해 들어가서 General 탭에서도 확인할 수 있습니다.

저 주소로 들어가보면 우리의 서버와 같은 모습을 한 CloudFront를 볼 수 있습니다.
주소 뒤에 /index.html을 넣어주면 우리의 웹페이지를 확인할 수 있습니다.

CloudFront 삭제

처음에는 Delete 버튼이 비활성화되어 있어 바로 삭제가 불가능하기 때문에 우선 Disable을 해준 뒤 삭제해야 합니다.

삭제하고 싶은 CloudFront 를 선택 후 Disable을 선택해줍니다.


위처럼 In Progress 라고 뜨는 항목이 보일 것입니다. 약 15분 ~ 30분 뒤 CloudFront가 Disable 됩니다.

이 과정이 끝나면 Delete 버튼을 눌러 삭제해 주시면 됩니다.

캐시 Purge 하기

CDN 을 사용한다면, 프로젝트에 업데이트가 발생했을 때 기존에 CDN 에 퍼져있는 파일들을 새로고침 해주어야 합니다. 해당 작업을 처리하기 위해선 Purge, 혹은 Invaldiation 이라는 작업을 해주어야 합니다. CDN 에 퍼져있는 파일을 제거처리함으로서 새로 받아오게끔 하는것이죠.

이를 하려면 우선 우리가 이전에 만들었던 계정에 CloudFrontFullAccess 라는 권한도 추가해주어야 합니다.


다시 console페이지로 돌아와서 IAM을 검색해서 페이지로 들어갑니다.


왼쪽 사용자 탭 클릭 후 이전 포스팅인 S3에서 권한을 추가해 준 사용자를 다시 선택합니다.


권한추가를 선택합니다.

기존 정책 직접 연결을 선택 후 CloudFront를 검색해서 CloudFrontFullAccess 를 선택해줍니다.


위와 같이 두 개의 권한이 추가된 것을 확인할 수 있습니다.(AmazonS3FullAccess이전 포스팅인 S3에서 추가한 권한입니다.)

이제, AWS CLI 로 해당 CloudFront 의 정보를 날려주려면 다음 명령어를 사용하면 됩니다.

aws cloudfront create-invalidation --profile=`사용자 이름` --distribution-id `CloudFront의 ID` --paths / /index.html /error.html /service-worker.js /manifest.json /favicon.ico

사용자 이름은 권한을 설정했던 사용자 이름을 넣어주시고 CloudFront의 ID는 생성했던 CloudFront의 ID를 넣어주시면 됩니다.

이 명령어도 스크립트에 추가해서 사용하면 편하겠죠?

package.json 파일에 추가한 뒤 yarn invalidate 명령어를 통해 실행해 주시면 됩니다. (npm 이라면 npm 명령어를 사용하시면 됩니다.)

결론적으로 yarn build, yarn deploy, yarn invalidate를 순차적으로 실행해야 하는데 명령어를 입력하는 게 귀찮아서 한꺼번에 명령어를 실행할 수 있는 도구인 npm-run-all을 설치해서 사용했습니다.

참고로 저는 이 명령어 또한 package.json 스크립트로 저장해 놓으면 편하더라고요

"all": "npm-run-all -s build deploy invalidate"

위와 같이 추가해서 배포 시 yarn all만 입력해주면 됩니다. (-s는 순차실행, -p옵션을 주면 병렬실행 됩니다.)

참고
https://react-etc.vlpt.us/08.deploy-s3.html

profile
프론트엔드 개발자입니다 :)

0개의 댓글