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

以下のブログでも同じ内容を記載しています。

ブログの方が多少分かりやすいと思うので、気になる方はどうぞです。

はじめに

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

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

Netlifyとは

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

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

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

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

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

Netlify functionsとは

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

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

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

Netlify functionsによるAPIの作成方法

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

順番に解説します。

Netlifyの設定ファイルの作成

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

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

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

command : Netllifyデプロイ時に実行されるコマンド
functions : Netlify Functionsのエンドポイント対象ファイルを格納するディレクトリ

このコマンドだけだとよく分からないと思いますが、ざっくりいうと、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は、ソースコードを確認するフォルダになります。

Hello Worldを返す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が少し特殊なので注意が必要です。

例：index.js = /.netlify/functions/index

作成したAPIをNetlify functionsでデプロイしてみる

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

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

Github/Gitlab/BitbusketとNetlifyを連携する
Github/Gitlab/Bitbusketのリポジトリにソースコードをプッシュする
Netlify Functionsで動作確認する

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

Github/Gitlab/BitbusketとNetlifyを連携する

自分の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内で連携したいリポジトリを選択する。

Github/Gitlab/Bitbusketのリポジトリにソースコードをプッシュする

先ほど作成したソースコードをプッシュします。

ここはgitの操作の話なので割愛します。

Netlify Functionsで動作確認する

先ほどAdd new sitesで作成したサイトを選択します。

その後、上部にあるFunctionsを選択します。

添付のように、先ほど作成したAPIが表示されるので、クリックします。

すると、エンドポイントが発行されているので、これを実行すればローカル環境で試したようにHello Worldと表示されます。

まとめ

今回は簡単かつ無料でAPIを公開する方法として、Netlify functionsを紹介しました。

私と同じように個人開発でAPIを公開したい人は是非活用してみてください。

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