Netlify Functions の Zero configuration と Netlify CLI

Netlify Functions は AWS Lambda を基盤とした API のプラットフォームです。

blog.kondoumh.com

利用は非常に簡単ですが、最近さらに Zero configuration という仕組みが導入されました。規定のディレクトリ (netlify/functions) にコードを配置するだけで、コミットしたら Netlify が自動的に Functions をビルド・デプロイしてくれます。

www.netlify.com

これまでは、netlify-lambda を devDependencies に追加して、netlify.toml で build command や functions のディレクトリなどを指定していました。

[build]
  command = "npm run build"
  functions = "resource/api"

試しに functions のコードを netlify/functions に移動し、netlify.toml を消し、package.json の build script は 文字列を echo するだけのものにして git commit / push してみました。

npm run build は実行されますが、これとは別に Functions bundling が開始され、netlify/functions 配下の hello.js が検出され bundle されました。

f:id:kondoumh:20210224074821p:plain

ちゃんとデプロイされました。

f:id:kondoumh:20210224123158p:plain

これで、Zero configuration の動作は確認できました。

これまで、Functions のローカル開発は netlify-lambda serve <dir> を実行することで行っていました。しかしこの実行には netlify.toml の作成が必須であり、Zero configuration と矛盾します。*1

netlify-lambda のドキュメントを読んでみました。

github.com

netlify-lambda serve (legacy command)

This command is pretty much superceded by Netlify Dev. We only keep it around for legacy/backward compatibility support reasons.

どうやら serve は legacy command という位置付けのようです(create-react-app などと共に使用するようなユースケースのため)。 そして Netlify Dev に置き換えられるとのことです。

www.netlify.com

Netlify Dev ってなんぞっていうところですが、文字通り Netlify を使った開発をローカルで行うための環境でした。

docs.netlify.com

Netlify CLI をインストールして Netlify にログインした状態で使います。

インストール

% npm install netlify-cli -g

ログイン

% netlify login

ブラウザが開くので Authorize をクリックするとログイン状態になります。

f:id:kondoumh:20210224203415p:plain

プロジェクトディレクトリで netlify dev を叩くと

f:id:kondoumh:20210224203921p:plain

localhost:8888 でプロジェクトのコンテンツが Serving されているようです。Netlify Functions の規定のパスは、.netlify/functions/ なので、API を呼び出してみると結果が取得できました。

f:id:kondoumh:20210224213107p:plain

Netlify CLI には他にも多くのサブコマンドが実装されています。package.json に何も書かなくてもよいので、まさに Zero configuration です。

Vue を使う開発でも、Vue の開発用サーバと netlify dev を別 port で動かし proxy の設定だけしておけば、netlify-lambda は要らないだろうなと思っています。

*1:netlify/functions 以外のディレクトリに配置したい場合飲み netlify.toml を作成することになっています。