Netlify FunctionsをTypeScriptで書く
はじめに
Netlifyにはサーバーレスで関数を実行できるNetlify Functionsのサービスがある。
簡単にAPIなどを実装できる。
裏では、AWS Lambdaが動いている模様。
NetlifyはGitリポジトリを連携させることができ、簡単にデプロイを行うことができる。
今回は、Netlify FunctionsをTypeScriptを利用したプロジェクトで利用する方法を書く。
サンプル程度だとTypeScriptを利用する意味は無いので、あくまで拡張する前提。
前提
- node 12.16.3
- yarn 1.22.4
- GitHub
yarnではなく、他のパッケージマネージャーを利用している人は適宜読み替えてください。
プロジェクトの準備
Gitリポジトリを作成したらpackage.jsonの作成。
yarn init
Enterを適宜利用。
必要なパッケージのインストール
yarn add -D netlify-lambda typescript @babel/preset-typescript @types/aws-lambda @types/node
関数の用意
サンプルなのでhello, worldを出力する。
import { APIGatewayProxyHandler } from 'aws-lambda'
export const handler: APIGatewayProxyHandler = async (event, context, callback) => {
// 処理を場合ここに
return {
statusCode: 200,
body: 'hello, world',
}
};
TypeScriptをコンパイルする
Netlify FunctionsはTypeScriptが直接動かないのでJavaScriptにコンパイルする必要がある。
netlify-lambdaがBabelとWebpackを内包しているのでBabelでTypeScriptをビルドする。
Babelの設定
{
"presets": [
"@babel/preset-typescript",
[
"@babel/preset-env",
{
"targets": {
"node": "12"
}
}
]
],
}
TypeScriptのコンパイル設定
{
"compilerOptions": {
"target": "ES2019",
"module": "commonjs",
"lib": [
"ES2020"
],
"noEmit": true
}
}
参考：Node.js 10,12,14のためのTypeScriptコンパイラ設定(targetとlib) - Qiita
Netlifyの設定
NetlifyにどのディレクトリをNetlify Functionsで利用するたｍ、ビルドコマンドを記述
[build]
functions = "./functions"
commands="yarn run build"
ビルドコマンド
package.jsonにビルド用のコマンドを追加する。
"scripts": {
"build": "netlify-lambda build src/",
"serve": "netlify-lambda serve src/"
},
ビルド生成物の除外
ビルド生成物はGitの管理からは除外したいので、gitignoreに下記を設定
/functions/
ここまででプロジェクトの準備完了。
あとは、
- commitする
- pushする
- NetlifyにGitHubリポジトリを連携する
- 自動でビルドしてデプロイされる
Netlify Functionsの確認
正しくデプロイできるとProduction DeploysにPublishedと表示されている。
Functionsタブでの確認
NetlifyのFunctionsタブで作成した関数のファイル名が表示されていればOK
作成物
今回デプロイしたURLは
https://netlify-functions-typescript.netlify.app/.netlify/functions/index
作成したリポジトリは、
Discussion