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

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

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

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

NetlifyでJSONを配信する
Bulidコマンドを設定して、JSONファイルを更新する
webhookでアプリのビルド・デプロイをする
まとめ
活用事例
参考資料

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を出力するコードを作成してみましょう。

//updateStatus.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);
}