阿部寛のホームページOGP
作ったもの
作ろうと思ったきっかけ
最近の外部ページへのリンクはOGPが当たり前になってきていて
OGPがないURLのみの文字列は危険な感じがしていると思ったからです
まだ古いサイトなどはOGP対応していないところが多い感じです
ただ、OGP対応も面倒でOGPの画像を用意してmetaタグに設定しないといけかったり結構な重労働です
その問題を払拭すべく、このサービスを作りました
技術スタック
フロントエンド
Vue.jsバックエンド
Firebase
RealtimeDatabase
python
CloudFlare Worker
WebNium
処理フロー
１．CloudFlare Worker
（最初にアクセスされる場所）
２．WebNium
（パラメータにurlがある、かつOGP画像作成済みではない場合、サイトのキャプチャを取得しStorageに保存）
３．CloudFlare Worker
（作成したOGP画像のURLをSSRしたものを返す）
なんでCloudFlare Worker使ってるの？
処理フローに一応書いてありますが
SSRするためです
FirebaseHostingは静的ファイルしかホスティング出来ず
SPAだとmetaタグを書き換えたとしてもjavascript読み込んでくれない系のサービスだと
metaタグが書き換わらず、OGP情報が設定できないためです
なんでCloud Functions使わないの？
クレカ登録とかが嫌な感じだからです
従量課金制でいつの間にかクラウド破産とかしたくないからです
以上。