mottox2 blog

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

blognetlify

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の型を参考に作っていくといいでしょう。

[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人余裕があるので興味のある方はぜひ参加してみてください。

B!
dev

Netlifyで環境変数を設定する

Netlifyではビルドコマンドを設定して、デプロイ時にビルド処理を実行することが多いです。その際に利用するデータベースのユーザーネーム・パスワードや外部サービスのTokenなどは一般的にはソースコー

netlify
event

GatsbyJSハンズオン資料

2019/01/08にサポーターズで行われる『Gatsbyで今風ウェブサイトの開発ハンズオン』のハンズオン資料です。 > スライドスライド > 各種リンク各種リンク - CodeSand

tips

npmに公開したパッケージを非推奨(deprecated)にする

npmにパッケージを公開したけど、今はもうメンテナンスしていないパッケージはないだろうか?自分にはある。 とあるコードを書いている最中にnpmに非推奨(deprecated)の概念があることがわかっ

npmnodejs