Cloud Functions에 TypeScript 사용

Cloud Functions는 TypeScript로 함수를 작성하려는 개발자를 위해 다음과 같은 두 가지 기능을 지원합니다.

  • TypeScript 프로젝트를 만들고 초기화 시 자동 변환 컴파일하도록 구성(firebase init functions)
  • 배포 전 후크를 통해 기존 TypeScript 소스를 배포할 때 자바스크립트로 트랜스파일

이 가이드의 안내에 따라 기존 자바스크립트 프로젝트를 TypeScript로 마이그레이션하고 소스 코드를 트랜스파일하는 배포 전 후크를 사용하여 함수를 계속 배포할 수 있습니다. 함수를 작성할 때는 TypeScript가 순수 자바스크립트보다 유용합니다.

  • TypeScript는 async/await 등의 최신 자바스크립트 기능을 지원하므로 프라미스 관리가 간편합니다.
  • 코딩 중에 Cloud Functions 린터가 일반적인 문제점을 알려줍니다.
  • 유형 안전성이 제공되므로 배포된 함수의 런타임 오류를 방지할 수 있습니다.

TypeScript를 처음 사용하는 경우 TypeScript in 5 minutes를 참조하세요.

TypeScript로 새 Cloud Functions 프로젝트 초기화

새 디렉터리에서 firebase init functions를 실행합니다. 이 도구는 자바스크립트 또는 TypeScript로 프로젝트를 빌드하는 옵션을 제공합니다. TypeScript를 선택하여 다음과 같은 프로젝트 구조를 출력합니다.

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- .eslintrc.js # Optional file if you enabled ESLint
      +- tsconfig.dev.json # Optional file that references .eslintrc.js
      |
      +- src/     # Directory containing TypeScript source
      |   |
      |   +- index.ts  # main source file for your Cloud Functions code
      |
      +- lib/
          |
          +- index.js  # Built/transpiled JavaScript code
          |
          +- index.js.map # Source map for debugging

초기화가 완료되면 index.ts에서 샘플의 주석 처리를 삭제하고 npm run serve를 실행하여 'Hello World' 함수가 작동하는 것을 확인합니다.

기존 TypeScript 프로젝트 사용

기존 TypeScript 프로젝트가 있는 경우 배포 전 후크를 추가하면 Cloud Functions for Firebase로 코드를 배포할 때마다 프로젝트를 변환 컴파일할 수 있습니다. 올바르게 구성된 tsconfig.json 파일과 Firebase 프로젝트가 필요하며 Firebase 구성을 다음과 같이 수정해야 합니다.

  1. package.json을 편집하여 TypeScript 프로젝트를 빌드하는 bash 스크립트를 추가합니다. 예를 들면 다음과 같습니다.

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  2. firebase.json을 편집하여 TypeScript 프로젝트를 빌드하는 bash 스크립트를 추가합니다. 예를 들면 다음과 같습니다.

     {
   "functions": {
     "predeploy": "npm --prefix functions run build",
   }
 }

이 구성을 사용하면 firebase deploy --only functions 명령어가 TypeScript 코드를 빌드하여 함수로 배포합니다.

기존 자바스크립트 프로젝트를 TypeScript로 마이그레이션

자바스크립트로 초기화하고 개발한 기존 Cloud Functions 프로젝트가 있는 경우 TypeScript로 마이그레이션할 수 있습니다. 시작하기 전에 git 체크포인트 등의 백업을 만들어 두는 것이 좋습니다.

기존 JavaScript Cloud Functions 프로젝트를 마이그레이션하는 방법:

  1. git 체크포인트를 만들고 기존 자바스크립트 소스 파일의 복사본을 저장합니다.
  2. 프로젝트 디렉터리에서 firebase init functions를 실행하고 함수 작성 언어를 묻는 메시지가 표시되면 TypeScript를 선택합니다.
  3. 기존 package.json 파일을 덮어쓸지 묻는 메시지가 표시되면 기존 파일이 확실히 필요 없는 경우를 제외하고는 아니요를 선택합니다.
  4. functions/src 디렉터리에서 index.ts를 삭제하고 기존 소스 코드로 대체합니다.
  5. 초기화 시 생성된 tsconfig.json 파일에서 자바스크립트를 허용하는 컴파일러 옵션("allowJs": true)을 설정합니다.
  6. 저장된 package.json 파일을 functions 디렉터리에 복사하고 수정하여 "main"을 "lib/index.js"로 설정합니다.

  7. 또한 package.json에서 다음과 같이 TypeScript용 빌드 스크립트를 추가합니다.

     {
   "name": "functions",
   "scripts": {
     "build": "npm run lint && tsc"
   }
 ...

  8. npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser를 실행하여 "typescript"를 dev 종속 항목으로 추가합니다.

  9. 모든 종속 항목에 대해 npm install --save @types/<dependency>를 실행합니다.

  10. .js 소스 코드를 필요에 따라 .ts로 재작성합니다.

TypeScript 함수 에뮬레이션

TypeScript 함수를 로컬로 테스트하려면 로컬에서 함수 실행에서 설명한 에뮬레이션 도구를 사용할 수 있습니다. 이러한 도구를 사용하기 전에 코드를 컴파일하는 것이 중요합니다. 따라서 firebase emulators:start 또는 firebase functions:shell을 실행하기 전에 함수 디렉터리 내에서 npm run build를 실행합니다. 또는 npm run serve 또는 npm run shell을 바로가기로 실행합니다. 이 명령어는 둘 다 빌드를 실행하고 함수 셸을 제공/시작합니다.

TypeScript 프로젝트의 함수 로그

firebase deploy 실행 중에 프로젝트의 index.ts가 index.js로 변환 컴파일됩니다. 즉, Cloud Functions 로그에는 내가 작성한 코드가 아닌 index.js 파일의 줄 번호가 출력됩니다. firebase deploy는 해당 경로와 줄 번호를 index.ts에서 쉽게 찾을 수 있도록 functions/lib/index.js.map을 만듭니다. 원하는 IDE에서 또는 node 모듈을 통해 이 소스 맵을 사용할 수 있습니다.