Cloud Functions에 TypeScript 사용

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

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

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

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

TypeScript로 작성된 Cloud 함수의 실제로 작동하는 샘플을 확인하려면 GitHub 저장소에서 typescript-getting-started를 참조하세요.

TypeScript로 새 Cloud 함수 프로젝트 초기화

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

myproject
 +- functions/     # Directory containing all your functions code
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- tsconfig.json
      |
      +- tslint.json # Optional file
      |
      +- 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

기존 TypeScript 프로젝트 사용

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

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

     {
       "name": "functions",
       "scripts": {
         "build": "./node_modules/.bin/tslint -p tslint.json && ./node_modules/.bin/tsc"
       }
     ...
    
  2. firebase.json을 편집하여 빌드 스크립트를 실행하는 배포 전 후크를 추가합니다. 예를 들면 다음과 같습니다.

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

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

기존 자바스크립트 프로젝트를 TypeScript로 이전

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

기존 자바스크립트 Cloud 함수 프로젝트를 이전하는 방법

  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": "./node_modules/.bin/tslint --project tsconfig.json && ./node_modules/.bin/tsc"
       }
     ...
    
  8. npm install --save --only=dev typescript를 실행하여 "typescript"를 dev 종속 항목으로 추가합니다.

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

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

TypeScript 프로젝트의 함수 로그

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

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.