タダケンのEnjoy Tech

楽しみながらラクに成果を上げる仕組みを考える

Netlifyを使って簡易的なAPIサーバーを構築する

f:id:tadaken3:20181116174222p:plain こんにちは!
タダケン(@tadaken3)です。

Netlifyは静的なサイトを超高速で提供できるWebサービスです。GitHubと連携し、GitHubリポジトリにコードをPushするだけで、自動でビルド・デプロイがされ、サイトが公開されます。とっても便利です。

今回は、Netlifyを使って簡易的なAPIサーバーとして活用する方法をお伝えします。

NetlifyでJSONを配信する

Netlifyは公開ディレクトリにJSONファイルをおくことで、ファイルを公開できます。例えば、以下のファイルをpublicディレクトリに配置すると、JSONファイルを公開できます。

//sample1.json
{ message: ’ブログ更新した?' }

実際にnetlifyにホスティングしたファイルはこのように表示されます。

https://tadaken3-blog-sample.netlify.com/sample1.json

Bulidコマンドを設定して、JSONファイルを更新する

NetlifyではBulidコマンドを設定することができます。JSONファイルを生成するコードをBuildコマンドに設定しておくことで、JSONファイルを更新することもできます。

Bulidコマンドがnetilfy.tomlファイルで設定することができます。

# netlify.toml
[build]
  publish = "public/"
  command = "node updateStatue.js > public/status.json"

netlify.tomlファイルの設定が終わったら、実際にJSONを出力するコードを作成してみましょう。

//updateStastus.js

const = result = { "status": "ブログ更新した" }
console.log(JSON.stringify(result, null, 4)

build時にupdateStastus.jsが実行され、public配下にstatus.jsonが配置され、Netlifyで公開されます。

こんな感じです。

https://tadaken3-blog-sample.netlify.com/status.json

publicの配下に _headersファイルをおいて、カスタムヘッダーを設定することもできます。例えば、status.jsonにCROS用のヘッダーを付ける場合はこのように書きます。

/status.json
 Access-Control-Allow-Origin: *

こんな感じでヘッダーがついてますね。

f:id:tadaken3:20181116170930j:plain

webhookでアプリのビルド・デプロイをする

Netlifyは webhookを使って、アプリのビルド・デプロイをすることもできます。

www.netlify.com

例えば、Google Apps ScriptやAWS Lambdaの時間トリガーを使って、定期的にビルドをすることができます。参考にGoogle Apps Scriptを使ったコードのサンプルを記載しておきます。

function deploy() {
    var prop = PropertiesService.getScriptProperties();
    var postUrl = prop.getProperty('NETLIFY_URL');
    
    var payload = {
     "message" : null
    };
    var options = {
      "method" : "post",
      "payload" : payload
    };
    var res = UrlFetchApp.fetch(postUrl, options);
}

まとめ

外部サイトをスクレイピングして、その結果をJSONとして返すと行った使い方もでき、うまく活用すれば、適応範囲の広い活用方法だと思います。今回、使用したサンプルコードはこちらからご覧いただけます。

github.com

活用事例

これらの要素を使って、ボクは「ブログを週一で更新する会」とコミュニティで使っているサイトを構築しました。参加しているブログのfeedを取得して、更新状況によってカードの色を変更しています。

f:id:tadaken3:20181116172528p:plain

実際のサイトはこちらです。

we-love-blog.netlify.com

参考資料

Netlify Meetup Tokyo #2で登壇してきました - mottox2 blog