はてなブックマーク

こんにちは、Repro Booster のプロダクトマネージャーの Edward Fox です。 先日LAPRASさんの主催する【LAPRAS Engineer Talk】に出演させていただき、その動画が公開されたのでお知らせです。 LAPRAS CTOの興梠さんからのキラーパスがテンポよく繋がり話が非常に盛り上がったため、全体で50分ほどの尺になり、動画は前後編に分かれていますｗ 前編では Repro Core Unit の 村上より、Reproの大規模なトラフィックを支えるデータ処理基盤について説明しています。 【前編】事業を支えるサービス基盤のアーキテクチャと今後の挑戦 前編の推しポイントとしては 15億件／日（！）のイベントデータを処理するアーキテクチャについて知れる 基盤チームが抱えている課題や今後の展望が聞ける あたりですかね。動画内でも触れていますが、15億件／日を秒単位にな

はじめに こんにちは。Repro Booster プロダクトマネージャーの Edward Fox です。普段はRepro Boosterの製品戦略立案やロードマップの策定を担当していますが、プロダクトの提供とは別にお客様サイトの根本課題を一緒に解決する取り組みも行っています。本記事では、最近担当した大規模ECサイトのパフォーマンス改善事例を題材に、技術面と組織面の両方から「パフォーマンス改善をどう進めればよいか」という観点で記事を書いてみました。 Repro Booster と伴走支援の位置付け Repro Booster は「タグを設置するだけでWebパフォーマンスを改善する」ことを目的にしたプロダクトです。一方、既存サイトに長年積み上がった負債や部門間の調整といった課題はツールだけでは解決が難しい領域でもあります。そこで私たちは、少人数の伴走チームを編成し「小さく試して、パフォーマンス

Repro Boosterの開発を担当しているRyoma Shindo です。 今回はView Transition APIについて、基本的な使い方やCore Web Vitalsへの影響の有無など調査したのでご紹介します。 View Transition API とは View Transition APIは、ページ遷移する際のアニメーションを手軽に実装するためのAPIです。MPA（Multi Page Application）/SPA(Single Page Application)どちらでも利用できますが、MPAで利用する場合、MPAでありながらSPAのようなスムーズな画面遷移を実現できます。 今回はMPAでの動作に焦点を当てて記載します。 最低限の使い方は簡単で、以下をCSSに追加するだけです。 @view-transition { navigation: auto; } 適用する

皆様こんにちは。Boosterの杉浦です。 Repro ではここのところ、各種 AI を活用して生産性を上げられないか、色々模索しているところです。 Devin も複数のチームで実験的に導入をはじめ、現状3か月ほどになりました。 Booster チームでは主に既存レポジトリのコードの改善、機能追加の目的で試しており、以下のような感触です。 人間のジュニアプログラマと比較して十分役に立ち、高速かつ大量に作業を行える プレーンテキストのドキュメントやリソースがすでにあるかが非常に重要 開発 - ビルド - テストのパイプラインが手元の VM/Docker ですべて完結するように整備されていると、作業のスピードもクオリティも上がる 実機が要る、などの場合は現実的に頼めることがあまりない ローカルでテストが回せないと途端にやり取りの手間が激増する テスト環境の整備自体を頼むこともできる 頼む側は、

こんにちは。Feature2 Unitのうなすけです。我々のチームの担当範囲のひとつには「データの入出力」というものがあり、お客様からAPI呼び出しやファイルアップロードなどで受け取ったデータを適切に処理するコンポーネントの運用・開発をしています。 我々の担当している機能のひとつに、お客様からアップロードしていただいたCSVファイルの内容をデータベースにインポートするというものがあります。これは裏側ではEmbulkを使ってMySQL(Aurora)に投入するということを行っています。 このとき、アップロードされるCSVの内容に日本語(マルチバイト文字列)を含められるように機能追加しようとしたところ、日本語のデータがインポートできていないという問題が発生しました。冒頭画像で ??? となっている部分には日本語の文字列が表示されていてほしかったのですが、データの取り込みに失敗しています。 どこ

Development Division/Platform Team/Sys-Infra Unit では、よりセキュアな状態を維持できるように様々なことに取り組んでいます。 背景 Repro ではメインとなる AWS アカウントに以下の環境で利用するリソースを全て作成していました。1 production 所謂本番環境 staging 本番リリース前に QA を行うための環境 dev_staging 開発者の動作確認用 test アプリケーションの CI で利用する internal 内部利用のためのウェブアプリケーション AWS Well-Architected Tool を使って既存環境をチェックしたところ、まずは AWS アカウントを分離し、各環境のワークロードを分離した方がよいとの結果でした。 SEC01-BP01 アカウントを使用してワークロードを分ける: - AWS Well-

