5分で始めるNetlifyでFaaS(Function as a Service)入門 1: Hello World

2018.08.02

主にフロントエンドでアプリケーションを書いている人向けの記事です。また、AWS LambdaやGCP Cloud funtionsは知ってるけど敷居が高く感じていて、まだ実際にやったことのない人もこの記事の対象読者です。

あらすじ

FaaSを使う理由

任意のURLを生成して、そのURLにアクセスすると特定の処理が走るような仕組みをFaaS（Function as a Service）といいます。何が嬉しいかというと開発者はサーバーを意識することなく特定の処理を実行する環境を手に入れることができるという点です。常にサーバーを立ち上げておく必要がないので、たいてい安く使えますし、サーバーの状態管理が必要なく気にすることも少ないです。

サーバーを意識することが少ないので、普段サーバーサイドになれていないフロントエンドな人でも始めやすいし、保守を必要としないので趣味プロダクトで使いやすいという性質も持っています。とはいえ企業のプロダクトでも取り入れられていて、日経電子版とCookpadの例を載せておきます。（どちらかといえば、FaaSというよりはサーバーレスアーキテクチャでlambdaが使われています。ただし趣味プロダクトと業務プロダクトではかなりの断絶があるように感じています。）

日経電子版の例: 紙面ビューアーを支えるサーバーレスアーキテクチャ / serverless architecture supports Nikkei’s paper viewer - Speaker Deck
Cookpad社の技術ブログ: AWS Lambda@Edge で画像をリアルタイムにリサイズ＆WebP形式へ変換する - クックパッド開発者ブログ

Netlify functionsとは

Netlify上でAWSのFaaSであるlambdaを利用できるようにしたものです。AWSのアカウントは不要でNetlifyのアカウントがあれば利用することが出来ます。

AWS LambdaやGCP Cloud funtionsは利用するのにクレジットカードの登録が必要で、始める敷居も高かったのですがNetlify functionsの場合、月120,000回の起動分は無料で使えるので非常に始めやすいという性質も持っています。

それでは、気軽に利用できるFaaSであるNetlify functionsを使ってFaaSを始めてみましょう！

本編

前提として、Netlifyのアカウントは持っているものとします。

リポジトリの作成

GitHubでリポジトリを作成しましょう。今回はhello-functionsというリポジトリにします。

$ mkdir hello-functions
$ cd hello-functions
$ git init
$ git commit -m 'Init' --allow-empty
$ git remote add origin [GitHubのリポジトリのURL]
$ git push -u origin master

実行する関数を書く

今回は入門のために hello world という文字列を返すようにします。第3引数として渡ってくるcallback関数を実行することでレスポンスの内容をいじることができます。

functions/hello.js

exports.handler = function(event, context, callback) {
  console.log('Hello Netlify Functions.')
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
}

functionsの利用するディレクトリを指定する

Netlifyの設定はGUIで操作できますが、リポジトリ上にnetlify.tomlというファイルを置くことでも変更可能です。今回はnetlify.tomlを利用します。以下の内容でリポジトリのルートディレクトリに置きましょう。

[build]
  functions = "functions"
```

### Netlifyでリポジトリを紐づけます
Netlifyへの会員登録を行っていない型はGitHubアカウントがあれば簡単に登録できます。
登録済みの方は「New site from Git」=> 「GitHub」とクリックしていくとリポジトリ選択画面が現れるので、今回作ったリポジトリを選択しましょう。
Basic build settingsの画面が現れますが、今回に関してはBuild command、Publish directoryは空でも大丈夫です。`Deploy Site`をクリックしましょう。

これでNetlify連携は完了です。
これ以降、GitHubにpushされたタイミングでNetlifyに変更が反映されるようになります。

### 動作確認

<img width="1033" alt="スクリーンショット_2018-07-30_11_03_18-2.png (173.8 kB)" src="https://img.esa.io/uploads/production/attachments/6967/2018/08/01/4651/59fc088b-9d75-4603-bb2d-0ab4e421414b.png">
上部の`Functions`を押すとそのリポジトリのFunctionの一覧が現れるので`hello.js`を選択します。

<img width="1088" alt="スクリーンショット_2018-07-30_11_04_42-2.png (134.3 kB)" src="https://img.esa.io/uploads/production/attachments/6967/2018/08/01/4651/e44f15ee-751c-4fda-b847-ff64430ac8e6.png">

遷移先のページの上部にEndpointという項目がありそのURLが、Functionsの起動URLになります。
そのURLにアクセスしてみると`Hello, World`という結果が返ってくると思います。これで無事に動作していることがわかりました。

## Next Step: なにに使っていけばいいの？
Hello Worldが表示されるだけだと何のメリットも感じられませんね。実際には、この関数の中の処理を充実させていくことになります。
多分、応用編も書いていきます。

## 宣伝
技術書典5でNetlifyに関する本を書く予定です。Netlify Functionsを利用したSlack appの作成方法に関しても書こうと思っています。

興味のある人は[僕のTwitter](https://twitter.com/mottox2)をフォローしていただけると嬉しいです。

Xでシェア