ES6와 TypeScript 지원 추가하기

AWS Lambda는 Node.js v10.x, v12.x, v14.x를 지원합니다. 하지만 프론트엔드 React 앱에서 지원하는 고급 ECMAScript 문법과는 약간 차이가 있습니다. 프로젝트의 두 부분에서 유사한 ES 기능을 사용하는 것이 합리적입니다. 특히 핸들러 함수에서 ES import/export를 사용할 것입니다.

또한, 프론트엔드 React 앱은 Create React App을 통해 TypeScript를 자동으로 지원합니다. 이 가이드에서는 TypeScript를 사용하지 않지만, 백엔드 Lambda 함수에도 유사한 설정을 갖추는 것이 좋습니다. 그래서 향후 프로젝트에서도 사용할 수 있습니다.

이를 위해 일반적으로 Babel, TypeScript, Webpack 및 기타 여러 패키지를 설치해야 합니다. 이는 프로젝트에 많은 추가 설정과 복잡성을 더할 수 있습니다.

이를 돕기 위해 serverless-bundle을 만들었습니다. 이는 Serverless Framework 플러그인으로 몇 가지 주요 장점이 있습니다:

단 하나의 의존성만 필요
ES6 및 TypeScript 지원
최적화된 패키지 생성
ESLint를 사용한 Lambda 함수 린팅
babel-jest를 사용한 단위 테스트 트랜스파일링 지원
적절한 오류 메시지를 위한 소스 맵 지원

이 플러그인은 이전 장에서 사용한 스타터 프로젝트인 serverless-nodejs-starter에 자동으로 포함되어 있습니다. TypeScript의 경우에도 스타터 프로젝트가 있습니다 — serverless-typescript-starter.

하지만 기존 Serverless Framework 프로젝트에 ES6 및 TypeScript 지원을 추가하려면 serverless-bundle을 설치하면 됩니다:

$ npm install --save-dev serverless-bundle

그리고 serverless.yml에 다음과 같이 추가합니다:

plugins:
  - serverless-bundle

테스트를 실행하려면 package.json에 다음을 추가합니다.

"scripts": {
  "test": "serverless-bundle test"
}

ES6 람다 함수

스타터 프로젝트에 포함된 람다 함수를 살펴보겠습니다.

handler.js 파일은 다음과 같습니다.

export const hello = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: `Go Serverless v2.0! ${(await message({ time: 1, copy: 'Your function executed successfully!'}))}`,
    }),
  };
};

const message = ({ time, ...rest }) => new Promise((resolve, reject) =>
  setTimeout(() => {
    resolve(`${rest.copy} (with a delay)`);
  }, time * 1000)
);

이제 이 코드를 실행해 보겠습니다. 프로젝트 루트에서 다음 명령어를 실행하세요.

$ serverless invoke local --function hello

터미널에서 다음과 같은 결과를 확인할 수 있습니다.

{
    "statusCode": 200,
    "body": "{\"message\":\"Go Serverless v2.0! Your function executed successfully! (with a delay)\"}"
}

위 명령어는 Serverless Framework에게 hello라는 람다 함수를 (로컬에서) 실행하라고 요청합니다. 이는 handler.js에서 내보내는 hello 메서드를 실행하게 됩니다.

여기서는 람다 함수를 직접 실행하고 있습니다. 하지만 배포 후에는 /hello API 엔드포인트를 통해 이 함수를 실행할 것입니다. (이전 장에서 설명한 내용 참조)

이제 람다 함수와 API를 배포할 준비가 거의 완료되었습니다. 하지만 배포하기 전에 스타터 프로젝트에서 설정된 다른 부분을 간단히 살펴보겠습니다.

최적화된 패키지

기본적으로 Serverless Framework은 모든 Lambda 함수를 하나의 패키지로 묶어 생성합니다. 이는 Lambda 함수가 호출될 때 앱의 모든 코드를 로드한다는 의미입니다. 다른 Lambda 함수들도 모두 포함됩니다. 앱의 크기가 커질수록 이는 성능에 부정적인 영향을 미칩니다. Lambda 함수 패키지가 클수록 콜드 스타트 시간이 길어집니다.

이 기능을 끄고 Serverless Framework이 각 함수를 개별적으로 패키징하도록 하려면 serverless.yml에 다음을 추가하세요.

package:
  individually: true

이 옵션은 스타터 프로젝트에서 기본적으로 활성화되어 있어야 합니다.

위 옵션을 활성화하면 serverless-bundle이 Webpack을 사용해 트리 셰이킹 알고리즘으로 최적화된 패키지를 생성할 수 있습니다. 이는 Lambda 함수를 실행하는 데 필요한 코드만 포함하고 그 외의 코드는 제외합니다!

이제 백엔드 API를 배포할 준비가 되었습니다.

ES6와 TypeScript 지원 추가하기

ES6 람다 함수

최적화된 패키지

SST Guide