Development Division/Platform Team/Sys-Infra Unit では、開発者がスムーズに開発作業をできるように様々なことに取り組んでいます。 今回はそのうちの1つを紹介します。 背景 Repro の Slack には、開発オペレーション用のチャンネルがあります。このチャンネルには@deploy-botが存在しています。前回の改善1で@deploy-botは使いやすくなったのですが、Development Division 全体ではあまり活用されていませんでした。 新規アプリケーションのデプロイ準備時に Sys-Infra Unit への作業依頼が多かったため、原因を探ってみたところ、使い始めるのが意外と大変だということがわかりました。 課題 @deploy-botでデプロイするために必要な従来の作業は、詳細に書くと以下の通りです。 デプロイ用の IAM

はじめに みなさまこんには。日々 Booster で楽しくコードを書いている杉浦(sugi) です。 Booster プロジェクトではタグを入れるだけでサイトを高速化できる「Repro Booster」という製品を作っていますが、そのためにも日々さまざまな最適化手法を調査・模索しています。 その中で個人的に期待しているのが、 103 Early Hints というHTTPステータスコードです。 この記事では Repro Tech Meetup #9 で行った発表(資料)を元に、103 Early Hintsはどのような仕組みなのか、なぜ高速化につながるのか、さらに現状の実装に関して解説します。 ちょっとマイナーな内容ですが、知っておくとウェブパフォーマンス最適化の大きな武器になるかもしれません。 103 Early Hintsの背景 従来のHTTP通信の課題 通常のHTTP通信においては、

はじめに こんにちは、Repro Booster という製品の開発責任者／プロダクトマネジメントを担当しているEdward Fox（@edwardkenfox）です。 今回は、ServiceWorkerに組み込まれた新機能「Static Routing API」を実際に試してみた件について説明します。Repro Boosterでの応用を通じて得た知見を共有できればと思います。 Repro Boosterとは Repro Boosterは、私たちが提供しているパフォーマンス最適化ソリューションです。サイトにタグを設置するだけで、読み込み速度が向上するというシンプルなコンセプトで設計されています。 その鍵となる技術の一つがServiceWorkerの活用です。ServiceWorkerはブラウザのバックグラウンドで動作し、リソースキャッシュやネットワークの中継など、従来のWebサイトでは実現で

Repro Team / Feature Unit の下村です。 Reproで行っている技術書の読書会をどのように運営しているのかについて紹介します。 Reproの技術書読書会の現状 現状は2週間に1回のペースで1時間ほど時間をつかって読書会を行っています。参加者はその時々によって変わりますが、2-5人程度が参加しています。 今までは以下のような本を読んできました。 システム設計の面接試験 (半年程度で読破) ソフトウェア設計のトレードオフと誤り (半年程度で読破) 分散システムデザインパターン (現在読んでいるところ) Reproでは高トラフィックなシステムの保守運用や開発が求められる場面が非常に多いです。せっかくなのでそのようなReproの特性に合う本を読もうという方針のもと、参加者間で議論して読む本を選んでいます。 モチベーション そもそもなぜ読書会をやりたいのか？という理由はチーム

こんにちは、Repro Booster開発責任者のEdward Fox（edwardkenfox）です。12月13日に開催された Repro Tech Meetup #9 のイベントレポートをお届けします。 今年の3月には「Deep Dive into Browsers」というテーマで開催した Repro Tech Meetup ですが、今回はもう少しテーマを広げ「Webパフォーマンス」という括りにしてみました。テーマの裾野が広くなったことも手伝ってか、前回のイベントと比較すると参加者が倍近くまで増え、約30名の皆さんにご参加いただきました。規模が拡大した一方で、熱量の高い発表や質疑応答が次々と展開され、予定していた懇親会の時間を短縮せざるを得ないほど濃密な会となりました。本記事では、その熱いイベントの内容を振り返ります。 前回のイベントについては Repro Tech Meetup #8

