Netlify Meetup Tokyo #2で登壇してきました
9/26にABEJA社で開催されたNetlify Meetup Tokyo #2で「静的サイトだけじゃないNetlifyの活用法」という内容で登壇しました。
初の20分登壇でかなり緊張していたのですが、会場の温かい空気に励まされました。話しやすい勉強会大好きです。
背景
Netlifyはあまりにも簡単すぎて本来の「静的サイトをホスティングする」という役割に関して話すことが見つからず、ちょっと先の未来に役立つテクニックを紹介することにしました。
次のテクニックについて話してきました。
- Netlify Functions
- JSONの配信
- SlackやGitHubとの連携
- Build CommandでHack
発表資料
https://speakerdeck.com/mottox2/netlify-extra-mode
紹介した活用法
Functionsを使ってFaaS風に使う
このブログでも何回か取り扱っているNetlify Functionsです。
内部ではAWS Lambdaが動いているのですが、Netlifyを通して使えばAWSのアカウントいらずで使えます。
JSONファイルを配信する
静的サイトをホスティングしているので、当然と言えば当然なのですがJSONファイルを配信するためにも使えます。
JSONを別ドメインに配信するときに気になるAccess-Control-Allow-Origin
ヘッダーなどは_headers
ファイルを使うことでいじることが出来ます。
Node.jsで収集したデータを配信するAPI
ビルドコマンドを設定出来るので、その中で外部APIを叩いたり、WebsiteのHTMLを見てJSONを保存するコードを書けばAPIとして使えます
Slackのメッセージを配信するAPI
Slackでreactionの追加メッセージをJSONとして配信するAPIの事例を紹介しました。
内部でSlack Event APIとGitHub Rest APIを使うことで実現しています。次のような仕組みで実現できました。
- SlackでReactionがつくとSlack Event APIによってFunctionsに対してPOSTリクエストが飛ぶ
- Functionsの処理でメッセージを取得し、GitHubのcreateFile APIを叩く
- メッセージをファイルに保存する
- GitHubのcreateFile APIによって作成されたcommitをフックにNetlifyのビルドを開始
- ビルド中に保存されたメッセージをJSONにまとめて公開ディレクトリに保存
- NetlifyによりJSONが配信される
同様の事例として日経の米朝首脳会談の速報ページがありました。
日経の米朝首脳会談の速報ページ、気味の悪い拡張子のファイルによるとSlackが使われているっぽい。
— こに@SocialDog/whotwi (@koni) June 12, 2018
現地からSlackに投稿するとそのまま公開される仕組みっぽい。すごい今風。https://t.co/PFumeSAJMA pic.twitter.com/FDGX6oR8uq
esa.io + GatsbyJSなブログ
当ブログの事例を紹介しました。Gatsbyなので普通の静的サイトですが紹介しました(宣伝したかった…)
情報共有ツールesa.ioをCMSとして使って1ヶ月運用してみた
宣伝
サークルチェックはここからできます。 https://techbookfest.org/event/tbf05/circle/41140002