🍣

マイベストを支える技術とサービス構成

2024/04/15に公開

こんにちは。マイベストでCTOをしている @miraoto です。mybest BlogKaigi 2024の1日目を担当させていただきます。

マイベストは、一部の国(日本、アメリカ)の商品を実際に購入して自社の施設で比較検証したり、専門家を中心としたクリエイターが自らの愛用品やおすすめ商品を紹介しているサービスです。
自社で検証した情報をデータ化し、それを汎用的な選択UXとして提供することで、ユーザーの選択に関する課題を解決しようとしています。

マイベストは日本を含む9の国と地域で展開しており、日本では月間3000万を超えるユーザーの方にご利用頂いております。

この記事では、マイベストを作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。

Ruby/Rails

マイベストはサービス開始から7年運用されており、そのすべての期間でバックエンドをRuby/Railsで開発しています。

  • 一般に公開されている機能、管理機能などの利用用途の異なる機能はRails engineを用いて分割
  • Ruby/Railsのバージョンアップは定期的に実施しており、Ruby3.3.1、Railsは7.1.3.2と記事更新時点での最新バージョンで運用
  • 今はWebフロントエンドが全てReact/Next.jsで構成されているため、バックエンドはAPIサーバーとして利用

また、2019年よりRuby/Railsに関するカンファレンスにスポンサーとして参加させてもらっています(幸いなことに、サービス成長に合わせてスポンサーのグレードも上げることができています)

  • RubyKaigi 2019,2020,Takeout 2021,2022,2023
  • Kaigi on Rails 2021,2022,2023

今年のRubyKaigiにもブースを出展させていただくことが決まりましたのでぜひ遊びに来てください!

GraphQL

APIにはGraphQLを使っています。元々はRESTで開発していましたが、2019年頃からサービスのコンセプトの変更に伴い、Webフロントエンドでリッチな体験を提供するために導入し始めました。今では、ほぼすべてのAPIリクエストがGraphQL経由になるぐらい、サービスではGraphQLにお世話になっています。
社内の運用ドキュメントもあらかた揃ってきており、今は運用期に入っているような状態です。


開発フローの一例

この領域に関する運用の知見なども少しずつ共有できる状態になったので、以下のような地域のGraphQLコミュニティを立ち上げ、定期的にオンラインやオフラインでLT会を開催しています。
https://tsukiji-graphql.connpass.com/

React/Next.js

フロントエンドにはReact/Next.jsとTypeScriptを使っています。
Webフロントエンドの技術構成はメンバーのスキルセットや機能要件に合わせてCoffeeScript→Vue(1-2系)→React→React/Next.jsのように変更しているのですが、所謂技術置き換えは全て完了している状態なので、現在は全てReactで開発しています。
検索からの流入が主で、SSRしていますが、1コンテンツの情報量も多いのでSSRで生成したHTMLをCDN(CloudFront)でキャッシュしています。
また、キャッシュ切れ対策としてSWR(stale-while-revalidate)を導入しています。

グローバル対応

Web版マイベストは日本だけでなく8の国と地域で提供しています。各国コードは共通で、国ごとにデータベースを分ける方針で開発しており、データベースに含まれない情報に関してはフロントエンドではnext-i18next、バックエンドはRailsのi18nでローカライゼーションを実施しています。

https://speakerdeck.com/rince/rails-i18n

https://zenn.dev/mybest_dev/articles/324aed92f8086f

https://speakerdeck.com/isaka1022/maibesutogurobaruhua-nosubete

ReactNative

マイベストを利用されたことのある方にはあまり馴染みがないかもしれませんが、実はマイベストはモバイルアプリもリリースしています。

https://apps.apple.com/jp/app/マイベスト-商品比較サービス/id6443908072

このネイティブアプリはReactNativeを用いて開発をしています。
Web版をReactで実装しているので、エンジニアがスライド可能で組織として柔軟に運用することを想定してこの技術選定にしました。

AWS

サービス立ち上げ以来、AWSをインフラとして利用しています。ECS on Fargateによりマネージドなコンテナで運用しており、開発環境も基本的には同じコンテナの設定ファイルで構築しています。

グローバル対応の項でも共有した通り、マイベストは各国に同じコードベースでサービスを提供しており、各国は同じインフラ構成でリージョンのみを変更してデプロイしています。

  • ap-northeast-1:日本
  • us-east-2:アメリカ
  • ap-northeast-1:台湾、タイ、インドネシア、ベトナム、フィリピン
  • eu-west-2:イギリス
  • sa-east-1:ブラジル

imgix

マイベストは自社で検証・撮影した画像の情報がとても多く、見せ方も多様なためimgixを用いて画像の加工・圧縮して提供しています。

https://www.imgix.com/

CI/CD

CIにはGithub Actionsを使っています。

SlackからのChatOpsにより、Dockerコンテナをビルドして各国のリージョンにコードをデプロイしています。


ChatOpsによるデプロイの一例。このコマンドで日本と8の国と地域にソースコードがデプロイされてます

また、プルリクエストごとに本番環境と同等の確認環境を立ち上げる仕組みや、本番と同様のデータで開発できるような環境を作成するバッチなどを活用するなど、開発組織のスケールに対してボトルネックとなりそうな開発者体験の改善も継続的に実施しています。


Githubのラベルを利用した検証環境立ち上げの例。これで日本とアメリカの検証環境が立ち上がります

データ分析

DWHにBigQuery、ETLにTrocco、BIにLooker Studio (旧 Google データスタジオ)とRedashを利用しています。

昨年から、データを活用した意思決定のための分析基盤の整備に力を入れており、社内でのデータ活用の事例もどんどん増えてきているような状況です。
https://tsushin.my-best.com/articles/055

終わりに

今回はマイベストで利用されている技術やサービス構成について共有させていただきました!

マイベストでは現在全職種積極的に採用をしておりますので、もっと詳しく知りたかったり、会社に興味を持っていただけた方、ぜひカジュアル面談よろしくお願いします!

https://pitta.me/special/company/y2zcuxcno

こちらにも情報まとまっているので興味あればぜひご覧ください
https://mybestcom.notion.site/mybest-information-for-Engineers-8beadd9c91ef4dc2b21171d48a4b0c49

Discussion