소개
이번 포스트에서는 타입스크립트(TypeScript)로 작성된 웹 애플리케이션을 AWS CloudFront CDN(Content Delivery Network)를 통해 배포하는 방법에 대해 알아보겠습니다. CDN은 전 세계적으로 사용자에게 콘텐츠를 더 빠르게 전달하기 위해 사용되는 서비스입니다.
우리의 목표는 타입스크립트로 작성된 정적 파일을 CDN을 통해 전역적으로 배포하는 것입니다.
타입스크립트 빌드 설정하기
타입스크립트로 작성된 프로젝트가 있다고 가정합시다. 먼저 프로젝트를 빌드할 때 타입스크립트 파일을 JavaScript 파일로 변환해야 합니다.
프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하고 다음과 같이 설정합니다:
{
"compilerOptions": {
"target": "ES2018",
"module": "CommonJS",
"outDir": "dist"
},
"include": [
"src/**/*.ts"
]
}
위 설정은 타입스크립트 파일을 src 디렉토리 아래에서 찾고, 빌드된 JavaScript 파일을 dist 디렉토리에 저장하도록 합니다.
AWS CloudFront 설정하기
이제 AWS Management Console에서 CloudFront를 설정해야 합니다. 먼저 Create Distribution을 선택하고, Web을 선택한 후 설정을 구성합니다.
- Origin Domain Name: 원본으로 사용할 S3 버킷의 도메인 이름을 입력합니다.
- Viewer Protocol Policy: HTTPS를 지원하도록 설정합니다.
- Allowed HTTP Methods:
GET및HEAD를 선택합니다.
이렇게 하면 CloudFront가 S3 버킷의 내용을 제공하는 공개적인 엔드포인트를 제공하게 됩니다.
배포 스크립트 작성하기
마지막 단계는 프로젝트를 빌드하고 정적 파일을 S3 버킷에 업로드한 다음, CloudFront의 캐시를 무효화하는 스크립트를 작성하는 것입니다.
아래는 이를 수행하기 위한 간단한 Node.js 스크립트의 예시입니다:
const AWS = require('aws-sdk');
const fs = require('fs');
const s3 = new AWS.S3({/* 인증 정보 설정 */});
const cloudfront = new AWS.CloudFront({/* 인증 정보 설정 */});
async function uploadToS3AndInvalidateCache() {
const fileStream = fs.createReadStream('dist/bundle.js');
const uploadParams = { Bucket: 'my-bucket', Key: 'bundle.js', Body: fileStream };
await s3.upload(uploadParams).promise();
const distributionId = 'my-distribution-id';
const params = {
DistributionId: distributionId,
InvalidationBatch: {
CallerReference: `${Date.now()}`,
Paths: {
Quantity: 1,
Items: ['/bundle.js']
}
}
};
await cloudfront.createInvalidation(params).promise();
}
uploadToS3AndInvalidateCache();
위의 스크립트는 프로젝트의 번들 파일을 S3 버킷에 업로드하고, CloudFront 캐시를 무효화하는 간단한 작업을 수행합니다.
결론
이제 타입스크립트로 작성된 웹 애플리케이션을 AWS CloudFront CDN을 통해 배포하는 방법을 알아보았습니다. CDN을 사용함으로써 우리의 애플리케이션은 전 세계 어디에서나 최적화된 성능으로 로드될 수 있게 되었습니다.
물론 앞으로 더 많은 optimization 및 보안 설정을 더할 수 있지만, 이 포스트를 통해 기본적인 설정을 하는 방법에 대해 알아보았습니다.
이제 타입스크립트 프로젝트를 CloudFront CDN을 통해 배포하는 데 시작해보세요!