🐷

Netlify FunctionsのTypescriptを使った開発が楽になってるよ

2022/01/16に公開

はじめに

個人開発でさくっとAPIを開発したくて、調べていたら、Netlify FunctionsをTypescriptで開発するのが楽できそうだったので、メモがわりに残しておきます。（といっても、半年くらい前にはリリースされていた機能で。日本語の記事がなかったので。）
記憶の片隅に残っている情報だと、webpackとbabelを利用して開発をすすめる必要があって面倒な印象でしたがそのあたりは解消されていました。
以前は、netlify-lambdaを利用して、ローカルでは開発していたようです。最新の環境では、変わっていますので、そのあたりにも触れていきます。

インストール

必要なモジュールをインストールします。

npm i -D typescript netlify-cli

npm i @netlify/functions

netlify-cli では、@netlify/esbuild を利用してビルドを行います。
esbuild自体は、本家からforkして利用しているようです。
https://github.com/netlify/esbuild

tsconfig.jsonファイルを作成

npx tsc --init

esModuleInteropとisolatedModulesプロパティを有効にします。
それ以外の、設定は、初期値のままにしています。

サンプルAPI

netlify/functions フォルダに、公式のコードを置いておきます。ファイル名はhello.tsとしました。ここにも記載されていますが、netlify/functionsフォルダがデフォルトになっています。

このあたりの設定は、netlify.tomlファイルで変更が可能です。

hello.ts

import { Handler } from "@netlify/functions";

const handler: Handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello World" }),
  };
};

export { handler };

ローカルでサンプルを起動

netlify dev

画像でも確認できますが、http://localhost:8888/.netlify/functions/hello で関数がデプロイされていることがわかります。
sample

.gitignoreの設定

devで起動時に、.netlifyフォルダにビルドしたjsファイルが保存されるので、.gitignore に追加しておきます。

.netlify

package.jsonのScriptを更新

local開発環境で確認用の、netlify devを設定しています。
また、ビルド時に、typeのチェックも行いたいので、tscのコマンドも呼べるようにしておきます。

package.json

  "scripts": {
    "dev": "netlify dev",
    "tsc": "tsc --noEmit"
  },

ここまでで、インストールやローカルでの環境が終わったので、netlifyのコンソール上でデプロイします。

リリース

迷うこともないかとおもいますが、キャプチャしていたので、リリースの手順も残しておきます。

ログイン後の画面で、import an exisiting projectをクリックする。
Importのworkflowの画面が表示されるので、GitHubをクリックする。
今回作成した、レポジトリを作成して、installをクリックする。
install完了後に、Workflowの先頭に戻ってきます。
先ほど、installした、レポジトリが表示されているので、クリックする。
ビルドの詳細設定画面が表示されるので、ビルドコマンドとして、tsc を設定します。
以下に記載されていますが、自動で検出してビルドされるので、jsにビルドするコマンドは不要になります。

You can create Netlify Functions using TypeScript. Our build system will automatically detect .ts files in your site’s functions directory, bundle them with esbuild, and deploy them along with the rest of your site.

release6

ログでデプロイログを確認できます。hello.tsファイルを検出して、hello.jsファイルを作成していることがわかります。

他にも、ログから、package.jsonを解析して、最新バージョンのnodejsを利用していることもわかります。
デプロイ後にサイトにアクセスすると、作成した関数からResponseが返ってくることが確認できます。