업데이트 배포

이제 앱을 변경하고 업데이트하는 방법을 살펴보겠습니다. 이 과정은 코드를 S3에 배포하는 방법과 매우 유사하지만 몇 가지 차이점이 있습니다. 과정은 다음과 같습니다.

1. 변경 사항을 포함하여 앱 빌드
2. 메인 S3 버킷에 배포
3. 두 CloudFront 배포에서 캐시 무효화

마지막 단계가 필요한 이유는 CloudFront가 엣지 로케이션에서 객체를 캐시하기 때문입니다. 따라서 사용자가 최신 버전을 볼 수 있도록 CloudFront에 엣지 로케이션의 캐시를 무효화하도록 지시해야 합니다.

앱에 몇 가지 변경 사항을 적용했다고 가정해 보겠습니다. 먼저 이러한 변경 사항을 빌드해야 합니다.

앱 빌드하기

먼저 프로덕션 환경을 위해 앱을 빌드해 보겠습니다. 작업 디렉토리에서 다음 명령어를 실행하세요.

$ npm run build

이제 앱이 빌드되어 build/ 디렉토리에 준비되었습니다. S3에 배포해 보겠습니다.

S3에 업로드하기

작업 디렉토리에서 다음 명령어를 실행하여 앱을 메인 S3 버킷에 업로드합니다. YOUR_S3_DEPLOY_BUCKET_NAME을 S3 버킷 생성하기 챕터에서 생성한 S3 버킷 이름으로 바꿔주세요.

$ aws s3 sync build/ s3://YOUR_S3_DEPLOY_BUCKET_NAME --delete

여기서 --delete 플래그를 주목하세요. 이 플래그는 S3에게 이번에 업로드하지 않는 파일들을 버킷에서 삭제하라고 지시합니다. Create React App은 빌드할 때마다 고유한 번들을 생성하기 때문에, 이 플래그 없이 업로드하면 이전 빌드의 모든 파일이 그대로 남게 됩니다. 이제 변경 사항이 S3에 반영됩니다.

이제 CloudFront가 업데이트된 앱 버전을 제공하는지 확인하기 위해 CloudFront 캐시를 무효화해봅시다.

CloudFront 캐시 무효화

CloudFront는 객체의 경로를 전달하여 배포된 객체를 무효화할 수 있습니다. 또한 와일드카드(/*)를 사용해 단일 커맨드로 전체 배포를 무효화할 수도 있습니다. 이 방법은 앱의 새 버전을 배포할 때 권장됩니다.

이 작업을 수행하려면 두 CloudFront 배포의 Distribution ID가 필요합니다. CloudFront 배포 목록에서 배포를 클릭하면 ID를 확인할 수 있습니다.

이제 AWS CLI를 사용해 두 배포의 캐시를 무효화할 수 있습니다. 아래 명령어에서 YOUR_CF_DISTRIBUTION_ID와 YOUR_WWW_CF_DISTRIBUTION_ID를 위에서 확인한 값으로 바꿔주세요.

$ aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths "/*"
$ aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths "/*"

이 명령어는 www 버전과 non-www 버전의 도메인에 대한 배포를 모두 무효화합니다. Invalidations 탭을 클릭하면 무효화 요청이 처리 중인 것을 확인할 수 있습니다.

완료되기까지 몇 분이 소요될 수 있습니다. 하지만 완료되면 앱의 업데이트된 버전이 적용됩니다.

이제 업데이트를 배포하기 위해 실행할 수 있는 명령어 세트를 만들었습니다. 이 명령어들을 하나로 합쳐 한 번에 실행할 수 있도록 정리해보겠습니다.

배포 커맨드 추가하기

NPM을 사용하면 package.json에 deploy 커맨드를 추가할 수 있습니다.

package.json의 scripts 블록에서 eject 위에 다음 내용을 추가하세요.

"predeploy": "npm run build",
"deploy": "aws s3 sync build/ s3://YOUR_S3_DEPLOY_BUCKET_NAME --delete",
"postdeploy": "aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths '/*' && aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths '/*'",

YOUR_S3_DEPLOY_BUCKET_NAME, YOUR_CF_DISTRIBUTION_ID, YOUR_WWW_CF_DISTRIBUTION_ID를 위에서 설명한 값으로 반드시 교체하세요.

Windows 사용자의 경우, postdeploy에서 다음과 같은 오류가 발생할 수 있습니다.

An error occurred (InvalidArgument) when calling the CreateInvalidation operation: Your request contains one or more invalid invalidation paths.

이 경우 /*에 따옴표가 없는지 확인하세요.

"postdeploy": "aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths /* && aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths /*",

이제 프로젝트 루트에서 업데이트를 배포할 때 다음 커맨드를 실행하면 됩니다. 이 커맨드는 앱을 빌드하고, S3에 업로드한 후, CloudFront 캐시를 무효화합니다.

$ npx sst deploy

이제 S3와 CloudFront를 사용해 AWS에 React 앱을 배포하고 업데이트하는 워크플로우가 준비되었습니다.