リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした
1.4K Views
August 30, 24
スライド概要
リバースプロキシを自力で運用するのは難しい
既存のアーキテクチャを把握しながら、リバースプロキシを剥がしていく過程を解説
トラブル対応やSEOなどへの影響を事前に検討した
関連スライド
各ページのテキスト
リバースプロキシをやめて 運⽤しやすいLP配信アーキテクチャにした 1
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ⾃⼰紹介 秦 友幸（はた ともゆき） ● Helpfeelエンジニア ○ Cloudflare、EV SSL証明書、SAML認証、 脆弱性対応、アクセシビリティ対応など ○ ● いろんなことやってます（遊撃?） - @hata6502 ○ BlueHoodというお絵かきアプリを運営 していました 2
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● Cloudflare Worker⼊れたらサーバー負荷が9割減った ● 問い合わせフォーム周りのアクセシビリティ改善 ● エンタープライズな顧客向けにサーバー証明書を更新した ● 間違えてローマ字を⼊⼒しても検索できるようにした ● ランディングページ配信⽤のリバースプロキシをやめた 3
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● Cloudflare Worker⼊れたらサーバー負荷が9割減った 4
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● Cloudflare Worker⼊れたらサーバー負荷が9割減った 5
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 逆にリバースプロキシを導⼊したこともある ● Cloudflareキャッシュ ● Cloudflare WAF ほぼ何事もなく導⼊できた ● そのぶん事前に⼿厚く動作確認した ● ちなみにこれも2024年にやった https://helpfeel.com/help/ のresponse headerを⾒てね 6
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● 問い合わせフォーム周りのアクセシビリティ改善 ● バリデーションエラーの表⽰タイミングなどを少しだけ 7
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● エンタープライズな顧客向けにサーバー証明書を更新した ● EV SSL証明書1枚で数万円するから緊張する 8
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● 間違えてローマ字を⼊⼒しても検索できるようにした 9
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● ランディングページ配信⽤のリバースプロキシをやめた 10
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった たくさん話題があるなかから1つ選んで、 ● Cloudflare Worker⼊れたらサーバー負荷が9割減った ● 問い合わせフォーム周りのアクセシビリティ改善 ● エンタープライズな顧客向けにサーバー証明書を更新した ● 間違えてローマ字を⼊⼒しても検索できるようにした ● ランディングページ配信⽤のリバースプロキシをやめた⭐ の話をします 11
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まとめ（先出し） ● ⾃前のリバースプロキシで辻褄合わせするのは難しい ● 既存のアーキテクチャを把握できないと、移⾏しようがない ● ビックリさせないようにインフラ移⾏してる 12
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Landing Page Helpfeelの紹介をする⼤事なページ ● https://www.helpfeel.com/ 13
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 Heroku HubSpot 14
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 ● https://www.helpfeel.com/ にアクセスするブラウザ ● ブラウザに限らずbotもいる Heroku HubSpot 15
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 ● 全HTTPリクエストを受けるアプリサーバー ● 普段コード書いてデプロイ先はHeroku Heroku HubSpot 16
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 ● LP制作環境と配信を兼ねたHubSpot ● CloudflareキャッシュやWAF(bot検知)も⼊っているらしい Heroku HubSpot 17
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HTTP通信の流れ ● helpfeel.comへのアクセスはHerokuが受けるしかない ● DNS CNAMEの向き先がHerokuだから helpfeel.com Heroku HubSpot 18
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HTTP通信の流れ ● Herokuが代理でHubSpotにアクセスし、 ● HubSpotからのHTTPレスポンスをブラウザに受け流す リバースプロキシ Heroku HubSpot 19
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HTTP通信の流れ ● 抽象的な図で⾒るとスッキリしているが…… Heroku HubSpot 20
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシの⾃前実装は⼤変 ● リバースプロキシ⾃前実装だったから ○ リバースプロキシをうまく使えば、 HTTP通信上でなんでもできる ○ HTTPリクエストとレスポンスを代理するサーバーだから 21
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシの⾃前実装は⼤変 ● プロキシ（代理）の役割はなんでも屋 ● HTTP通信のあらゆるパターンを辻褄合わせすることになる Heroku HubSpot 22
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした rewriteで辻褄合わせ ● HerokuのURLは https://helpfeel.com ● HubSpotのURLは https://hubspot.helpfeel.com ● HerokuがHTTPレスポンスを⽂字列置換して、URLを合わせる Heroku HubSpot rewrite <a href=”https://helpfeel... <a href=”https://hubspot... 23
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした さらに辻褄合わせ ● リバースプロキシを挟むとgzip圧縮が解けてしまわないか? ● HubSpotのレスポンスがstreamingだったら? ○ リバースプロキシがbuffer溜め込んじゃう? ● HubSpotがリダイレクトをレスポンスしてきたら? ○ Locationヘッダーもrewriteしなくては 全てを事前に想定したリバースプロキシは作りにくい 不具合が起きたら都度対応していく、のが現実的な運⽤ 24
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシがbanされた ● HubSpotがHerokuをbanしてしまった ● Herokuが全アクセスを代理してしまうため ● HubSpotにはCloudflare Bot Managementが⼊ってるらしい Heroku HubSpot 25
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシがbanされた ● ⼀部のbotのせいで、全員が巻き込まれてLPを⾒れなくなる Heroku HubSpot 26
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシがbanされた ● ⼀部のbotのせいで、全員が巻き込まれてLPを⾒れなくなる https://helpfeel.com/ の表⽰が↓になってビックリ Heroku HubSpot 27
もう辻褄合わせきれない 28
リバースプロキシを剥がそう 29
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まずはリバースプロキシの予習から ● 既存のアーキテクチャを把握しないと、移⾏しようがないため 30
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まずはリバースプロキシの予習から 図を書きながら頭を整理する…… 31
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まずはリバースプロキシの予習から 複雑な図を書いたということは、設計を⾒直すべき時期だなあ🤔 32
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HubSpotに直結させる Heroku HubSpot 33
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HubSpotに直結させる Heroku HubSpot HubSpot 34
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HubSpotに直結させる ● 抽象的な図で⾒るとスッキリしているが…… Heroku HubSpot HubSpot 35
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ランディングページのURLを変えた ● Before ● After wwwが付くようになっただけ 36
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 作業⼿順に落とし込む 1. www.helpfeel.comのCNAME向き先をHubspotに設定する 2. Hubspotのプライマリードメインをhelpfeel.comから www.helpfeel.comに変更する プライマリードメインはcanonical URLのようなもの? 3. helpfeel.comからwww.helpfeel.comにリダイレクトする プルリクエストをマージして15分後ぐらいに反映される 37
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 作業⼿順に落とし込むと怪しい箇所が⾒つかる 1. www.helpfeel.comのCNAME向き先をHubspotに設定する 2. Hubspotのプライマリードメインをhelpfeel.comから www.helpfeel.comに変更する プライマリードメインはどのような影響範囲? ↕15分のダウンタイムが起きそう 3. helpfeel.comからwww.helpfeel.comにリダイレクトする プルリクエストをマージして15分待つ必要がある 38
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 「量」も「性質」もリスクを検討する ● ⾃社LPの15分ダウンタイムなら許容できる ○ がHubspotの仕様を完全に理解するコストよりも、 ○ ダウンタイムを許容してやり切る ただし……このような判断はイレギュラーなので注意 ● もちろん顧客のFAQサイトに関わる場合は、ダウンタイム0で ● 夜間19~20時の⼈が少ない時間帯を狙う ● Slackで社内周知しておく 39
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Slackで社内周知しておく 40
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 CloudflareでDNS切り替えて 41
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 HubSpotのドメイン設定変えて 42
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 HubSpotのドメイン設定変えて 43
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 リダイレクトするコードをHerokuにデプロイ 44
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした インフラ移⾏完了 ● ダウンタイムは…… 45
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした インフラ移⾏完了 ● ダウンタイムは……正直なところあった 46
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ビックリさせないようにインフラ移⾏してる ● 作業⼿順に落とし込んで、怪しい箇所を事前に⾒つけておく https://helpfeel.com/ の表⽰が↓になったらビックリですよね 47
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 今動いてるものをmutateするの難しい ● ダウンタイムを気にしたり ● 既存のアーキテクチャから移⾏するためには、 ● 既存の仕組みを把握しないといけない 48
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ● 技術的な問題を解いて実⾏したのは 49
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした もっと根本的な⽬的確認 マーケティング部の⽅が確認してくれた ● リバースプロキシを取り除けばできることが増える ○ HubSpotのA/Bテスト機能 ○ SEOコンサルからのサポート ● SEOに悪い影響は起きない ○ 実は4年前！からリバースプロキシ脱出を検討していた が、SEOの懸念が晴れていなかった ○ むしろSEO対策できることが増え、リード獲得につながる 50
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まとめ ● ⾃前のリバースプロキシで辻褄合わせするのは難しい ● 既存のアーキテクチャを把握できないと、移⾏しようがない ● ビックリさせないようにインフラ移⾏してる 51
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 発表資料作ってて思ったこと 図に注意 ● 抽象的な図で⾒ると、なんでもスッキリ⾒える ● 複雑な図を書いたら、設計を⾒直すべき時期かも 抽象、理想、シンプルな図 52
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 発表資料作ってて思ったこと 図に注意 具体、実態、複雑な図 53
リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 発表資料作ってて思ったこと 図に注意 作業⼿順レベルで事前に考えると、⾃信を持って当⽇作業できる 54