Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

無料で使える AWS Lambda:Netlify Functions を使ってみた

任意の関数をリクエスト単位で実行できる FaaS。最も有名なのは AWS Lambda だと思うが、コレとほぼ同じ機能を無料で利用できる Netlify Functions というモノを使ってみた。

Netlify に登録する

Netlify は、GitHub Pages や Zeit Now などのように、静的サイトをホスティングできるサービス。GitHub や Bitbucket などのリポジトリと連携してサイトをデプロイできる。

Netlify Functions を使うには、Netlify 自体への登録が必要だ。しかしそれも、GitHub や Bitbucket のアカウントと連携して作成すればすぐにアカウント発行が完了する。

有料版も存在するが、無料プランはクレジットカード登録も不要で利用できるので、Heroku なんかよりもお手軽だと思う。

Netlify Functions を使ってみる

それでは早速、Netlify Functions を使ってみよう。

まずはアカウント連携した GitHub か Bitbucket で、新規リポジトリを作る。そのリポジトリをクローンし、次のような資材を配置していく。

  • package.json
    • netlify-lambda というパッケージをインストールする
{
  "name": "my-first-netlify",
  "private": true,
  "scripts": {
    "dev": "netlify-lambda serve src",
    "build": "netlify-lambda build src"
  },
  "devDependencies": {
    "netlify-lambda": "1.6.3"
  }
}
  • netlify.toml
[build]
  command   = "npm run build"
  functions = "dist"
  • src/example.js
exports.handler = async (event, context, callback) => {
  return callback(null, {
    statusCode: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: 'Hello World' })
  });
};

このようなファイルを作ったら、npm installnetlify-lambda をインストールして、次のようにローカルで動作確認してみよう。

$ npm run dev

すると、

  • http://localhost:9000/.netlify/functions/example

といった URL で src/example.js の関数が動作するようになる。ブラウザでこの URL にアクセスしてみると、

{"text":"Hello World"}

というテキストが表示されるはずだ。

ココまでできたら、資材をコミットし、Git Push しておこう。

Git リポジトリを連携して Netlify Functions をデプロイする

Netlify の管理画面に移動し、「New site from Git」ボタンを押下する。

「Create a new site」画面で連携するリポジトリを選択できるので、GitHub や Bitbucket から先程作成したリポジトリを選択する。

デプロイに連動させるのは master ブランチ、その他の設定項目はデフォルトのままとして良い。特に Functions 関係は netlify.toml ファイルで定義した内容を優先して使用するので、Netlify 管理画面上では空欄で何も設定しなくて良い。

リポジトリを連携すると、「Site」が追加されるはずだ。「Overview」画面で「Production deploys」欄を見ると、どのようにデプロイされたかが確認できる。

上部のメニューに「Functions」タブがあるのでコレを選ぶと、Netlify が自動的に特定してデプロイされた Functions が一覧表示されているはずだ。先程の例なら example.js が見えていると思われる。

このリンクを押下すると、当該 Function のエンドポイント URL が確認できる。

  • 例 : https://my-first-netlify.netlify.app/.netlify/functions/example

さらにこの画面には「Function log」欄もあり、当該エンドポイントにアクセスがあった時にリアルタイムでコンソールログを出力してくれる。なので、コード中に console.log() を仕込んでおけば、リクエスト中の詳細も確認できるというワケ。

今日はココまで

無料で Functions をデプロイでき、Git 連携により更新も全自動。

今回は紹介しなかったが、外部 npm パッケージを組み合わせたり、POST リクエストに対応したりすることもできるので、これから使っていこうと思う。

ゼロから始めるNetlify (技術の泉シリーズ(NextPublishing))

ゼロから始めるNetlify (技術の泉シリーズ(NextPublishing))