🐷

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

2022/01/16に公開

はじめに

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

インストール

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

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

https://docs.netlify.com/functions/build-with-typescript/?#project-preparation
esModuleInteropisolatedModulesプロパティを有効にします。
それ以外の、設定は、初期値のままにしています。

サンプルAPI

netlify/functions フォルダに、公式のコードを置いておきます。ファイル名はhello.tsとしました。ここにも記載されていますが、netlify/functionsフォルダがデフォルトになっています。
https://docs.netlify.com/functions/configure-and-deploy/
https://docs.netlify.com/functions/build-with-typescript/#function-format

このあたりの設定は、netlify.tomlファイルで変更が可能です。
https://docs.netlify.com/configure-builds/file-based-configuration/

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をクリックする。
    release1

  • Importのworkflowの画面が表示されるので、GitHubをクリックする。
    release2

  • 今回作成した、レポジトリを作成して、installをクリックする。
    release3

  • install完了後に、Workflowの先頭に戻ってきます。
    release4

  • 先ほど、installした、レポジトリが表示されているので、クリックする。
    release5

  • ビルドの詳細設定画面が表示されるので、ビルドコマンドとして、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.

https://docs.netlify.com/functions/build-with-typescript/#app

release6

  • ログでデプロイログを確認できます。hello.tsファイルを検出して、hello.jsファイルを作成していることがわかります。
    release7
    他にも、ログから、package.jsonを解析して、最新バージョンのnodejsを利用していることもわかります。
    release7-1

  • デプロイ後にサイトにアクセスすると、作成した関数からResponseが返ってくることが確認できます。
    release8

おわりに

面倒なビルド設定がほとんど不要で、楽にリリースすることができました。(デフォルトであれば)
記事を書きながらでしたが、1時間から1時間半くらいでリリースできた感じです。
個人開発でも使ってみようと思います。

今回利用したサンプルは、以下に格納しています。
https://github.com/activeguild/netlify-functions-typescript-esbuild

参考

https://docs.netlify.com/functions/build-with-typescript/
https://www.netlify.com/blog/2021/04/19/announcing-native-typescript-support-for-netlify-functions/

Discussion