こんにちは。Feature2 Unitのうなすけです。我々のチームの担当範囲のひとつには「データの入出力」というものがあり、お客様からAPI呼び出しやファイルアップロードなどで受け取ったデータを適切に処理するコンポーネントの運用・開発をしています。 AWS Lambdaの処理が失敗するようになった 皆さん、AWS Lambdaはお使いでしょうか。我々も様々な処理にAWS Lambdaを活用しています。一例として、ユーザーからアップロードされたCSVファイルのバリデーションを行うLambda functionをAWS Step Functionsの一部として実行しています。 ある日、機能追加として日本語を含む1CSVファイルのアップロードを許可したのですが、CSVファイルのバリデーション処理でエラーが発生するようになりました。日本語も受け入れるようにしたタイミングと同時にRuby runti

Reproでチーフアーキテクトをやっているjoker1007です。 前回、Apache Hudiというテーブルフォーマットについて紹介する記事を書きましたが、今回はHudiを実際に本番に近いデータで検証し、パフォーマンス特性とチューニングについていくつか知見を得たので、その辺りについて紹介します。 また、同じ内容をベースにOTFSG Tokyo Meetup #4というイベントで発表させていただきました。 これぐらいの規模でHudiについてガッツリ検証している例は国内では余り見ない様なので、それなりに貴重な知見を共有できたかなと思います。 ブログ記事とほぼ同じ内容ですが、スライドになってる資料もありますので、参考までにリンクを貼っておきます。 speakerdeck.com 実験データ データ構造 今回利用したデータは、いわゆるユーザーごとのプロフィール情報を想定して欲しい。 カラム名 タ

こんにちは、Platform Team の荒引 (@a_bicky) です。前回は続・何でも屋になっている SRE 的なチームから責務を分離するまでの道のり 〜新設チームでオンコール体制を構築するまで〜という話を書いたんですが、今回は Repro の運用に 7 年以上携わる中で私が遭遇して印象的だった Aurora MySQL 絡みのトラブルについて紹介します。 Aurora MySQL が詰まってデータ処理のスループットが下がるとか、API のレスポンスが遅くなるとか、ALTER TABLE する度にアプリケーションエラーが発生するとか、胃が痛くなる胸が熱くなる話が多いので、Aurora MySQL を利用していなくても楽しんでいただけるのではないかと思います。Aurora MySQL を利用している方であれば参考になる情報もあるでしょうし、通常の MySQL にも適用可能な話もあります

Platform Team/Sys-Infra Unitの伊豆です。今回は、pt-online-schema-changeにnohupをつけてバックグラウンドで実行してもSIGHUPを受け取って終了する現象に遭遇したので、そのときに調査した内容を共有します。 調査は以下の環境で行いました。 pt-online-schema-change v3.6.0 Amazon Linux 2023 bash 5.2.15 OpenSSH 8.7p1 背景 ReproではAurora MySQLを使っていて、レコード数の多いテーブルのスキーマを変更するときに、pt-online-schema-changeを使うことがあります 1 。pt-online-schema-changeを実行するときは、実行用のサーバーにSSHでログインして実行しています。 中には10億レコード以上あるテーブルもあり、pt-on

Platform Team/Repro Core Unit の村上です。 Repro では Kafka を基盤としたストリーム処理のアプリケーションを構築する際に、Kafka Streams を積極的に活用しています。 Kafka Streams は、フォールトトレラントなステートフル処理を簡潔に実装でき、データパイプラインを Topology という表現で抽象化することで、複雑な処理でも管理しやすい形で組み立てていくことが可能です。 また、Apache Kafka 以外の外部依存がないことや Streams DSL によるシンプルな記述でストリーム処理を実装できることなども、ストリーム処理のアプリケーションをスムーズに構築する上で助かっています。 一方で、 なにかしらの問題が発生したときのトラブルシューティングや影響範囲調査の際には、Kafka Streams の内部処理を把握していない

Repro では AWS 等のリソース管理に Terraform を活用しています。 この度 Terraform で管理しているコードの CI を Atlantis に移行したので、その経緯などについて書きます。 背景 Repro では以下のリソースを Terraform を使ってコード化して GitHub で管理しています。 AWS で構築したインフラ DataDog のモニターやアラート Google Cloud Platform で利用している一部のリソース GitHub の reproio organization のメンバーやチーム Kafka Topic MySQL アカウント PagerDuty の通知まわりの設定 Rollbar の通知 移行前は CircleCI や AWS CodeBuild を活用して独自に CI を構築していました。 課題 初期から CicleCI

