🦋

MOTHWINGブランドサイトを支えるCloudflareの技術

2023/12/05に公開

自己紹介

こんにちは。株式会社DELTA代表の丹です。
この記事は Cloudfalre Advent Calendar 2023 の5日目の記事となります。

弊社はAWSコスト削減代行をはじめとして、主にベンチャー・スタートアップのCTOを中心に技術支援を行っている会社です。
普段は技術支援の内容について発信していますが、今回は趣向を変えて、私が運営している別の事業においてCloudflareの技術を活用した事例について紹介します。

エンジニア向け分割キーボードMOTHWINGについて

DELTA社が所属しているSEVENRICH GROUPからリリースした分割キーボードD2Cのブランドのブランドサイトの事例について紹介します。
その前に、簡単にMOTHWINGとは何かを紹介しておくと、44キーの国産分割キーボード（既製品）です。
mothwing.tokyo

肩が開くということと、手の形にあっているということから、エンジニアの健康と生産性に寄与したい！という思いを込めて今年リリースしました。
私がプロデュースしたもので、一般に購入が可能です。買ってください!

このプロダクト自体はハードウェアではあるのですが、事業の特徴として

慣れるまでに時間がかかる
ファームウェアや設定ソフトなど、周辺のソフトウェアが必要な場合もある
さらに使いこなそうと思った場合、より詳細な情報が必要

というものがあり、「売って終わり」ではなく、購入していただいてからいかにスムーズにランディングできるか、
「これは使いこなせそうだ」と思っていただけるかが課題でした。

そこで、後で紹介する、「MOTHWING専用のオンラインタイピングゲーム」を自ら実装して購入者がチュートリアル的に使えるようにするなど様々な工夫をしています。

同時に、MOTHWINGはプロダクトとしてかなり高価であり、またブランドとしてもこだわった世界観を表現しています。
上記二つを同居させようと思うと、「アプリケーションも実装してweb上で利用したい」「ブランドサイトはこだわったものをリリースしたい」という二つの要件が発生することがわかるかと思います。

この二つを、アジリティを確保したうえで安全に実現するという過程でCloudflareの各機能を使い倒しました。

前提

弊グループでは、スタートアップスタジオとして高速に事業を立ち上げるため、社内にデザイナーのチームが存在しています。
今回もその多分にもれず、デザイナーチームがブランドサイト自体のデザインと実装を担当しました。

デザイナーチームはスキルセットとしてWordpressをレンタルサーバーで公開することに長けており、
今回もかなりスピード感をもってリリースしたかったため、ここの技術スタックは極力変えずでいきたくはありました。

同時に、タイピングゲームはReactで実装したかったのでRemix on Cloudflare Pagesで実装したアプリケーションが、それはそれでCloudflare上にデプロイされていました。

これはこれでよかったのですが、最終的には、「ひとつのドメイン配下で、 /manuals/lessons にアクセスするとタイピングゲームが、それ以外のパスならWordpressが表示される」というような体験を実現したかったのでした。
そこで、 まずDNSをCloudflareにした状態でスタート しました。これはかなりおすすめのムーブで、こうしておくだけで後でなんとでもなるからです。
Origin(DNS上でのAレコード)はXServerのIPを指定しました。これにより、XServerのメインのWebサーバが mothwing.tokyo へのトラフィックを受けたときに、ホストヘッダーを参照してくれるので mothwing.tokyo 用のコンテンツが普通に表示されるようになります。
当然ですが Proxied にチェックを入れます。

最初のアーキテクチャ

Workers Routeで部分的に別リソースへプロキシする

やりたかったのは「ひとつのドメイン配下で、 /manuals/lessons にアクセスするとタイピングゲームが、それ以外のパスならWordpressが表示される」でした。

ReactでSPAをビルドしたうえでWordpress上にアセットとして置くというのもなしではありませんでしたが、後でタイピングゲームのお題部分のデータは変わっていく可能性があったのでSSRにしたかったのと、Githubのブランチから簡単にプレビューやプロダクションデプロイが可能なCloudflare Pagesの体験が良かったのでRemix on Cloudflare Pagesは使い続けたいと思っていました。
実際に、タイピングゲームなどのチュートリアルはアジリティを持って改善を回していきたい箇所でもあり、安全にプレビューしながら試せる環境があると安心でした。

そこで、CDNのレイヤーでWordpress(オリジン)へのリクエストとCloudflare Pagesをうまくプロキシできればいいのでは？と思い、Workers Routeを利用したリバースプロキシの実装を行いました。

