第1回
Netlify Functionsとは
サーバーサイドの機能を簡単に公開できるサービス、Netlify Functionsを解説します。Netlifyで公開しているサイトにサーバーサイド機能を足したい場合に便利に使えます。
目次
シェア
Netlify Functionsの特徴
Netlify Functionsは、Netlifyが提供する、サーバーサイドの機能を簡単に公開できるサービスです。
常時起動して状態を持つサーバー側のプロセスが存在せず、必要なときに必要なだけの計算リソースを利用する、いわゆるサーバーレスの環境にJavaScriptで書いた関数を配置できます。それらはHTTP経由で呼び出したり、Netlifyプロジェクト内のイベントに応じて動作させられます。
こうした、サーバーレス環境を土台にして機能（Function）の実行環境を提供してくれるサービスはFaaS（Function as a Service）と呼ばれます。
Netlify Functionsの場合は、実際にはAmazonが提供するFaaSである、AWS Lambdaをラップして使いやすくしたもので、その裏側ではAWS Lambdaが動いています。
AWS Lambdaを直接使ったほうが、他のAWSサービスとの連携や柔軟に行える設定の面で利点がありますが、HTTP応答のためにAPIゲートウェイという他のAWSサービスを用意したり、デプロイのための調整も必要になります。
Netlify Functionsにはそうした手間も、AWSアカウントを用意する必要もありません。Netlifyのプロジェクトに連携させたGitリポジトリに機能を実装したファイルを追加するだけで、Netlifyが代わりにデプロイを済ませて、HTTPで呼び出せる機能がすぐに用意できます。すでにNetlifyで公開しているサイトにサーバーサイド機能を足したい場合はもちろん、そうでなくてもNetlifyがもともと備えるGitHub連携機能によって簡単にWeb APIを配置できます。
このシリーズではこのようなNetlify Functionsの使い方を紹介します。
Netlify Functionsを使う
それでは、Netlify Functionsを使ってみましょう。前提として、GitHubのリポジトリと連携済みのNetlifyのサイトがあるものとして進めていきます*。
Functions Directoryの設定
まずはNetlifyのサイト詳細画面から、「Settings > Functions > Settings」とメニューを辿り、Functions Directoryを設定します。ここで指定したディレクトリに配置したファイルが、Netlify Functionsとして公開されます。
ここではfunctionsディレクトリを指定しました。
Functions Directory設定でFunctionsとして公開するディレクトリを指定できる。
Build commandの設定
Build commandになにかしら設定されていないと、Netlify側でNetlify Functionsのデプロイに関するすべてのスクリプトが実行されないため、ここで設定しておきます。今回の例では実際のビルド手順は必要としていないので、単にダミーとしてecho "start build"とだけ設定しています。
Functionsに関するすべてのデプロイスクリプト実行のためにBuild commandにもなにか指定しておく。
AWS Lambda側の仕様の話になりますが、ひとつのFunctionは依存するモジュールなどをひとつのzipファイルにまとめたデプロイパッケージと呼ばれる単位で、AWS Lambdaにデプロイされる必要があります。
この作業はNetlify側で行ってくれるため、普段Netlify Functionsを利用する際には意識しなくて大丈夫です。ですが、Netlifyにこの手順のすべてを実行してもらうためには、このBuild commandの設定もなにかで埋めておく必要があります。
これが抜けていると、たとえばモジュールのインポートを使ったコードの公開が正しく行えなくなるなどの問題が起こり得ます。
FunctionsのPush
一方で、手元ではNetlify Functionsとして公開したいJSファイルを作成します。ここではfunctions/hello.jsという名前で、Netlifyのサイトと連携しているGitHubリポジトリへPushします。
.
└── functions
└── hello.jshello.jsファイルの内容はとりあえず次のようにしておきます。これで、HTTPステータスは200、かつボディに"Hello, World."のテキストを持ったレスポンスを返す機能になります。
HTTPリクエストなどのイベントに応じて呼ばれるのは、常にこのhandlerという名前でエクスポートされている関数です。
exports.handler = async (event, context) => {
return {
statusCode: 200,
body: 'Hello, World.',
};
};Functionsのデプロイと動作確認
NetlifyとGitHubの連携ができていれば、デプロイが始まります。
GitHubからチェックアウトされたコードがデプロイされる。
デプロイされたFunctionsは、サイト詳細画面の「Functions」メニューから確認できます。
デプロイされたFunctionが一覧される。
一覧からひとつのFunctionを選んで進む詳細画面では、エンドポイントURLとログの確認ができます。
Functionの詳細画面。
単純なレスポンスを返すだけのFunctionなので、ブラウザでアクセスすれば「Hello, World」というテキストのレスポンスが返ってきます。
これが、functions/hello.jsに定義したhandler関数から送られたレスポンスです。
ブラウザからFunctionのエンドポイントURLにアクセスした図。
Functionの詳細画面には実行にかかった時間とメモリが記録されます。「Init Duration」というのはいわゆるコールドスタートにかかった時間で、Functionを動作させるためのコンピューターリソースの初期化などが必要な場合にかかるものです。常に発生するものではありません。
Functionの実行ログが表示される図。
基本的なNetlify Functionsへのデプロイの流れは以上となります。
プレビュー用のサイト公開機能と一緒に使う
NetlifyにはGitHubのブランチやプルリクエストと連動して、個別のURLを持ったプレビュー用のサイト公開を行う機能、Deploy Previewが備わっています。
それらはプルリクエストを作成すれば、https://deploy-preview-<プルリクエスト番号>--<サイト名>.netlify.com/というURL、ブランチの更新があれば、https://<ブランチ名>--yoursitename.netlify.comというURLで公開されます。
この機能はNetlify Functionsにおいても有効で、本番公開前にFunctionの動作を確認できます。これも試してみましょう。
次のようにhello.jsの内容を変更して、プルリクエストを作成してみます。
exports.handler = async (event, context) => {
return {
statusCode: 200,
body: 'Hello, World!!!',
};
};Netlifyではこのプルリクエスト作成に連動して、Deploy Previewが始まります。
プルリクエストの作成に連動してデプロイがスタートする。
Deploy PreviewとしてデプロイされたFunctionsの様子は、次のデプロイ詳細画面キャプチャの赤枠で示したリンクから見ることができます。
デプロイ詳細画面のリンクからデプロイされたFunctionsを確認しにいける。
あるいは、Function一覧画面から「Search by branch or Deploy Preview number」のプルダウンにブランチ名やプルリクエスト番号を入力して目的のバージョンを探すこともできます。
ブランチ名やRequest番号を入力して探す。
個別のURLを与えられているDeploy PreviewのFunctionは本番のFunctionとは別に、独立して動作します。レスポンスメッセージはHello World.からHello World!!!に変わっていますが、本番公開されているFunctionには影響を与えません。
ブラウザからDeploy PreviewのFunctionにアクセスした図。
Netlifyでのサイト公開に合わせてNetlify Functionでサーバーサイド機能も作ってしまえば、Netlifyがその両方を一緒にしたプレビュー環境を作ってくれます。サイト側の変更もサーバー側の変更もNetlify上でのプレビュー確認で完結できるため、開発がスムーズになります。
おわりに
今回はNetlify Functionsの概要と、Netlifyがもともと持っている便利な機能との組み合わせについて紹介しました。次回も引き続きNetlify Functionsの利用方法について紹介していきます。
