リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした

626 Views

August 30, 24

スライド概要

リバースプロキシを自力で運用するのは難しい
既存のアーキテクチャを把握しながら、リバースプロキシを剥がしていく過程を解説
トラブル対応やSEOなどへの影響を事前に検討した

profile-image
スライド一覧

#bluehood というお絵かきアプリを運営していました。 ズッシリギュウギュウなものが大好き。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 2.21MB)

関連スライド

slide-thumbnail

Playwrightでデザインや検索アルゴリズムのテスト Kyoto Tech Talk #4
user-img ムギュウ 457
slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.2M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1M
slide-thumbnail

最新の6.0で学ぶ！初めてのひとのためのSpring Security
java spring security
user-img tada 0.9M
slide-thumbnail

SQL滅ぶべし
user-img 株式会社ホクソエム 833.9K
slide-thumbnail

SPAセキュリティ超入門
security php javascript
user-img 徳丸 浩 761.7K
各ページのテキスト
1.

リバースプロキシをやめて 運⽤しやすいLP配信アーキテクチャにした 1

2.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ⾃⼰紹介 秦 友幸（はた ともゆき） ● Helpfeelエンジニア ○ Cloudflare、EV SSL証明書、SAML認証、 脆弱性対応、アクセシビリティ対応など ○ ● いろんなことやってます（遊撃?） - @hata6502 ○ BlueHoodというお絵かきアプリを運営 していました 2

3.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● Cloudflare Worker⼊れたらサーバー負荷が9割減った ● 問い合わせフォーム周りのアクセシビリティ改善 ● エンタープライズな顧客向けにサーバー証明書を更新した ● 間違えてローマ字を⼊⼒しても検索できるようにした ● ランディングページ配信⽤のリバースプロキシをやめた 3

4.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● Cloudflare Worker⼊れたらサーバー負荷が9割減った 4

5.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● Cloudflare Worker⼊れたらサーバー負荷が9割減った 5

6.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 逆にリバースプロキシを導⼊したこともある ● Cloudflareキャッシュ ● Cloudflare WAF ほぼ何事もなく導⼊できた ● そのぶん事前に⼿厚く動作確認した ● ちなみにこれも2024年にやった https://helpfeel.com/help/ のresponse headerを⾒てね 6

7.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● 問い合わせフォーム周りのアクセシビリティ改善 ● バリデーションエラーの表⽰タイミングなどを少しだけ 7

8.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● エンタープライズな顧客向けにサーバー証明書を更新した ● EV SSL証明書1枚で数万円するから緊張する 8

9.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● 間違えてローマ字を⼊⼒しても検索できるようにした 9

10.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった ● ランディングページ配信⽤のリバースプロキシをやめた 10

11.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 2024年にやった たくさん話題があるなかから1つ選んで、 ● Cloudflare Worker⼊れたらサーバー負荷が9割減った ● 問い合わせフォーム周りのアクセシビリティ改善 ● エンタープライズな顧客向けにサーバー証明書を更新した ● 間違えてローマ字を⼊⼒しても検索できるようにした ● ランディングページ配信⽤のリバースプロキシをやめた⭐ の話をします 11

12.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まとめ（先出し） ● ⾃前のリバースプロキシで辻褄合わせするのは難しい ● 既存のアーキテクチャを把握できないと、移⾏しようがない ● ビックリさせないようにインフラ移⾏してる 12

13.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Landing Page Helpfeelの紹介をする⼤事なページ ● https://www.helpfeel.com/ 13

14.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 Heroku HubSpot 14

15.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 ● https://www.helpfeel.com/ にアクセスするブラウザ ● ブラウザに限らずbotもいる Heroku HubSpot 15

16.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 ● 全HTTPリクエストを受けるアプリサーバー ● 普段コード書いてデプロイ先はHeroku Heroku HubSpot 16

17.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Helpfeelのリバースプロキシ構成 ● LP制作環境と配信を兼ねたHubSpot ● CloudflareキャッシュやWAF(bot検知)も⼊っているらしい Heroku HubSpot 17

18.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HTTP通信の流れ ● helpfeel.comへのアクセスはHerokuが受けるしかない ● DNS CNAMEの向き先がHerokuだから helpfeel.com Heroku HubSpot 18

19.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HTTP通信の流れ ● Herokuが代理でHubSpotにアクセスし、 ● HubSpotからのHTTPレスポンスをブラウザに受け流す リバースプロキシ Heroku HubSpot 19

20.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HTTP通信の流れ ● 抽象的な図で⾒るとスッキリしているが…… Heroku HubSpot 20

21.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシの⾃前実装は⼤変 ● リバースプロキシ⾃前実装だったから ○ リバースプロキシをうまく使えば、 HTTP通信上でなんでもできる ○ HTTPリクエストとレスポンスを代理するサーバーだから 21

22.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシの⾃前実装は⼤変 ● プロキシ（代理）の役割はなんでも屋 ● HTTP通信のあらゆるパターンを辻褄合わせすることになる Heroku HubSpot 22

23.

リバースプロキシをやめて運⽤しやすい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

