개요

S3와 CloudFront를 이용하면 정적 페이지를 쉽고 합리적인 가격으로 호스팅할 수 있다. 보통 웹 콘솔에서 기존 객체를 지우고, 새 객체를 빌드하여 업로드하고, 클라우드프론트에서 캐시 무효화를 시행한다. GUI 상에서 이 과정을 거치게 되는데 상당히 번거롭다. 그래서 이 과정을 cli 툴을 이용해 자동화하였다.

빌드 과정

nuxt.js를 사용하므로 우선 다음과 같은 커맨드를 실행해야 한다.

rm -rf ./dist
npm run build
npm run generate
cd dist/

이 과정을 통해 최신의 자바스크립트 번들 파일을 얻을 수 있다.

S3에 업로드

 aws s3 sync . s3://<your_bucket_name>\
	--delete \
	--acl public-read

이미 dist 폴더 내부에 들어와 있는 상태이므로 위 커맨드를 실행하면 된다. 따로 s3의 접근 권한을 Public으로 줄 필요가 있는 경우 sync를 할 때 옵션으로 --acl public-read를 주어 다른 사용자들이 읽을 수 있도록 해야 한다.

만약 설정이 제대로 되어있지 않은 경우 다음과 같이 하면 된다. aws configure를 쳐 access_key와 access_secret_key를 입력한다. 이 때 api key는 s3와 cloudfront에 관련된 권한만 주도록 한다. 그 후 aws s3 ls등을 통해 배포 대상인 버킷에 대한 권한이 있는지 확인한 후 다시 진행한다.

CloudFront 객체 무효화

aws cloudfront create-invalidation \
	--distribution-id <your_cloudfront_id> 
	--paths "/"

위와 같이 입력해서 /에 대한 초기화 즉, 모든 파일에 대한 캐시 무효화를 시행하면 된다.

한곳으로 모으기

{
  "name": "...",
  "scripts": {
    "deploy": "rm -rf ./dist; \
	npm run build; npm run generate; \
	cd dist/; aws s3 sync . s3://<bucket> --delete --acl public-read; \
	aws cloudfront create-invalidation --distribution-id <id> --paths \"/\""
  }
}

위와 같이 package.json에 deploy 커맨드로 등록한 후 npm run deploy를 실행하면 배포가 끝난다.

참고문헌

• https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/cli-services-s3-commands.html
• https://docs.aws.amazon.com/cli/latest/reference/cloudfront/create-invalidation.html