阿部寛のホームページをSRE観点で改善出来るか考えてみた。

6月20日
OSAKA ENGINEER NIGHT Vol.6 ~やっぱLTやねん~にて

Transcript

1. 阿部寛のホームページを SRE観点で改善できるか考えてみた。 
 @ShuShuShuBOOOx 

2. 自己紹介 $ whoami：Shuma $ id： uid=1337(shuma) gid=42(engineers) groups=42(engineers),1001(sysadmins),1002(devs) $ history | grep "career"：# 飲食店店長 → スポーツバー → インフラエンジニア (IT二社目) $ cat ~/.bash_aliases | grep "favorite"　alias favorite_tasks="echo '障害対応、監視周り、原因調査 '" $ cat ~/.tech_stack.json | jq . { "cloud": ["AWS", "Google Cloud"], "languages": ["PHP (Laravel)", "Python"], "current_study": "IaC (Terraform)" }
3. 阿部寛のホームページとは？ どんなサイト？ • 概要: 俳優・阿部寛の公式サイト（ abehiroshi.la.coocan.jp） • 歴史: 1996〜1998年頃、ファンによるファンサイトがスタート。後に事務所公認の公式サイトに • デザイン : 1990年代のインターネット黎明期風。シンプルな HTML、画像少なめ、SHIFT_JIS なぜ話題？ • 爆速表示 : PageSpeed Insightsで0.6秒（その当時） • 通信障害のベンチマーク : 容量が小さく、制限下でも表示可能。 Xで「#阿部寛 サイト落ち」がトレンドに • ミーム化 : 「RTA（リアルタイムアタック）」やレトロデザインの象徴としてネットで愛される 社会的インパクト • 通信状況の確認ツールとして「社会インフラ」の役割 • 阿部寛本人も「シンプルで気に入ってる」とコメント URL:http://abehiroshi.la.coocan.jp/
4. 今日の用語解説① SRE（Site Reliability Engineering） 定義: サイトを「止めない」「遅くしない」「安全に」動かす技術 例: ウェブサイトがサクサク動く、 Google検索が0.3秒で表示 この後で: どうやって阿部寛のサイトを安定させるか話すよ！ 監視システム 定義: サイトの状態を24時間自動でチェック チェック項目: • サイトがちゃんと表示されるか • 読み込み速度 • エラーの発生状況 例: スマートホームが異常を即通知 この後で: 阿部寛のサイトの「見守り方」を紹介！
5. 今日の用語解説② 冗長化（予備システム） 定義: メインが壊れても予備でサービス継続 例: 自転車のスペアタイヤ、停電時の発電機 この後で : サーバー1台のリスクをどう解消するか解説！ CDN（Content Delivery Network） 定義: 世界中のサーバーから最短距離で高速配信 メリット : 速い！安定！障害に強い！ 例: コンビニの最寄り店舗から商品ゲット この後で : 阿部寛のサイトを世界中に届ける方法！ ポイント : これらの技術は全部、ユーザーが「気持ちよくサイトを使う」ためのもの！
6. 阿部寛の現状と改善目標 コンセプト: 「見た目は昔、中身は最新」 世界最速の表示速度をキープしつつ、障害ゼロを目指す！
8. 問題点とリスク クリティカルな課題 技術面（高優先） : • 最大リスク : サーバー1台（単一障害点） • 故障で全停止 • SSL証明書の手動更新 運用面（高優先） : • 24時間監視なし • 障害検知: 平均2時間 • 復旧手順未整備
9. SREとしての改善策提案 24時間自動監視 ツール: Prometheus + Alertmanager 設定例: http_request_duration_secondsで応答時間監視 監視項目: • 応答時間（目標: 0.6秒） • HTTPエラー率（0.1%以下） • CPU/メモリ使用率 • アクセス急増
10. SREとしての改善策提案② CDNによる冗長化 ツール: Cloudflare（Free Plan） 設定例: Page Rulesでキャッシュ最適化 メリット: • 150拠点で高速配信 • DDoS自動防御 • サーバー負荷軽減 効果: 単一障害点解消、99.99%稼働率
11. SREとしての改善策提案③ 自動フェイルオーバー ツール: AWS Route 53 Health Check 仕組み: • ヘルスチェック: 30秒ごとにトップページ（/）をHTTP確認。3回失敗で異常判定 • DNS切替: メイン（例: 192.0.2.1）から予備（192.0.2.2）に60秒以内で自動ルーティング • 準備: 予備サーバー（EC2 t3.nano）はS3でコンテンツ同期済み • 例: レストランのキッチンがダメでも、予備キッチンが 30秒で稼働！
12. SREとしての改善策提案④ ツール：AWSWAF・ACM（証明書取得） 対策: • DDoS遮断 • 不正アクセスブロック • 月1回脆弱性スキャン
13. 優先順位: 監視 → 冗長化 → セキュリティ
14. まとめ 阿部寛のサイトの現状 • 強み: シンプルで爆速（0.6秒）、レトロデザインが愛される • 課題: サーバー1台（単一障害点）、監視なし、2024年1月に一次アクセス障害 改善策 • 監視: Prometheusで24時間チェック、障害を1分で検知 • 冗長化: Cloudflare CDNとAWS Route 53で予備サーバーに30秒で切替 • セキュリティ : AWS WAFでDDoSや不正アクセスをブロック
15. なぜ重要？ なぜ重要？ • ユーザー視点 : 快適なアクセス、ブランド価値の維持 • 社会視点: 通信インフラとしての役割を継続 • エンジニア視点 : シンプルな改善で大きな効果 シンプルなシステムほど安全でユーザーに対してのブランド価値を継続的に提供できる よね。
16. 宣伝
17. PHP カンファレンス関西 2025 日時：2025.7.18(金)/7.19(土) 場所：神戸駅前研修センター テーマ：「PHPでやってみよう！」 参加者がカンファレンスで知った技術を実際に使ってみたり、新しいコミュニティ に参加したりするきっかけになることを目標としています。
18. ご清聴ありがとうございました。 ※スライドの中に阿部寛は何回登場しました？