Netlify Functions + TypeScriptのボイラープレートを作った

8月に書いた「Netlify FunctionsでTypeScriptを使う」という記事で、netlify-lambdaをフォークしてTypeScriptを使っていると書きました。 数ヶ月経ち、フォークした内容が本体にマージされ簡単にTypeScriptが使えるようになったのでボイラープレートを作りました。（netlify-lambda@1.1.0からTypeScriptが使えるようになりました。）

mottox2/netlify-functions-typescript-starter

使用方法

your-project-nameを作成したいプロジェクト名に置き換えて次のコマンドを実行しましょう。

$ git clone --depth 1 --single-branch --branch master https://github.com/mottox2/netlify-functions-typescript-starter.git your-project-name
$ cd your-project-name
$ yarn

開発はsrc以下にtsファイルを作成していきましょう。 Netlify Functionsの実態はAWS Lambdaなので型ファイルはLambdaのものを使うといいです。devDependenciesに入れているので既に使えるようになっているはずです。 src/index.tsの型を参考に作っていくといいでしょう。

import {
  APIGatewayProxyEvent,
  APIGatewayProxyCallback
  // @ts-ignore
} from '@types/aws-lambda'

exports.handler = async (
  event: APIGatewayProxyEvent,
  context: any,
  callback: APIGatewayProxyCallback
) => {
  let body = {}
  if (event.httpMethod === 'GET') {
    body = event.queryStringParameters
  } else if (event.httpMethod === 'POST') {
    body = JSON.parse(event.body)
  }

  // do something...

  const response = {
    ...body
  }

  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(response)
  })
}

ボイラープレートを作った経緯

一応フォークしたTypeScript部分はマージされたのですが、netlify-lambdaとは別途babel-preset-typescriptを含む.babelrcで上書きする必要があり、ハードルがあるので簡単に使えるようにボイラープレートを整備しました。 noconfigでTypeScriptを使えるようになるまでは保守する予定です。

この記事は2018/12/13に行われる [Netlify Meetup #3](Netlify Meetup #003 - connpass) 中の飛び込みLTの原作記事です。 執筆時点で2人余裕があるので興味のある方はぜひ参加してみてください。