この際、少し複雑なのですが、 /manuals 自体はWordpressでホストされており、 /manuals/* のみ、 Cloudflare Pagesをプロキシしたかったので、まず /manuals/* に対してWorkers Routeを設定しました。
そして /manuals/にマッチした場合のみオリジンに（つまり、 fetch(request)を）リクエストするようにすればよいので、honoで薄いWorkersを実装してデプロイするようにしました。
場合によっては、base pathの書き換えなどがやりたくなる可能性もあると思いますが（今回は、Cloudflare Pages側のbase pathをデフォルトでもう /manuals にする対応で終わらせましたが）、その場合もレスポンスを書き換えられるので安心ですね。

import { Hono } from 'hono';

const app = new Hono();

const basePath = `https://mothwing-tokyo.pages.dev`;

app.get('*', c => {
  try {
    if(c.req.path === '/manuals/') {
      return fetch(c.req.raw);
    }
    return fetch(`${basePath}${c.req.path}${new URL(c.req.url).search}`);
    // 場合によってはこのあとレスポンスの書き換えを行う
  }
  catch(e) {
    console.log(e);
    return new Response(null, {status: 500});
  }
});

app.post('*', c => {
  return fetch(c.req.raw);
});

export default app;

めちゃくちゃシンプルに書けました。
一見すると、 fetch(c.req.raw) すると、Cloudflare WorkersからCloudflareのパブリックDNSに問い合わせが飛び、リクエストが再度Workers Routeに入るので無限ループになるのでは？と不安になりますが、そこはうまくやってくれるようで（というか、CDNというものがそもそもそういう存在だからというのもあると思いますが、、、）、オリジンであるXServerに、ホストヘッダを保ったままよしなにリクエストをプロキシしてくれるようです。

wp-adminへのアクセスをブロックする

また、ブランドサイトを運営する中で/wp-adminへの怪しいトラフィックがあることに気が付きました。
当たり前ですが、こういった特権的な行動ができる管理画面のURLなどはパブリックにさらしていると危険です。

そんなときでも、とりあえずDNSをCloudflareにしておく を実践していれば安心です。
Cloudflare Zero Trust Accessで、Applicationsとして追加すればmothwing.tokyo/wp-adminに対して自社ドメインのメールアドレスでCloudflare ZTNAにサインインしたユーザーのみがアクセスできるように弾くことができます。
これ、すごいのが、DNSやCDNのレイヤーでこの行為が行われるため、この設定において オリジン側での修正や設定は一切不要である という点で、例えばオリジン側にアクセス制限機能がなくても安心できてうれしいと思います。

R2にダウンロードさせたいファイルを配置

一部、静的なアセットをダウンロードさせる必要がありました。
具体的には、画面上に常駐しながらキーマップを表示するelectonアプリなどです。

こういった静的なアセットは、WordPressに置いてもいいのですが、ファイルストレージを使って気軽にアップロードできてほしかったのでR2に置くことにしました。

R2バケットには、カスタムドメインとして自分が管理しているドメインのサブドメインを指定できたため、 assets.mothwing.tokyo というサブドメインを指定しています。

外部サイトへのリダイレクション

Page Rulesを使えば簡単なリダイレクションなども設定できます。
例えば今回は、MOTHWINGをより使いこなしたい人向けのウェビナーを開催するため、その参加申し込みのフォームを作って誘導しようとしていたのですが、
そのURLを早めにデザインチームに渡したかったため、まず仮で mothwing.tokyo/seminar というURLを払い出しておき、後でそこにPage Rulesを使ってリダイレクト先を設定するということをやっています。

このテクニックはQRコードの印刷時（後で差し替えできない+URLは短い必要がある）などにも活用できるかと思います。

ふりかえり

最終的なアーキテクチャは以上のようになりました。

最終的につくったのは一般的な静的なブランドサイトと単純なWebアプリケーションの組み合わせでしかないのですが、こうして見ると色々やっていますね。
CloudflareとWorkers Routeが最終的なグルー（接着剤）の役割を果たしてくれるので、デザインチームのコーダーと私との間で完全に分業しながら最終的に統一するということが非常にやりやすく良かったです。

最近はOriginlessなフルスタックWebアプリケーションをWorkersで作るような記事やアイデアもよくシェアされていますが、そうなると一見Cloudflareスタックはアプリケーションエンジニア向けなのかなという印象でしたが、
Workers Routeを使うとマネージドLuaのような動きもさせられるし、セキュアかつパフォーマントでハイケイパビリティなWebサイトを従来のスタックを使い続けながら構築できるという点で、むしろWeb制作界隈でもっと話題になってしかるべきではないか？と個人的には感じています。

とにかく、 とりあえずDNSをCloudflareにしておく の破壊力が強すぎるので、本当におすすめです。NSが向いてさえいればよいので、もちろんレンタルサーバーを使い続けることもできますし、Google Workspaceと同居も可能です。いいことしかないです。
すべてを紹介はしきれませんでしたが、Page RulesやWorkers Routeなどの強力な機能を頼れば、合理的な範囲内でほとんどの要件は満たせるのでは？と思います。

ということで、Web制作をされている皆様ぜひDNSはCloudflareをご検討ください！

We're Hiring!

最後までお読みいただきありがとうございます。
MOTHWINGもDELTAも仲間を募集中です！

まずはカジュアル面談からできればと思います、ぜひPittaから
またはGoogle Formからお申込みください！