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

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.