Netlify FunctionsのTypescriptを使った開発が楽になってるよ
はじめに
個人開発でさくっとAPIを開発したくて、調べていたら、Netlify FunctionsをTypescriptで開発するのが楽できそうだったので、メモがわりに残しておきます。（といっても、半年くらい前にはリリースされていた機能で。日本語の記事がなかったので。）
記憶の片隅に残っている情報だと、webpackとbabelを利用して開発をすすめる必要があって面倒な印象でしたがそのあたりは解消されていました。
以前は、netlify-lambdaを利用して、ローカルでは開発していたようです。最新の環境では、変わっていますので、そのあたりにも触れていきます。
インストール
必要なモジュールをインストールします。
npm i -D typescript netlify-cli
npm i @netlify/functions
netlify-cli では、@netlify/esbuild を利用してビルドを行います。
esbuild自体は、本家からforkして利用しているようです。
tsconfig.jsonファイルを作成
npx tsc --init
esModuleInteropとisolatedModulesプロパティを有効にします。
それ以外の、設定は、初期値のままにしています。
サンプルAPI
netlify/functions フォルダに、公式のコードを置いておきます。ファイル名はhello.tsとしました。ここにも記載されていますが、netlify/functionsフォルダがデフォルトになっています。
このあたりの設定は、netlify.tomlファイルで変更が可能です。
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 で関数がデプロイされていることがわかります。
.gitignoreの設定
devで起動時に、.netlifyフォルダにビルドしたjsファイルが保存されるので、.gitignore に追加しておきます。
.netlify
package.jsonのScriptを更新
local開発環境で確認用の、netlify devを設定しています。
また、ビルド時に、typeのチェックも行いたいので、tscのコマンドも呼べるようにしておきます。
"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.
-
ログでデプロイログを確認できます。
hello.tsファイルを検出して、hello.jsファイルを作成していることがわかります。
他にも、ログから、package.jsonを解析して、最新バージョンのnodejsを利用していることもわかります。
-
デプロイ後にサイトにアクセスすると、作成した関数からResponseが返ってくることが確認できます。
おわりに
面倒なビルド設定がほとんど不要で、楽にリリースすることができました。（デフォルトであれば）
記事を書きながらでしたが、1時間から1時間半くらいでリリースできた感じです。
個人開発でも使ってみようと思います。
今回利用したサンプルは、以下に格納しています。
参考
Discussion