Netlify Functionsをローカル環境で使うには

Netlifyでデプロイ（公開）しているサイトには、レンタルサーバーのようなサーバー機能がないため（サーバーレス）、サーバーサイドの処理をするためにNetlify Functionsの機能が提供されています。

代表例が問い合わせフォームで、クライアントサイドからpostされたデータを受け取って何らかの処理をする時に、このNetlify Functionsを使います。

「Netlifyでデプロイされているサイト」用の機能ですが、Netlify CLIを使えばローカル環境で試すこともできるため、ローカル環境でテストして、問題なければデプロイgit pushといった流れになります。

以下補足を交えながら流れをご紹介します。

準備

「netlify」のコマンドを使えるようにする

npm install netlify-cli -g

Netlifyの認証を済ませる

netlify login

セットアップ

netlify init

リポジトリと紐付けるための専用のコマンドもあります

netlify link

開発用サーバーを立ち上げる

netlify dev

以上です。

イベントが発火する仕組み（条件）

ルートフォルダ（package.jsonなどのファイルがある1番上の階層）に、「netlify」フォルダを作り、その中に「functions」フォルダを作ります。

そして、そのfuntionsフォルダに、「エンドポイント名のフォルダ」を作り、その中に「エンドポイント名のファイル」を作ります。

例えば、「Hi, we are Shinobi Works!」の文字列を返す処理をするファイル「greeting.ts」を追加するとします。その場合のファイル構成は以下の通りです。

netlify
└── functions
    ├── greeting
    │   └── greeting.ts

そして、ファイルの中身は以下のようにします。

// greeting.ts

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

export const handler: Handler = async (event, context) => {
  return {
    statusCode: 200,
    body: "Hi, we are Shinobi Works!"
  };
};

※こちらのフォーマットについては、TypeScript版とJavaScript版があるので、ご参照ください。

このファイルの実行結果は、{あなたのサイト}/.netlify/functions/{エンドポイント}で確認でき、今回の例だと、http://localhost:8888/.netlify/functions/greetingになります。

ちなみに、functions内のファイルは、コマンドでも作成でき、コマンド例は以下の通りです。

netlify functions:create --name function-xyz

特別なイベント

ここまでの例では、自分で作成したエンドポイントにアクセスすることで処理を実行していましたが、Netlifyには特定のタイミングで処理を実行できるイベントがいくつか用意されています。

例えば、その中の1つに、フォームの送信成功時に発火するイベント「submission-created」があるのですが、先述の例と同じように、このイベント名と同じファイルを作成するだけで、フォーム送信成功時にファイル内の処理が実行されます。

階層は以下の通りです。

netlify
└── functions
    ├── submission-created
    │   └── submission-created.ts

例として、ファイルの中身を以下のようにして、問い合わせフォームを設置しているページからフォームを送信してみてください。post先は'/.netlify/functions/submission-created'にする必要はなく、'/example-page'などサイト内であればどこでもイベントが発火します。

// submission-created.ts

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

export const handler: Handler = async (event, context) => {
  console.log(`We are Shinobi Works inside console`);

  return {
    statusCode: 200
  };
};

すると、リクエスト結果と共に、今回の文字列がコンソールに表示されていることがわかります。

本番環境と同じ条件で試す

注意点があり、ローカル環境と本番環境とでNetlify Functionsの動作が違う場合があります。

例えば、FormData（multipart/form-data）でpostされた値を処理する場合、本番環境ではBase64エンコードされているため、ローカル環境と本番環境とで処理の方法を変える必要があります。

こういった所作を知っていればいいですが、「ローカル環境でテストして本番用のブランチでデプロイしたら動きが違う」といったことも起こり得るため、本番環境と同じ条件でのテストも必要になります。

そのためのコマンドがnetlify build && netlify deployです。開発用ではなく、本番用としてサイトがデプロイされるため、本番環境と同じ条件でサイトが構築・デプロイされます。

また、Netlify Previewとして実行されるため、デプロイ時間のカウントに含まれないのも大きなメリットです。