Netlify Functionsでexpressを用いたAPIを作成するまでの備忘録

これはNetlify Functionsでexpressを用いたAPIを作成するまでの備忘録となる。

今回始めてNetlify functionsを触ってみたが依存関係のパッケージ等をいくつかインストールしているので、そちらの簡単な説明とともに、実際にNetlifyにデプロイするまでの過程をメモしたのがこのポスト。

実際に作成したサンプル

なお実際に公開しているコードはこちら。
.gitignore の記述など細かいところは省略している。

netlify-lambdaをインストールする

まずはnetlify-lambdaをインストールする

yarn add netlify-lambda

これはnetlify functionsを開発していくのをサポートするためのツールとなる。
実はこのnetlify-lambdaがなくてもnetlify functionsの開発は可能のようだ。

だが、これがあるとローカル環境でも動作確認ができたりするので、あったほうが良いのは間違いない。

github.com

serverless-httpとexpressをインストール

次はAPIをサーバレスとして用いるために利用する serverless-http と、実際にAPIを作成する上で利用する express をインストールする。
（expressについての説明は本題から外れるので省略する。)

github.com

serverless-httpを使うと、APIをサーバーレスで使うために「ラップ」することができる。
あまりいきなりいろいろ調べて過ぎてもフットワーク重くなってしまうので、とりあえずサーバレスで使うためにいい感じにやってくれるパッケージとして認識することにした。今回はこれを用いて作成していく

netlify.tomlを配置する

まずはルートに netlify.toml を配置する。

touch netlify.toml

次に下記の記述を追加する。

[build]
  functions = "functions"

これはnetlify側にこのプロジェクトをビルドすると functions ディレクトリにfunctionsのコードが配置されることを伝えるために記載している

APIの処理を記述する。

src/api.js に以下のようなソースコードを記述する。
とにかく動作確認のためのシンプルな処理。

const express = require("express");
const serverless = require("serverless-http");

const app = express();
const router = express.Router();

router.get("/", (req, res) => {
  res.json({
    message: "Hello World"
  });
});

router.get("/hi/:name", (req, res) => {
  res.json({
    message: `Hi! ${req.params.name}`
  });
});

app.use(`/.netlify/functions/api`, router);

module.exports = app;
module.exports.handler = serverless(app);

netlify-lambdaを用いてローカルで動作確認を行う

package.jsonには下記のように記載する。
（タイミングによってインストールされる依存パッケージのバージョンは異なる。）

{
  "scripts": {
    "start": "netlify-lambda serve src",
    "build": "netlify-lambda build src"
  },
  "dependencies": {
    "express": "^4.18.1",
    "netlify-lambda": "^2.0.15",
    "serverless-http": "^3.0.1"
  }
}

下記のコマンドを実行することで、ローカルでnetlify functionsの動作確認を行うことが可能。

yarn start

サーバを起動して http://localhost:9000/.netlify/functions/api にアクセスすると、下記のレスポンスを確認できる。

{
  message: "Hello World"
}

また、http://localhost:9000/.netlify/functions/api/hi/testuser というURLにアクセスすると、下記のレスポンスを確認できる。

{
  message: "Hi! testuser"
}

ちなみにこの動作確認の間、サーバのログに下記のような文言が表示されていた。

Your lambda function didn't return a body, which may be a mistake. Check our Usage docs for examples (https://github.com/netlify/netlify-lambda#usage).
          If this is intentional, you can silence this warning by setting process.env.SILENCE_EMPTY_LAMBDA_WARNING to a truthy value or process.env.CONTEXT to 'production'

調べてみたが、問題自体はなさそうなので、一旦スルーしている。

動作確認はOKそうなので、netlifyにデプロイする。

netlify functionsにデプロイする

まずはGitHubにリポジトリを作成する。

あとはNetlifyに普段どおりサイトをデプロイするのと同じようにNetlify側でサイトのデプロイ設定を行った。
Netlify functions向けの何かしらの設定が必要になるかと思ったが、特に不要そうで完全にいつもどおりの設定しか行わなかった。

一応、build設定などは下記のように行っている。

build commandだけ yarn build で設定しており、その他は空欄としている。

デプロイ後、下記のURLにアクセスしてみると、ローカルでテストした通りのレスポンスが帰ってきたのを確認できた。

{デプロイされたドメイン}/.netlify/functions/api/hi/testuser

Netlify functionsとしてデプロイを行うと、下記のようにダッシュボード上の Functions に利用状況を示す表示が出てくる。

Netlify functionsのデプロイまでのメモについては以上となる。

at backyard

Color my life with the chaos of trouble.