【簡単&無料】Netlify functionsでAPIを公開してみた

はじめに

最近、ちょっとした個人開発でAPIを開発していますが、無料でデプロイする方法がないかを探していました。

そこで、Netlify functionsをみつけたので、これを使って簡単なAPIを公開してみようと思います。

静的サイトをホスティングすることができるWebサービスです。

Github/Gitlab/Bitbucketにプッシュ後、本サービスにホスティングできます。

プランとしては無料と有料があり、無料プランの場合、　1カ月あたり100GBの帯域、300分のビルド時間などが利用可能です。

個人開発する分には十分かなと思います。

詳細はプランの内容は以下をどうぞです。

AWSのLambdaのような機能です。

Github/Gitlab/Bitbucketのブランチと連携すると、エンドポイントが自動で発行され、それにアクセスすることでプログラムを実行できます。

今回はAPIを無料でデプロイしたかったため、この機能の活用することにしました。

Netlify functionsを使用するために、特殊な設定が必要になります。

順番に解説します。

netlify.tomlという名前で以下のファイルを作成します。

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

コマンドの意味はそれぞれ以下になります。

このコマンドだけだとよく分からないと思いますが、ざっくりいうと、Netlifyデプロイ時にnpm run buildを実行し、dist/api配下にファイルを格納するという意味です。

まず、ルートディレクトリで以下を実行します。

npm init -y

その後、netlify-lambdaをインストールします。

npm -i netlify-lambda

そして、package.jsonにスクリプトを追加します。

"scripts": {
  "dev": "netlify-lambda serve resources/api",
  "build": "netlify-lambda build resources/api"
}

resources/apiは、ソースコードを確認するフォルダになります。

先ほど作成したresources/api配下にindex.jsというファイルを作成し、以下を記載します。

exports.handler = async () => {
  return {
    statusCode: 200,
    body: 'Hello World',
  };
};

その後、npm run devを実行し、ローカル環境で動作確認をしましょう。

すると、以下のようにポート番号9000でAPIが起動します。

Lambda server is listening on 9000

その後、localhost:9000/.netlify/functions/indexにアクセスしてHello Worldが表示されればOKです。

ここで注意ですが、resources/api配下に作成したファイル名がエンドポイント名になります。

また、エンドポイントのURLが少し特殊なので注意が必要です。

ローカル環境での動作確認ができたので、次はNetlify functionsでデプロイしてみます。

具体的な手順は以下になります。

それぞれ順番に解説します。

自分のGithub/Gitlab/BitbusketのリポジトリとNetlifyを連携する設定を行いましょう。

箇条書きですが、手順は以下になります。

NetlifyでAdd new site -> Import an existing projectを選択する
Github/Gitlab/Bitbusketのいずれかを選択する
初めて起動した場合、認証する
(Githubの場合)認証後、連携したいリポジトリを選択する。リポジトリが表示されない場合はページ下段のCan’t see your repo here? Configure the Netlify app on GitHub.をクリックする
Githubページに飛ぶ。Repository access内で連携したいリポジトリを選択する。