AmplifyのfunctionをTypeScriptで書く

やりたいこと

AmplifyのFunctionはCLIで一発で作成でき、デプロイやIAMの設定も勝手にやってくれて便利ですが、TypeScriptのテンプレートがありません。Issueは立っていますが、まだ解決されていないみたいです。Amplifyでは amplify push 時に任意のコマンドをフックしてくれる機能があるので、これを使ってPush時に自動的にビルドしてくれるAmplifyのfunctionを作成します。

やりかた

Step 1. Amplify CLIでfunctionを作成する

Hello World テンプレートでfunctionを作成します

$ amplify add function
Initializing new Amplify CLI version...
Done initializing new version.
Scanning for plugins...
Plugin scan successful
? Select which capability you want to add: Lambda function (serverless function)
? Provide an AWS Lambda function name: typescripttest8c88e00d
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration

? Do you want to configure advanced settings? No
? Do you want to edit the local lambda function now? No
Successfully added resource typescripttest8c88e00d locally.

Step 2. TypeScript関連のライブラリをインストールし、設定ファイルを用意する

$ cd amplify/backend/function/{Function名}/src/
$ npm i typescript --save-dev
$ npx tsc --init

tsconfig.json に include と exlude を適当に追加します。

{
  "compilerOptions": {
    ...
  },
  /* 以下を追加 */
  "include": [
    "index.ts",
    "src/**/*.ts"
  ],
  "exclude": []
}

index.ts を用意します。

export const handler = () => {
  const hello: string = "Hello";
  const ts: string = "TS";
  console.log(hello, ts);
}

Step 3. amplify push 時にビルドコマンドをフックするようにする

ルートの package.json の scripts に amplify:Function名 を追加します。

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "amplify:Function名": "cd amplify/backend/function/Function名/src && npx tsc && cd -"
  },
  ...
}

詳しくはAmplifyのドキュメントを参照のこと

Step 4. Pushする

$ amplify push

でコンパイルされたFunctionがPushされていれば完了です。