前回、増田ランダムってなぁに？を書きましたので、今回は裏側のことを書きたいと思います！
まえおき
その前に導入として、ぼくがサービス開発をするうえで大切にしている考えを3つ挙げてみます。
1. 自分が使いたいサービスであること（最重要！！！）
2. サービス開発をつうじて多くの学びを得られること
3. できるだけお金をかけずにサービス提供を続けられること（大事…）
1. については前回の記事で増田ランダムを作った経緯や理由を書きました。
今回はそれを踏まえたうえで 2. と 3. に焦点をあて、増田ランダムが
- どう動いているのか？
- なぜその技術スタックを選んだのか？
- 運用のために実際どんくらいお金がかかっているのか？
を赤裸々に書いていきます！
ので、今回はちょっぴり技術的な内容になっています。
アーキテクチャ
まずざっくりと、全体像はこーんな感じになっています。
それっぽくまとめると FaaS とコンテナを活用した低コストなサーバレスアーキテクチャです！
（ウソはついていない・・・はず・・・！）
左上部のスマホとPCがみなさん（ユーザ）です。
バックエンドには Google の提供する Firebase という mBaaS (mobile Backend as a Service) をフル活用しています。
だいたい一日あたり 5,000 記事閲覧程度のアクセスがありますが、無料枠の範囲で収まっています。Google 様にひれ伏すしかない。
フロントは Firebase Hosting で静的ホスティングし、コンテンツ部分は iframe タグを使用して増田からまるっとぶっこ抜いてきています。
次の記事を取得するタイミングで設定情報を含んだリクエストを Cloud Functions という Firebase 上の FaaS (Function as a Service) に送り、返ってきたURLを iframe に表示し直すだけの簡単なお仕事をしています。
また増田からの最新投稿の取得と記事DBへの登録を自動化しており、そちらは AWS の ECS + ECR というコンテナ技術の組合せで実現しています。
詳細は以下の記事がとてもわかりやすくまとまっていましたので、ご参照ください。
ECS のスケジュールタスクで毎朝最新投稿を取得し、Firebase 上の記事DBにアップロードしています。ECS は Fargate の最小スペックでだいたい毎日10分程度の稼働なので、AWS側もほぼ無料枠でおさまっています（月額 $1 以下！）
その他の詳細な実装についてはお聞きいただければなんでもお答えしますので、ぜひお気軽にコメントくださいまし！
TwitterのリプライとかDMなんかでもいつでもウェルカム！です！！！
技術選定の基準
ちなみに Firebase Hosting は S3 の静的ファイルホスティングに、Cloud Functions は Lambda にそれぞれ置き換え可能ですが、今回あえて Firebase を使用してみました。
フルスクラッチで個人開発をするメリットのひとつに、自分が試したい技術に好き勝手に手を出すことができる！というものがあります。
今回の場合、
・作り慣れたサービス部分は Firebase という初めて触れる技術で、
・あまり慣れていないコンテナ周りは使い慣れた AWS のマネージドサービスで、
・できるだけ安く運用できるように…
という基準で技術選定をしました。
実際に Firebase の手軽さ・便利さや、ECR & ECS の基本のキ を学ぶことができました。
しかもほぼゼロ円で運用できています！すばらしい！ 🎉
ところで
前回記事からの再掲になりますが、最近こんな不具合が発生していたのでした。
まさしく書いてあるとおりです（ご報告くだすった方にこの場を借りて感謝！）
iOS 13 であれば Safari でも Chrome でも発生する、かつ iOS 12 の端末では発生しないということで、これはOSアップデートによるものだろうと判断。
ツイートのなかでは 今週末には調査・修正予定なので、しばしお待ちを…。 などとのたもうておりましたが、実はこの段階で不具合について大筋のアタリはついていたのでした。
The behavior is by design 〜それは仕様です〜
と、いうのも実はこれ、開発途上でとても悩まされた問題だったのです。
iframe 内に埋め込まれたサイトをスクロールしようとすると、PC や Android からであれば正常に動作するのに、 iOS 端末では動作しない。
そのため iOS の場合のみ特別扱いをしていたのでした（具体的には iframe に scrolling = "no" を設定して対処していた）
該当コードのイメージはこーんなです。
if (navigator.userAgent.match(/(iPhone|iPad|iPod)/i)) { document.getElementById("webview").scrolling = "no"; }
下記の Stack Overflow の投稿や、
こちらのサイトでも同様の問題に遭遇されているようです。
つまり真相は、iOS 12 以前に存在していたOSのバグがアップデートにより解消され、特別扱いをする必要がなくなったということなのです 🎉
増田ランダムでは既に問題は修正済みです。修正自体はものの数分、上述した「特別扱い」を削除するだけでOKでした 👌
まとめ
増田ランダムのバックエンドは Firebase にまるっとおまかせ、記事の更新は ECS + ECR で自動化、という完全手離れアーキテクチャなので、もうメンテは不要と思っていました。
しかし今回、外部環境の変化によって なにもしてないのに壊れた というパターンもあるんだなぁと、認識を改める良いきっかけになりました。
また不具合があったときに 「なんだこれ、使えねーじゃん」 でポイされるのでなく、「こういう環境で試したけど、使えんかったよ」 という報告がくることのありがたみを痛感！
今後は自分もなんらかのサービスを使っていてちょっとした不具合に気づいたときに、運営元に連絡することを心がけようと思いました。マジでありがたかったので！！！
と、いうわけで iOS をアップデートされた方もそうでない方も、iOS をお使いの方もそうでない方も、弊サービスがちゃんと動くかかどうか、ぜひぜひご確認お願いいたします〜 😊
