https://gyazo.com/fa9be6b5e0d0614ccd99e79067ba3333
静的サイトホスティング以外の活用法
機能編
code:functions.js
exports.handler = functions(event, context, callback) {
callback(null, {
statusCode: 200,
body 'Hello, World'
})
}
code:netlify.toml
functions = "functions"
public
sample.json
毎回書くのは辛くない？
Build CommandでJSONを吐き出すコードを書けばいい
pubilsh = "pubic/"
command ="node fetch.js > public/posts.json"
レスポンスヘッダをいじりたい
_headersで設定可能
公開ディレクトリ直下に置いて指定できる
CORS用ヘッダ
yamanoku.icon gzip圧縮らへんはできるだろうか？
拡張子はどうするのか
たとえばpublich/post/1.htmlで.html除去した配信はできな
応用編
構成
https://gyazo.com/1790b87add3508bcd0a794f5cae2283b
Event Subscriptionsの設定
GitHub Repository Contents API ビルドされてJSON化
yamanoku.icon デモでは絵文字を付けたSlackのメッセージがJSON化してまとめられてた
こういう活用法ができるのではないか？
https://gyazo.com/0e70ec87ba71460b0c17f6c4d7a98ad8
yamanoku.icon SlackをCMSのようにして、絵文字がついたものがpublishされるみたいな審議のとり方ができそう
事例
https://gyazo.com/bffbec5aa56ed10b6c029689edb82aa9
esaの中でWebhookでNetlifyのBuild hookを叩く
技術書典配布
https://gyazo.com/8a962f228ef6f7ca7b0b7eec8d819586
yamanoku.icon 運営から一言きてた
yamanoku.icon 公開停止されたようです
Netlify identifyを利用したWeb Application構築 @joe_re
メリット
インフラエンジニアに色々と要求しなくても良い
セットアップが簡単
カスタムドメイン登録も簡単
Lambda Functionsというものがある
AWS Lambda Functionsと同様の動きができる
AWSアカウントが不要
Netlify Identify
ユーザーにメタデータを付与できる
公式ユーザーログイン認証ウェジェット
GoTureというユーザーマネジメントAPI用を使うときのやつ context.clientContextからユーザーロールを判定
env（環境変数）もnetlify.tomlで設定できる
lamdbdaにプルリクを出してる模様
返事なし
まとめ
静的サイトの配信だけではない。やれることは実は結構多い
全部フロントだけで完結できるNetlifyすごい
JAMstack知っているか
Netlifyの中の人がよく言っている
CEO and Co-founder of Netlify
JAMstackという新たな概念の生みの親
ENTIRE PROJECT ON A CDN
EVERYTHING LIVES IN GIT
MODERN BUILD TOOLS
AUTOMATED BUILDS
ATOMIC DEPLOYS
INSTANT CACHE INVALIDATION
これらは全部Netlifyのこと
NetlifyはJAMstackに最適なツールである
yamanoku.icon 自作自演かな？
JAM
API
その言葉の意味する定義を知りたい
2015年
STATIC WEB-TECH
「静的サイト」を作る技術
https://gyazo.com/08f94e98f7ae903a3f62668d3be412a9
2016年
JAMstackという概念が生まれる
サーバーサイドやインフラでいろいろやってもらうのはメンテや脆弱性で大変。
だったらAPIを叩いてビルドしたのをCDN乗せれて静的サイトに見せればいいのではないか
機能として動的なデータを扱うHyperDynamicなサイトを作る
これはStaticという概念では収まりきらない
ゆえにJAMstackというものが生まれる
まとめ
JAMstackとは
一言で言えば、事前ビルドで静的化したSPAをCDNで配信する技術
でも機能的にはstaticじゃない。
動的なデータを扱うHyperDynamicなサイトを作ってる
Staticって言うと手書きHTMLみたいな語弊があるので新しい言葉を作らなければならなかった
JAMって語感から決めたからそんなに意味無いっちゃ無い
最強のJAMstack
定義には無いが「APIレスポンスの静的化」もJAMstackには必要ではないか？
asyncDataにAPIと接続する処理を書いてしまうと、クライアントルーティングで遷移するときにAPI通信が発生してしまう
awaitが終わらないとページ遷移できないし、先読みもしないのでblazing fastから遠い
GatsbyJSみたいに予めデータソースをシステムとして考慮して扱うのがスマート JAMstackの理念にマッチする
https://gyazo.com/8baf83518e3c24c27b36af43c3713f67
日本はいつ？
関連