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


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

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

https://memomaru.life/how-to-deploy-api-with-netlify/

## はじめに

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

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

## Netlifyとは

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

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

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

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

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

https://www.netlify.com/pricing/

## 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が表示されるので、クリックします。

![Functions | markdown-linter-api 2022-01-29 17-02-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882682/ad928bb6-aca6-0e77-f044-7e930564881a.png)

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

![Function index | markdown-linter-api 2022-01-29 17-04-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882682/81c47670-9ed2-a325-db3b-e8eaee79117a.png)

## まとめ

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

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

## 参考

https://qiita.com/Sr_Bangs/items/7867853f5e71bd4ada56