[typescript] 타입스크립트에서 AWS CloudFront와 Amazon S3를 사용하여 정적 웹사이트 호스팅

12 Dec 2023

typescript

웹 개발자들이 AWS(CloudFront와 Amazon S3를 결합하여 만든) 정적 웹사이트를 호스팅하기 위해 자주 사용하는 방법은 TypeScript로 작성하는 것입니다. 이 기술 블로그에서는 타입스크립트로 AWS CloudFront와 Amazon S3를 사용하여 정적 웹사이트를 호스팅하는 방법을 알아보겠습니다.

1. AWS CloudFront 소개

AWS CloudFront는 전 세계에 분산된 엣지로케이션을 활용하여 컨텐츠를 빠르게 전송하고, 보안 및 DDoS 공격으로부터 콘텐츠를 보호합니다. 이를 통해 웹사이트 방문자는 더 나은 성능과 안정성을 누릴 수 있습니다.

2. Amazon S3 소개

Amazon S3는 안정적이고 확장 가능한 객체 스토리지를 제공하며, 이를 통해 웹사이트 호스팅과 데이터 백업 등 다양한 용도로 활용할 수 있습니다.

3. 타입스크립트로 AWS CloudFront 및 Amazon S3 설정

먼저 AWS Management Console에 로그인한 후, Amazon S3에서 정적 파일을 호스팅할 버킷을 생성합니다. 준비가 되었다면, AWS CloudFront에서 새로운 배포를 생성하여 S3 버킷을 오리진으로 추가합니다.

const AWS = require('aws-sdk');

const cloudfront = new AWS.CloudFront();
const s3 = new AWS.S3();

const distributionParams = {
  DistributionConfig: {
    // ...CloudFront distribution configuration
  },
};

cloudfront.createDistribution(distributionParams, (err, data) => {
  if (err) console.log(err, err.stack);
  else console.log(data);
});

const bucketParams = {
  Bucket: 'example-bucket',
  // ...other S3 bucket configuration
};

s3.createBucket(bucketParams, (err, data) => {
  if (err) console.log(err, err.stack);
  else console.log(data);
});

4. 타입스크립트로 정적 웹사이트 호스팅

정적 웹사이트를 호스팅하기 위해, S3 버킷에 HTML, CSS, JavaScript 파일 및 기타 정적 자원을 업로드합니다. 그런 다음 CloudFront 배포를 통해 생성된 도메인으로 웹사이트에 액세스할 수 있습니다.

const websiteBucketParams = {
  Bucket: 'example-website-bucket',
  WebsiteConfiguration: {
    // ...website configuration
  },
};

s3.putBucketWebsite(websiteBucketParams, (err, data) => {
  if (err) console.log(err, err.stack);
  else console.log(data);
});

이제 타입스크립트를 사용하여 AWS CloudFront와 Amazon S3를 설정하고 정적 웹사이트를 호스팅하는 방법을 알게 되었습니다. 이를 통해 안전하고 확장 가능한 웹사이트를 제공할 수 있습니다.

이상입니다! AWS CloudFront와 Amazon S3를 사용하여 타입스크립트로 정적 웹사이트를 호스팅하는 방법에 대한 기술 블로그 포스트를 완료했습니다.

참조:

목차

1. AWS CloudFront 소개

2. Amazon S3 소개

3. 타입스크립트로 AWS CloudFront 및 Amazon S3 설정

4. 타입스크립트로 정적 웹사이트 호스팅