AWS CDK로 NextJS 애플리케이션을 효율적으로 배포하는 방법

AWS CDK를 활용한 NextJS 애플리케이션 배포 전략

AWS의 인프라를 관리하고 효율적으로 운영하기 위해 AWS CDK(Cloud Development Kit)를 사용하는 것은 이제 많은 개발자들과 IT 전문가들 사이에서 당연한 선택이 되었습니다. 특히, 정적인 콘텐츠를 제공하는 애플리케이션의 배포 작업은 더욱 그러합니다. 이번 포스트에서는 AWS CDK를 이용하여 NextJS 애플리케이션을 S3 버킷에 쉽게 배포하는 방법을 자세히 살펴보려고 합니다.

NextJS와 AWS CDK 소개

NextJS는 React 기반의 프레임워크로서 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)을 지원합니다. AWS CDK는 클라우드 리소스를 프로그래밍 언어를 사용하여 정의할 수 있게 해주는 도구로, 클라우드 인프라의 설계 및 구축을 코드로 처리할 수 있습니다. 이 두 가지 기술을 조합하면 정적 컨텐츠 제공의 로드 속도를 높이고 효율성을 극대화할 수 있습니다.

NextJS 프로젝트 설정

NextJS 애플리케이션 생성

우선적으로 최신 NextJS 애플리케이션을 설정해야 합니다. 다음 명령어를 사용하여 새로운 NextJS 프로젝트를 생성할 수 있습니다.

npx create-next-app@latest pipeline-nextjs-site

이 명령어는 "pipeline-nextjs-site"라는 새 프로젝트를 생성합니다. 이는 SSG 기능을 활용하는 프로젝트로, 최종적으로 정적 페이지를 생성하여 AWS S3 버킷에 배포할 것을 목표로 합니다.

AWS CDK 인프라 구축

CDK 프로젝트 초기화

인프라 코드는 별도의 리포지토리에 유지 관리됩니다. 다음 단계에 따라 CDK 프로젝트를 초기화합니다.

mkdir pipeline-nextjs-infra && cd pipeline-nextjs-infra
cdk init app --language typescript

이로써 TypeScript를 사용하여 CDK 프로젝트를 시작할 준비가 되었습니다.

.env 파일 설정

먼저, AWS 계정 정보와 GitHub 인증 토큰을 포함한 환경 변수를 설정합니다. 아래와 같은 정보를 .env 파일에 추가합니다.

AWS_ACCOUNT=
AWS_REGION=
GITHUB_TOKEN=
GITHUB_USERNAME=

이 정보를 기반으로 CDK가 필요한 리소스를 AWS에 배포할 수 있습니다.

IAM, S3 및 파이프라인 스택 구성

IAM 스택 구성

AWS CDK는 여러 스택을 통해 리소스를 분리 관리합니다. 여기서는 IAM(Identity and Access Management) 스택을 구성하여 필요한 권한을 설정합니다.

import * as cdk from 'aws-cdk-lib';
import * as iam from 'aws-cdk-lib/aws-iam';
import { Construct } from 'constructs';

export class IamStack extends cdk.Stack {
  private readonly build_role: iam.Role;
  public readonly build_role_arn: string;

  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const code_build_service = new iam.ServicePrincipal("codebuild.amazonaws.com");
    const s3_full_access = iam.ManagedPolicy.fromAwsManagedPolicyName("AmazonS3FullAccess");
    const codebuild_admin_access = iam.ManagedPolicy.fromAwsManagedPolicyName("AWSCodeBuildAdminAccess");

    this.build_role = new iam.Role(this, "BuildRole", {
      assumedBy: code_build_service,
      description: "Role for codebuild"
    });

    this.build_role.addManagedPolicy(s3_full_access);
    this.build_role.addManagedPolicy(codebuild_admin_access);

    this.build_role_arn = this.build_role.roleArn;
  }
}

여기서 BuildRole은 S3와 CodeBuild의 리소스에 접근할 권한이 있습니다.

S3 스택 구성

이제 S3 스택을 구성하여 정적 웹사이트 호스팅을 위한 버킷을 생성합니다.

import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import { Construct } from 'constructs';

interface S3StackProps extends cdk.StackProps {
  build_role_arn: string;
}

export class S3Stack extends cdk.Stack {
  public readonly bucket: s3.Bucket;

  constructor(scope: Construct, id: string, props: S3StackProps) {
    super(scope, id, props);

    this.bucket = new s3.Bucket(this, "BucketNextJSSite", {
      websiteIndexDocument: "index.html",
      websiteErrorDocument: "404.html",
      publicReadAccess: true,
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ACLS,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true
    });
  }
}

여기서는 S3 버킷을 생성하고 정적 웹사이트 호스팅 설정을 활성화하였습니다.

파이프라인 설정 및 배포

CDK 파이프라인 구성하기

CDK 파이프라인을 통해 지속적인 배포를 자동화할 수 있습니다. GitHub 레포지토리와 AWS 서비스(예: CodeBuild, CodePipeline)를 연동하여 코드를 푸시할 때마다 자동으로 배포가 실행되도록 설정합니다.

참고할 만한 URL

• AWS CDK 공식 문서
• NextJS 공식 사이트
• TypeScript 공식 사이트

위의 설명을 바탕으로, AWS CDK와 NextJS를 활용한 정적 웹사이트 호스팅을 충분히 이해하고 직접 구현해보세요. 이 방법을 통해 정적 사이트 배포가 크게 개선될 것입니다.