はじめまして。ReproでUI/UXデザイナーをしている竹内と申します。Reproのデザイナーはプロダクト企画を行っているProduct Planning Teamに所属しており、中期製品戦略の策定とその浸透および状況にあわせた戦略の改定、顧客からの一次情報を収集、戦略の実行のため体験設計、UI設計まで一貫して行っています。 Product Planning Teamがやっている仕事は、いくつかのブログ記事でもご紹介しているので、よろしければご参照ください。 tech.repro.io tech.repro.io 今回は、プロダクト全体の企画に関する話ではなく、個別の機能開発においてデザイナーとしてどのように関わっているかのお話です。開発初期で要件が固まっていない時に役に立つ、要件・フェーズを決めるための手法であるユーザーストーリーマッピングをご紹介します。 ユーザーストーリーマッピングと

はじめに こんにちは。Repro で新規事業の開発をしている冨永です。 我々のチームでは主に、ユーザーのイベント集計を定期的にバッチ処理するフローで Go を採用しています。 Go で RDB など外部依存のあるコンポーネントを扱うテストをする際 interface などで抽象化しモックすることが多かったのですが、実際にその部分の挙動が確かめられないという不安がありました。 そこで今回は testfixtures というライブラリを使って実際に DB アクセスするテストを書いてみたのでその紹介です。 きっかけ まずはチーム内でテストに関する共通認識を作るためワークショップを実施しました。 各々の『知りたいこと』『教えたいこと』『議論したいこと』を話し合った結果、以下のような話題が上がりました。 今回は特に『外部依存のあるコンポーネントでテストが書き辛い』というトピックが盛り上がり、その中で

こんにちは、Reproのデザイナーの河西です。今日は、以前取り組んだ「中期製品戦略の策定」について話したいと思います。 ちょうど1年前のある日、中期経営計画の改定にともなって、中期製品戦略の策定のためのプロジェクトが立ち上がり、策定のためのメンバーの募集がありました。 デザイナーとしてもっと幅を広げたい、会社のみんなにもっとプロダクトにフォーカスしてほしい、売上を伸ばしたい...そんな思いから、策定メンバーに立候補しました。 Reproでいう中期製品戦略とは 戦略的な目標とそれに必要なプロダクト上の戦術を含む、約3年分の開発マイルストーンです。（以下 製品戦略と表記）世間的にはこれら戦略まで含んでロードマップと表現されることもあります。 製品戦略にはプロダクト戦略と戦術が含まれている 誰も正解がわからない中大変だったこと 経験者が不在でゴールがわからない 今までは経営陣がトップダウン的に決

こんにちは。ReproのProduct Planning Teamでプロダクト企画を担当している正木です。 今回は前回の記事の続きで、なぜGoToMarketの改善活動の効果がなかったのかの原因と、そこへの対策についてお話をしていきます。 tech.repro.io 結論から先に言うと、機能提供から利用開始されるまでのリードタイムが減り、活用度も上がるという結果になりました！ GoToMarket改善活動はなぜ効果がなかったのか？ 大きく2つの理由がありました。 プロジェクト型組織構造によるナレッジの局所化 当時のReproの開発組織はプロジェクト制を取っており、何かの開発が決定すると都度プロジェクトが発足し、開発が終わると解散するという流れでした。 GoToMarket活動を行う前にプロジェクトチームが解散されてしまうことで、すべての機能のGoToMarketを担当するPMMだけにナレッ

Reproでチーフアーキテクトを担当しているjoker1007です。 今回、社内のデータストレージの将来的な選択肢の一つとしてApache Hudiというテーブルデータフォーマットについて調査と実データでの検証を実施しました。 この記事では2回に分けて、そもそもhudiってどんなフォーマットなのか、どういうデータで検証してどんな結果が得られたのかについて紹介します。 ということで第1回は、hudiそのものについての紹介をしていきます。 この記事はhudi-0.14.1を利用して検証した時のものです。また社内向けに書いた資料の手直しであるため丁寧語でないことに御留意ください。 Hudiとは何か、その目的 hudiは更新可能なデータレイクを構築するためのテーブルフォーマットである。 ストリーミングによるデータインサートや、upsert, deleteをサポートする。 通常、データ分析に向いたデ