24.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした さらに辻褄合わせ ● リバースプロキシを挟むとgzip圧縮が解けてしまわないか? ● HubSpotのレスポンスがstreamingだったら? ○ リバースプロキシがbuffer溜め込んじゃう? ● HubSpotがリダイレクトをレスポンスしてきたら? ○ Locationヘッダーもrewriteしなくては 全てを事前に想定したリバースプロキシは作りにくい 不具合が起きたら都度対応していく、のが現実的な運⽤ 24

25.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシがbanされた ● HubSpotがHerokuをbanしてしまった ● Herokuが全アクセスを代理してしまうため ● HubSpotにはCloudflare Bot Managementが⼊ってるらしい Heroku HubSpot 25

26.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシがbanされた ● ⼀部のbotのせいで、全員が巻き込まれてLPを⾒れなくなる Heroku HubSpot 26

27.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした リバースプロキシがbanされた ● ⼀部のbotのせいで、全員が巻き込まれてLPを⾒れなくなる https://helpfeel.com/ の表⽰が↓になってビックリ Heroku HubSpot 27

28.

もう辻褄合わせきれない 28

29.

リバースプロキシを剥がそう 29

30.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まずはリバースプロキシの予習から ● 既存のアーキテクチャを把握しないと、移⾏しようがないため 30

31.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まずはリバースプロキシの予習から 図を書きながら頭を整理する…… 31

32.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まずはリバースプロキシの予習から 複雑な図を書いたということは、設計を⾒直すべき時期だなあ🤔 32

33.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HubSpotに直結させる Heroku HubSpot 33

34.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HubSpotに直結させる Heroku HubSpot HubSpot 34

35.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした HubSpotに直結させる ● 抽象的な図で⾒るとスッキリしているが…… Heroku HubSpot HubSpot 35

36.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ランディングページのURLを変えた ● Before ● After wwwが付くようになっただけ 36

37.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 作業⼿順に落とし込む 1. www.helpfeel.comのCNAME向き先をHubspotに設定する 2. Hubspotのプライマリードメインをhelpfeel.comから www.helpfeel.comに変更する プライマリードメインはcanonical URLのようなもの? 3. helpfeel.comからwww.helpfeel.comにリダイレクトする プルリクエストをマージして15分後ぐらいに反映される 37

38.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 作業⼿順に落とし込むと怪しい箇所が⾒つかる 1. www.helpfeel.comのCNAME向き先をHubspotに設定する 2. Hubspotのプライマリードメインをhelpfeel.comから www.helpfeel.comに変更する プライマリードメインはどのような影響範囲? ↕15分のダウンタイムが起きそう 3. helpfeel.comからwww.helpfeel.comにリダイレクトする プルリクエストをマージして15分待つ必要がある 38

39.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 「量」も「性質」もリスクを検討する ● ⾃社LPの15分ダウンタイムなら許容できる ○ がHubspotの仕様を完全に理解するコストよりも、 ○ ダウンタイムを許容してやり切る ただし……このような判断はイレギュラーなので注意 ● もちろん顧客のFAQサイトに関わる場合は、ダウンタイム0で ● 夜間19~20時の⼈が少ない時間帯を狙う ● Slackで社内周知しておく 39

40.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした Slackで社内周知しておく 40

41.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 CloudflareでDNS切り替えて 41

42.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 HubSpotのドメイン設定変えて 42

43.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 HubSpotのドメイン設定変えて 43

44.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 当⽇作業 リダイレクトするコードをHerokuにデプロイ 44

45.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした インフラ移⾏完了 ● ダウンタイムは…… 45

46.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした インフラ移⾏完了 ● ダウンタイムは……正直なところあった 46

47.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ビックリさせないようにインフラ移⾏してる ● 作業⼿順に落とし込んで、怪しい箇所を事前に⾒つけておく https://helpfeel.com/ の表⽰が↓になったらビックリですよね 47

48.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 今動いてるものをmutateするの難しい ● ダウンタイムを気にしたり ● 既存のアーキテクチャから移⾏するためには、 ● 既存の仕組みを把握しないといけない 48

49.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした ● 技術的な問題を解いて実⾏したのは 49

50.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした もっと根本的な⽬的確認 マーケティング部の⽅が確認してくれた ● リバースプロキシを取り除けばできることが増える ○ HubSpotのA/Bテスト機能 ○ SEOコンサルからのサポート ● SEOに悪い影響は起きない ○ 実は4年前！からリバースプロキシ脱出を検討していた が、SEOの懸念が晴れていなかった ○ むしろSEO対策できることが増え、リード獲得につながる 50

51.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした まとめ ● ⾃前のリバースプロキシで辻褄合わせするのは難しい ● 既存のアーキテクチャを把握できないと、移⾏しようがない ● ビックリさせないようにインフラ移⾏してる 51

52.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 発表資料作ってて思ったこと 図に注意 ● 抽象的な図で⾒ると、なんでもスッキリ⾒える ● 複雑な図を書いたら、設計を⾒直すべき時期かも 抽象、理想、シンプルな図 52

53.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 発表資料作ってて思ったこと 図に注意 具体、実態、複雑な図 53

54.

リバースプロキシをやめて運⽤しやすいLP配信アーキテクチャにした 発表資料作ってて思ったこと 図に注意 作業⼿順レベルで事前に考えると、⾃信を持って当⽇作業できる 54