Netlify Functions を PWA のバックエンドで使う

Netlify は静的サイトをホスティングするのに便利です。

blog.kondoumh.com

JSON データを置いてちょっとしたデータソース的にも使えます。

blog.kondoumh.com

しかし、JSON を静的に配置できるだけだと上の記事のように更新のためのパイプラインを実装する必要があるし、リアルタイム性も犠牲になります。PWA のバックエンドでちょっと動的な処理をしたい場合に Netlify Functions を利用する選択肢が提供されています。

docs.netlify.com

Functions は AWS Lambda を利用したサービスであり、簡単にバックエンドの API を追加できるようになっています。Node.js が 使えるようになったのが1年ぐらい前で今は Go も使えるようです。

www.netlify.com

JAMstack の A は API の A ですが、その API Stack が強化されたことになります。Functions がなくても外部の API を叩くことはできましたが、サーバー不要で自作の API と一緒にデプロイできるのが進化です。

既存の PWA サイトに Netlify Functions を追加するには、プロジェクトのルートに netlify.toml ファイルを追加します。

[build]
  command = "npm run build"
  functions = "dist/api"

npm -i netlify-lambda で Netlify Functions を使うためのライブラリを追加します。その他、API の実装に必要なライブラリも追加しておきます。

  "dependencies": {
    :
    "netlify-lambda": "^2.0.1",
  },

PWA の src ディレクトリとは別の専用のディレクトリを用意して API のソースコードを追加します。

exports.handler = async (e, c) => {

  const data = await hoge();
     :
  return {
    statusCode: 200,
    body: JSON.stringify(data),
  };
};

Functions の API を resources/api/hoge.js に書いたとして Vue.js のプロジェクトへの追加後の構成はこんな感じ。

.
├── resources
│   └── api
│        └── hoge.js     
├── src
│   ├── assets
│   ├── components
│   ├── plugins
│   ├── router
│   └── views
├── netlify.toml
├── package.json
├── vue.config.js
└── test

package.json の build script で PWA のビルドと netlify-lambda の CLI を順次実行するように変更します。下記は Vue CLI と Netlify Functions CLI を実行する例です。

{
  "scripts": {
     :
    "build": "vue-cli-service build && netlify-lambda build resources/api"
  }
}

これで PWA と Functions のエンドポイントが一気にデプロイできます。

Functions の利用側では同一サイトの .netlify/functions 配下のパスを指定して API を呼び出します。

  const res = await fetch(".netlify/functions/hoge", {
    headers: {
      "foo": bar
    }
  })
  const json = await res.json()

Functions がデプロイできてしまえば、ローカルの開発時もデプロイ済みの Functions を呼び出せるように vue.config.js で devServer の proxy を設定しておけば楽です。

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: "https://hogehoge.netlify.app"
  }
}

Netlify のコンソール画面で呼び出しログも確認できます。もちろん、npm run dev でローカルに Functions を起動して、そのポートに proxy することも可能です。

以上のように AWS Lambda の機能をアドオンしたサイトがサクッと構築できるので、応用の幅が広がりました。

Functions の機能強化として、現在はベータ版ですが、時間のかかる処理(最大15分)をバックグラウンドで行わせることができる Background Functions も使えるようになるみたいです。

docs.netlify.com