SST로 클라이언트 웹 무료로 배포하기

2024-05-10
AWSsstserverless

이 포스팅에서는 sst를 이용해 Next.js 클라이언트를 간단히 배포하는 방법을 알아 보겠습니다.

SST

sst는 다양한 웹 개발 프레임워크(nextjs, svelte, astro)로 개발된 앱들을 AWS 기반의 서버리스 애플리케이션을 쉽게 배포하고 관리할 수 있는 프레임워크입니다.
sst는 복잡한 AWS 설정을 단순화하여, AWS의 개발자들이 인프라 설정에 신경 쓰지 않고 애플리케이션 개발에 집중할 수 있게 해줍니다.

특징

간단한 웹 사이트는 주로 AWS S3와 CloudFront를 사용한 정적 웹 호스팅으로 쉽게 배포할 수 있습니다. 하지만, 웹 개발 트렌드가 진화하고 동적 페이지 구성이 필요해지면서 정적 호스팅만으로는 한계에 부딪히게 됩니다.

이때, sst를 사용하면 동적 웹 페이지도 손쉽게 배포할 수 있습니다. sst는 서버리스 아키텍처를 활용해 복잡한 인프라 설정을 자동화하고, 개발자가 애플리케이션 로직에만 집중할 수 있도록 도와줍니다.

sst는 AWS Lambda와 API Gateway를 통해 백엔드 서버 없이도 동적인 API와 서버 기능을 구현할 수 있으며, 실시간 데이터 처리, 사용자 인증, 데이터베이스 연동 같은 다양한 기능을 간단히 통합할 수 있습니다.

sst는 단순한 정적 호스팅을 넘어, 동적인 웹 애플리케이션을 효율적으로 배포하고 운영할 수 있는 유연한 도구로 자리 잡고 있습니다. 이를 통해 개발자는 더욱 창의적이고 강력한 웹 서비스를 제공할 수 있습니다.

배포

프로젝트 초기 설정

먼저, Next.js 프로젝트에서 sst를 사용할 수 있도록 설정해야 합니다. sst를 설치하고 초기 설정을 진행합니다.

yarn add sst

개발 환경 설정

기존 앱에 sst 파일 세팅을 위한 초기화를 구성합니다.

npx sst init

위 명령어로 초기화를 완료하게 되면 package.json, sst.config.js, tsconfig.json의 파일이 자동으로 sst 배포를 위한 구성을 하게 됩니다.
sst.config.ts 파일을 프로젝트 루트에 생성하여 배포 설정을 정의합니다.이 파일에서 배포할 AWS 리전과 스택 구성을 설정할 수 있습니다.

❗️해당 포스트는 sst v3 기준으로 작성된 포스트이며 v2 or v3에 따라 config 구성이 상이하므로 참고하셔야 합니다.
참고 자료 - https://sst.dev/docs/reference/config

AWS Credentials 설정

AWS에 배포하기 위해서는 AWS CLI를 설치하고 IAM 자격 증명을 설정해야 합니다.

  1. AWS CLI 설치: AWS CLI 설치 가이드를 참고하여 AWS CLI를 설치합니다.
  2. IAM 사용자 생성 및 자격 증명 설정
    • AWS Management Console에서 IAM 사용자를 생성하고, 해당 사용자에게 적절한 권한을 부여합니다.
    • IAM 사용자 생성 후, 액세스 키 ID와 비밀 액세스 키를 다운로드합니다.
  3. AWS CLI를 통해 자격 증명 구성
    • aws credentials 프로필 추가
      vim ~/.aws/credentials
      
      [sst-deploy]
      aws_access_key_id = YOUR_ACCESS_KEY_ID
      aws_secret_access_key = YOUR_SECRET_ACCESS_KEY
      region = YOUR_AWS_REGION
      
    • 기존 default로 사용하는 profile을 사용하지 않고 새롭게 생성한 자격증명을 추가 해줍니다.

애플리케이션 배포

저는 aws credentials의 default 프로필을 sst-deploy로 지정했기 때문에 롱옵션으로 프로필 옵션을 추가했습니다.

npx sst deploy --profile=sst-deploy

해당 명령어를 통해 실행되면 아래와 같은 작업 순서가 이뤄집니다.

프로파일 로드

  • --profile=sst-deploy 옵션에 의해, AWS CLI는 sst-deploy라는 이름의 프로파일을 사용해 AWS 자격 증명(Access Key, Secret Access Key)과 리전 정보를 로드합니다. 이 프로파일은 ~/.aws/credentials 파일에 미리 설정된 자격 증명을 참조합니다.

sst 프로젝트 초기화

  • sst는 현재 프로젝트의 sst.config.ts 파일을 읽어 배포 환경과 관련된 설정(예: 리전, 스택 구성)을 로드합니다. 이를 통해 어떤 AWS 리소스를 생성하고 관리할지 결정됩니다.

인프라 생성 및 업데이트

  • sst는 AWS CloudFormation을 통해 정의된 인프라 스택을 생성하거나 업데이트합니다. 여기에는 S3 버킷, CloudFront 배포, Lambda 함수, API Gateway 등의 AWS 리소스가 포함됩니다. 이 과정에서 서버리스 인프라가 실제로 배포됩니다.

애플리케이션 코드 배포

  • sst는 Next.js 애플리케이션 코드를 S3 버킷에 업로드하고, Lambda 함수나 기타 AWS 서비스에 필요한 파일들을 배포합니다. 또한, API Gateway 및 기타 관련 리소스와의 연동도 처리됩니다.

추가 설정

배포 후, 사용자 지정 도메인 설정이나 환경 변수 관리를 통해 배포된 애플리케이션을 더욱 최적화할 수 있습니다. sst.config.ts 파일에서 customDomain 옵션 및 다양한 옵션으로 환경을 설정할 수 있습니다.
참고 자료 - https://sst.dev/docs/reference/config#config

  • SST
    • 특징
  • 배포
    • 프로젝트 초기 설정
    • 개발 환경 설정
    • AWS Credentials 설정
    • 애플리케이션 배포
      • 프로파일 로드
      • sst 프로젝트 초기화
      • 인프라 생성 및 업데이트
      • 애플리케이션 코드 배포
    • 추가 설정