はじめに

サーバーレスのサービスといえば

Cloud Functions for Firebase
AWS Lambda
Azure Functions

など、ビッグテックが提供するこれらの機能が有名です。基本的には無料枠があるので簡単に使えますが、'クレジット登録が必須' で業務上で手軽に試すには少し問題がありました。

そこで Heroku を検討しましたが、Heroku は使用していないとスリープ状態になってしまいます。数秒〜数十秒の差で、裏側が AWS Lambda である Netlify Functions の方が早いと判断して、こちらを試してみました。

Netlify Functions とは？

Netlify is the essential platform for the delivery of exceptional and dynamic web experiences, without limitations.

静的ページを公開するには最適のサービスで、そんな Netlify の機能として Netlify Functions というサーバレスの機能です。

現在は、TypeScript, JavaScript, Go での開発が可能です。（2024/07 時点）

Netlify Functions でサーバーを作る

0. 試す前に

基本的には、以下の記事を元に進めました。

ただ、情報が少し変わっており引っかかる点がありました。

また、公式のドキュメントを読んだ結果、この記事よりも少ない設定で試せることがわかったので、そちらを記載しようと思います。

1. アカウント登録

サクッとアカウントを作りましょう。

以下のサービスを使ってサインアップも可能です。

GitHub
GitLab
Bitbucket

2. ファイルの準備

デプロイするコードを用意します。今回は最も簡単な "Hello World" を返す API を作ります。

.js

exports.handler = async function(event, context) {
    return {
        statusCode: 200,
        body: JSON.stringify({ message: "Hello World" })
    };
};

次にディレクトリ構成を作ります。Functions を動かす最も少ない構成はこれだけです。

このディレクトリがデフォルトで予約されている構成になっています。

-> netlify > functions > .js

今回は JavaScript（Node）で行っていますが、netlify > functions 配下に実行したいコードを配置すれば良いので、他の言語でも同様です。また、ファイル名は任意なもので問題ないです。あとで実行するときのパスになります。

3. コードのデプロイ

いくつかの Netlify 記事（2024年より前）ではメニューが上にある UI が散見されます。現在は左側にメニューがあります。

Sites から Netlify にコードを反映します。

この画面では３つの選択肢があります。

Git で管理するコード
Netlify が用意したテンプレート
手動アップロード（ローカルPCからファイル参照）

テンプレートは、あくまでも WEB サイトのテンプレートなので、Functions を使いたい場合は、少しオーバーかもしれません。

また、これとは別に Netlify CLI を使って、ローカルPCからアップロードもできます。

ここで１点だけ...

注意
手動でのアップロードでは Functions が機能しない

これにハマってかなり戸惑いました。
（諸事情により Git や CLI を使えず手動のアプローチを試みていた）

手動でアップロードした場合、HTML は認識されて静的なサイトは反映できましたが、Functions は機能しませんでした。Git or CLI でコードをアップロードしましょう。

記載していませんでしたが、Git 管理下のものを連携する際はリポジトリの指定が必要なので、あらかじめリポジトリを作成して、コードをリモートにアップロードしておきましょう。

4. ステータスの確認

アップロードをすると、Deploy タブからデプロイ中のものを確認できます。

function deployed となっていれば、ちゃんとコードが認識されています。

生成された 'ユニークなID' が仮のパスになります。別途、DNS を設定することもできます。

5. API を試してみる

先ほどデプロイされたものにある 'ユニークなID' を使います。また、ディレクトリ構成を変えていなければ、実行できるパスは以下のようになります。

curl -X GET 'https://YOUR_APP_ID.netlify.app/.netlify/functions/index'

実際に実行してみると

このように結果が返ってきました。
簡単でしたね！

Netlify の機能を試す

いくつかおまけ程度に載せておきます。

- 静的な WEB ページを表示する

① ルートに WEB ページを表示する

最低限 Hello, World!を表示する HTML を用意します。

.html

<!DOCTYPE html>
<html>
<body>
    Hello, World!
</body>
</html>

それをディレクトリのルートに設置します。

あとはデプロイすれば、そのままルートのパスで表示されます。

② サブディレクトリで WEB ページを表示する

設置したパスにアクセスすればそのまま表示されます。

同じように HTML を用意して

.html

<!DOCTYPE html>
<html>
<body>
    sub
</body>
</html>

任意のパスに設置します。

デプロイした後はそこにアクセスするだけです。

- ディレクトリ構成を変える

今回は Functions 向けにフォーカスします。上でも記載しましたが Functions では netlify > functions が関数のデフォルトのパスです。

（引用: 公式サイト）

ビルドの設定など、多くのデフォルト値は変更可能です。

ただし...

注意
こちら記事にしていますが、手元では設定を反映できなかったので注意してください（できた方はコメントください...）

以下、公式サイトのドキュメント通りに試してみたものを残しておきます。

方法① GUI 上で設定する

詳細を見る

手軽な方法は GUI 上での設定です。

ただし、次の方法で設定ファイルがある場合は、GUI の設定は上書きされます。

方法② `netlify.toml` から設定する

詳細を見る

設定ファイル（netlify.toml）を ルートディレクトリ直下 に設置します。

以下のようにパスを設定します。

.toml

[functions]
  directory = "netlify/zzz/vvv/"

公式のドキュメントを見ると多くの設定方法が記載あります。
-> https://docs.netlify.com/configure-builds/file-based-configuration/

- Functions に CORS 対応する

サーバーとして使う場合は netlify.toml に設定すれば良いのですが、Functions では別の設定が必要です。

裏側が AWS Lambda であることを利用して、SDK をそのまま使ってしまうのが早いです。以下は JavaScript（Node）の実装を行う場合です。

① `netlify.toml` の設定を追加

Node のパッケージを入れるために、デプロイ時にビルドするようコマンドを追加します。

.toml

[build]
  command = "npm run build"

② パッケージの設定

AWS の SDK を追加します。

.json

{
  "name": "netlify-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "echo \"No build step\""
  },
  "dependencies": {
    "aws-sdk": "^2.1045.0"
  }
}

これは例なので、必要に合わせて修正してください。

作成したパッケージをルートに設定してください。構成はこのような形です。

ちなみに、AWS にしましたが、Express など他のライブラリでも出来ると思います。

③ CORS 対応コードを JS に入れる

Hello World を返すだけの処理を作ります。

.js

const AWS = require('aws-sdk');

exports.handler = async (event) => {
  const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    body: JSON.stringify({ message: 'Hello World' }),
  };

  return response;
};

'Access-Control-Allow-Origin': '*' で無効にしています。

実際に WEB のコンソールから実行して見ると、結果が返ってきます。

無事に CORS を回避できました！

終わりに

クレカいらずで出来るのは嬉しいですね！

最近（2024年）に UI 含め大きくアップデートがあったようで、情報の古いものが多かったです。またドキュメントを参照しても動かないものもあったので、少しだけ手こずりましたが、他のサーバーレスに比べると、比較的手軽に操作できるのは嬉しいなポイントです。