こんにちは。ReproのProduct Planning Teamでプロダクト企画を担当している正木です。 Product Planning Teamって何？という方はこちらの記事を併せて見ていただけると嬉しいです！ tech.repro.io さて、プロダクト開発に関わっている皆さんであれば「我々の作った機能は果たしてちゃんと使われているんだろうか…」と思ったことは一度はあるはずです。 今回はリリースした機能をお客様に使ってもらうための試行錯誤について2回にわたってお話しようと思います。 ReproにおけるGoToMarketとは？ Reproにおいてはリリースされた機能をお客様に使ってもらうまでの活動をGoToMarketと呼んでいます。 活動単位が機能であることがポイントです。 Reproはとても機能が多く、ただリリースしただけではなかなか気づいてもらえません。また、ReproのGr

はじめに こんにちは。新規事業のプロダクトマネジメントを担当している taison です。 先日、顧客への請求金額を算出するために日々実行しているデータフローを刷新しました。 その際に Datastream という Google Cloud が提供する CDC サービスを活用したことで、構築・運用が楽になったのでご紹介します。 なお今回は開発にご協力いただいている 株式会社 Rabee の abyssparanoia さんの提案・検証があって実現したので、ここで感謝させていただきます。 全体像 それまではとある BI ツールを活用して、請求根拠となるデータを各内容にあわせて出力するデータフローを組んでいました。 下図のように、プロダクトの RDB（アプリケーションデータ）そのものに直接接続し、BI ツールで生成したクエリを定期的に実行することで要件を満たしていました。 ただ、おかげ様で事業

こんにちは。ReproのProduct Planning Teamでプロダクト企画を担当している正木です。 Product Planning Teamって何？という方はこちらの記事を併せて見ていただけると嬉しいです！ tech.repro.io 今回はプロダクトや作っている途中の機能に対して、全社からのフィードバックを得るために行っているプロダクトフィードバック会（通称プロフィ会）の運用と改善についてのお話です。 プロダクトフィードバック会とは？ 毎週木曜11:00-12:00で全社員を対象に開発チームがプロダクトに関する発表やプレゼンを行い、フィードバックを得る会です。この会は、プロダクトに関する様々な立場や部署からのフィードバックを得ることで、そもそも論や考慮漏れの早期発見と対策を行う場となっています。 最近はそれだけでなく、新機能リリース後のお客様の反応についての発表や、マーケティン

前回の続きです。 EMR 5.36.1 から EMR 6.15.0 への更新 使用するアプリケーションのバージョンは以下のようになりました。OS は Amazon Linux 2 です。 アプリケーション等 EMR 5.36.1 EMR 6.15.0 Tez 0.9.2 0.10.2 Hue 4.10.0 4.11.0 Hive 2.3.9 3.1.3 Hadoop 2.10.1 3.3.6 Presto 0.267 0.2831 Trino N/A 426 Hive, Hadoop, Tez については前の記事で確認済みなので、ここからはそれ以外の要素について検討していきます。 一番問題になったのは Presto から Trino への移行です。Trino 移行に関係して発生した事柄を列挙します。 Datadog Agent の設定変更 任意の期間の指定したタイプのクエリを実行して結果の

前回の続きです。 EMR 5.36.1 から EMR 6.6.0 への更新について書きます。 EMR 5.36.1 から EMR 6.6.0 への更新 アプリケーション等 EMR 5.36.1 EMR 6.6.0 Tez 0.9.2 0.9.2 Hue 4.10.0 4.10.0 Hive 2.3.9 3.1.2 Hadoop 2.10.1 3.2.1 Presto 0.267 0.267 Trino N/A 367 Amazon Linux 2 2 このバージョンアップでは Hive と Hadoop のメジャーバージョンアップがあるので、Upgrade Amazon EMR Hive Metastore from 5.X to 6.X | AWS Big Data Blog のとおりに Hive メタストアをマイグレートしました。 その後、検証用 EMR cluster を作成してクエ

Development Division/Platform Team/Sys-Infra Unit で実施した Amazon EMR 1 のバージョンアップについてどのようなことをやったのか紹介します。 Repro では Presto や Hive などのセットアップに EMR を使用しており、以下の用途で活用しています。 プッシュ通知の配信対象を抽出する 管理画面で参照するデータを抽出する S3 などに貯まっているイベントデータを集計する EMR のアプリケーションとしては以下を使用していました。 Presto Tez Hadoop Hive Hue 経緯 Repro では多くのミドルウェアを運用しており、日々バージョンアップしているのですが、最近まで2019年2月18日にリリースされた EMR 5.21.0 というバージョンを使用していました。もちろん Log4Shell のような脆弱