Netlify FunctionsをTypeScriptで実装する

9685 ワード
TypeScript Netlify TypeScript テキストリンク

Netlify FunctionsをTypeScriptで実装する方法を紹介します。

環境構築

必要なパッケージをインストールする

yarn add -D typescript netlify-lambda @types/aws-lambda @babel/preset-typescript
  • netlify-lambda: Babel+WebPackを内包していて、TSで実装したFunctionをシングルファイルのJSにビルドしてくれるツールです。
  • @types/aws-lambda: Netlify FunctionsはAWS Lambdaとインターフェイスが同じなので、その型定義ファイルを入れておきます。
  • @babel/preset-typescript: netlify-lambdaがBabelなので、BabelでTSをビルドするために必要です。

Babelの設定を書く

プロジェクトルートに以下の内容で.babelrcを作ります:

.babelrc
{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "12"
        }
      }
    ]
  ],
  "plugins": []
}

TypeScriptのコンパイル設定

Netlify FunctionsはNode.js 12が実行環境なので、それに合ったtargetとlibを設定します。

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "lib": [
      "ES2020"
    ],
    "noEmit": true
  }
}

tscでJSを生成することはないので、noEmitを設定しておきます。

package.jsonの設定

package.jsonにscriptsとenginesを追加します。

package.json
{
  "scripts": {
    "build": "netlify-lambda build src/",
    "serve": "netlify-lambda serve src/"
  },
  "engines": {
    "node": "^12.9.0"
  }
}

buildスクリプトは、TSファイルからJSファイルを生成するものです。serveスクリプトはローカルで関数を試せるようにするものです。TSファイルは、./srcディレクトリに置くことにします。

enginesにはNode.js 12.9以上を要求する設定にしておきます。

Netlifyの設定

Netlify Functionsの置き場と、ビルドコマンドを指定しておきます。

netlify.toml
[build]
  functions = "./functions"
  commands="yarn build"

ビルドコマンドは先ほどpackage.jsonで定義した、buildスクリプトです。

※この設定でNetlifyにデプロイしてyarn buildが動かない場合は、Netlifyの管理画面でyarn buildを設定してください:

.gitignoreの設定

/functionsはビルドの生成物が入るところなので、gitの管理対象外にしておきます。

/functions
/node_modules

NetlifyのNodeバージョンを12に設定する

NetlifyはデフォルトでNode 10が使われます。package.jsonで12.9以上を要求しているので、そのままだとビルドがFailになります。そうならないよう環境変数の設定にNODE_VERSION、値12を追加しておきます:

以上で環境構築は完了です。

TypeScriptで関数を実装する

上の手順でTypeScriptファイルは./srcに置くことにしたので、ためしに./src/hello.tsを作ってみましょう。

src/hello.ts
import { APIGatewayProxyHandler } from 'aws-lambda'

export const handler: APIGatewayProxyHandler = (
  event,
  context,
  callback
) => {
  const subject = event.queryStringParameters?.name ?? 'World'
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(`Hello ${subject}`)
  })
}

これを作ったらローカルで動かしてみます:

yarn serve

curl http://localhost:9000/hello

"Hello World"が出力されれば成功です。

デプロイする

あとは普通にgit pushすればデプロイできます。デプロイプロセスが開始すると、ビルドが走り、JSにコンパイルされた関数がNetlify Functionsに配置されます。

おわり

本稿で紹介した手順をほどこしたサンプルリポジトリはGitHubにあげてあります。