皆さんいかがお過ごしでしょうか。コロナによる自宅での自粛要請が出ている中、家の中にこもってネットサーフィンする機会が増えているのではないでしょうか。

自分も気軽に遊びに行くこともできなくなってきたので、良い機会だと思って知らない言語や技術の勉強をしたりしています。

今回は色んなサービスを作ってみようかと考え、プロトタイプをいくつか立ち上げている中で、AWSのLambdaのようなサービスであるNetlify Functionsというのを今更知ったので、こちらの建て方についてのチュートリアル的なものを紹介していきます。

ちなみに以下のリポジトリが今回のサンプルとなります。

Netlifyとは？

Netlifyとは高機能な静的なホスティングサービスです。基本的には無料で使用できて、何の設定をすることもなくデフォルトでHTTPSに対応しているのも特徴です。

それ以外にもNetlifyには色んなアドオンをが提供されています。
詳細は以下に載っています。

Netlify Functinsとは

Netlify内のアドオンであるFaaS（Function as a service)です。

AWS Lambdaのように特に設定もなく、ソースコードを実行してくれます。実は裏側ではAWS Lambadaが実行基盤として動いているそうです。

無料でも使用することもできますが、無料プランには以下の制限があります。

・125,000 リクエスト/月
・100 時間/月

Netlify Functionsの開発環境の整備

Netlify Functionsはローカルでもエミューレーたとして動かすこともできます。ローカルでの開発環境を整備していきましょう。

まずは yarn initでpackage.jsonを生成します。

$ yarn init

次に netlify-lambda というパッケージをインストールします。

$ yarn add netlify-lambda

実行用のスクリプトの設定

netlify-lambdaをインストールしたらpackage.jsonの中に実行用のスクリプトを追記します。

"scripts": {
  "build": "netlify-lambda build functions/",
  "serve": "netlify-lambda serve functions/"
}

上記を追加するとpackage.jsonは下記のようになるはずです。

{
  "name": "netlify-functions-example",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github-shimakaze-git:shimakaze-git/netlify-functions-example.git",
  "author": "shimakaze-git <shimakaze.soft+github@googlemail.com>",
  "license": "MIT",
  "scripts": {
    "build": "netlify-lambda build functions/",
    "serve": "netlify-lambda serve functions/"
  },
  "dependencies": {
    "netlify-lambda": "^1.6.3"
  }
}

Netlify Functionsの構成の準備

次にソースコードを格納するディレクトリを用意して、デプロイに必要な設定ファイルも作成します。

$ mkdir functions

netlify functionsで動作させるソースコードは全てfunctions以下に配置します。

netlifyの設定ファイルである netlify.toml をルートディレクトリに作成します。

$ touch netlify.toml

以下のようにnetfliyの設定をしていきます。まずはfunctionsとcommandの項目を設定いきましょう。

[build]
  functions = "api"
  command = "yarn install && yarn run build"

それぞれの項目の詳細は以下になります。

・functions
Netlify Functionsで動作の対象となるファイルのディレクトリ

・command
Netlifyのデプロイ時に実行されるコマンド

ここではfunctionsをapiに設定しています。ここでapiに設定しておくことで、package.jsonのscriptsで設定したyarn run buildを実行時に、functionsディレクトリの中身をビルドして自動でapiというディレクトリが生成されます。

functions上で実行できるファイルの作成

次にfunctions上で実行するファイルを作成します。ここから先は通常のNode.jsのファイルを作成するのと変わりません。

それではまず最初にhello.jsというファイルを作成してみましょう。

$ touch hello.js

hello.jsの中身は以下のようになっています。シンプルにHello, Worldという文字列を返すだけのものです。

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: "Hello, World"
  }
}

現在時刻を返すAPIの作成

現在時刻を返すAPIを作成してみます。

まずはmomentというパッケージをインストールします。

$ yarn add moment

functionsディレクトリの中にmoment.jsというファイルを作成して、以下のようなコードを追記します。

$ touch moment.js
$ vim moment.js

import moment from "moment"
import "moment/locale/ja"

moment.locale("ja")

exports.handler = function (event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: moment().format()
  })
}

eventとcontextパラメーターに入っている項目

eventパラメーターの内容は以下のようなものになります。

{
   "path": "HTTリクエストのパス", 
   "httpMethod": "HTTPリクエストのメソッド（GET,POST）"
   "queryStringParameters": {クエリパラメータの情報}
   "headers": {ヘッダ情報}
   "body": "HTTPリクエストの文字列"
   "isBase64Encoded": "HTTPリクエストがBase64でエンコードされているかどうか(true, false)"
}

contextパラメーターの内容は以下のようなものが入っています。

{ clientContext: {} }

自分も詳細はまだ分かりませんが、Netlify identity など他のアドオンも使用している場合のコンテキスト情報などが入るそうです。

実際にローカルで動作させてみる

上記のようにfunctionsディレクトリ内でいくつかファイルを作成してみたら、実際に以下のコマンドでローカル上で動作させてみましょう。

$ yarn run serve

package.jsonのscriptsで設定した netlify-lambda serve functions/が動作します。
portとしてはデフォルトでは9000番で動作しますが、以下のように --portで動作するportを指定できます。

$ yarn run serve --port=9001

実際にWEBブラウザでアクセスすると、以下のような画面が表示されるはずです。

以下のように表示されいます。

You have requested the root of http://localhost:9000. This is likely a mistake. netlify-lambda serves functions at http://localhost:9000/.netlify/functions/your-function-name; please fix your code.

http://localhost:9000/.netlify/functions/{関数名=ファイル名}で先ほど作成したファイルのAPIにアクセスできます。

先ほどはhello.jsとmoment.jsを作成したので、以下二つのエンドポイントに対してアクセスしてみましょう。

・http://localhost:9000/.netlify/functions/hello
・http://localhost:9000/.netlify/functions/moment

http://localhost:9000/.netlify/functions/momentにアクセスしてみると、以下のように時間が返ってくるはずです。

2020-04-19T09:59:42+09:00

Netlify Functionsへのデプロイ

次にデプロイ作業を行っていきますが、こちらは通常のNetlifyと変わらず、githubに対してpushすれば、自動でci/cdのように検知して、デプロイ作業を行ってくれます。

以下のようにfunctionsのページに先ほど作成したファイルの欄が出来上がっていれば成功です。

ちょっとしたAPIを作成するなら最適な環境かもしれません。

わざわざAWS Lambdaを用意したり、firebaseのcloud functionsを用意する手間もなく、簡単にAPIの環境を用意できます。

expressとの連携する方法もあるそうなので、そちらに関しては別途で記事を上げていきます。

参考資料