よる、Reactで管理画面(SPA)を作った時の技術選定とか。AI・機械学習チームの笹川です。趣味はバスケと筋トレで、このところは、NBAが開幕して前評判と全然違うチームの躍進に毎日ワクワクしています。今回は、2022年4月にリリースし、これまで運用しているEUの医療従事者向けメディアサービスの開発における開発の工夫と、技術的な意思決定について紹介します。同じ内容を発表しており、今回はそれを少し深堀りして紹介します。hiring!サービス開発の背景エムスリーは、アメリカ、イギリス、フランス、中国などグローバルへ積極的に事業展開しています。協力し、EUの会員アクティビティ向上のため、医療従事者向けニュースサービスを新規に開発することになりました。体制としては、以下の分担で開発を進めました。開発に際して重視したポイント新規サービスの開発に際して特に重視したポイントは以下の3点です。はじめとした規制への対応1つ目の高速な開発については、会員獲得や、定着を進めるため、施策を打ちつつ、その結果から学ぶというループを数多く高速に回す必要があります。そのため運用負荷を極力下げつつ、変更を容易にしておくことが重要です。2つ目の開発コストの削減については、新規開発に限らないことではありますが、特にサービス開発序盤では、限られた予算の中から最大の成果を出すため、開発コストを少しでも減らす必要があります。対応することが必須であり、そのための調査・開発が必要になります。今回は、フランス独自の規制への対応も必要になったため、GDPR対応と併せてフランスチームとの協力がとても重要でした。以下では、上記のポイント押さえつつ開発を進めた際の工夫について紹介します。高速な開発のために、今回のプロジェクトでは以下の技術選定を実施しました。Autopilotを利用することを決めました。「新規サービス開発にKubernetesの利用は悪手では?」と思われるかもしれません。この技術選定の背景として、筆者を含め開発を担当するエンジニア全員が、普段から日本でのサービス開発にGKEを既に利用しており、習熟していたことが挙げられます。手慣れた物を使うことで、既存の資産(Terraformや、CIの実装など)を流用しつつ、いいスタートダッシュを切れたと思います。今回はAutopilotを初めて導入してみました。AutopilotはKubernetesクラスタを構成するノードの管理をGoogleに任せることができるGKEのモードで、これによりノードの管理の手間が削減され、開発者はアプリケーションの開発に集中することができます。Autopilotの導入に伴うトラブルは特になく、とても安定しているので、このノウハウを日本の開発にフィードバックし、導入を順次進めているところです。次にGraphQLの導入と、フロントエンドと、バックエンドの分離です。GraphQLのスキーマを前提として相互のやりとりを規定することで、スムーズに開発することができました。今回のプロジェクトでは、エンジニア3名、デザイナ1名で開発を進めたのですが、この構成にしたことでデザイナのメンバーにもフロントの開発の一部を担当してもらうことができました。最後にマイクロサービスにはしないという意思決定についてです。この体制でサービスを分割して開発を進めても、おそらく起こることは、分割したサービスを修正し、GraphQLスキーマを変更し、対応するフロントを変更するということを1人が行うということであり、特にサービスを分割するメリットがありません。ほとんどのサービスは分割せず、1つのアプリケーションとして実装を進めました。将来的なサービスの分割はありうることと考え、分割するであろう部分を想定した開発を意識しました。以下が今回開発したアプリケーションのアーキテクチャ図です。Autopilotのクラスタ上で動いています。Contentとある部分が、将来分割するであろうニュースコンテンツを配信するコンポーネントとGraphQLのコンポーネントが合わさった部分です。開発コストの削減には、以下の取り組みを実施しました。Cloudの予備のコンピューティングリソースを利用して、一定時間後にPodが強制終了してしまう代わりに、起動するPodの料金が大きく割引されるという仕組みです。開発環境の全てのPodに適用することで、大幅にコストを削減できました。次に、DBインスタンスの集約についてです。DBインスタンスはクラウドコンポーネントの中でも特にコストがかかるコンポーネントの1つです。今回の開発ではその料金の節約のため、1つのインスタンスに集約して開発しました。先述した通りサービス分割を意識した構成にするため、DB内部のデータベースはサービス単位で分割しました。することで、不意に分割予定のサービス間のテーブル同士のjoinなどが発生しないようにし、将来的なサービス分割の際に剥がしやすいように設計しました。規制への対応EU圏でのサービス運営には、GDPRはもちろん、サービスを展開する各国の規制に対する対応が必須です。今回は以下の対応を実施しました。GDPRへの対応フランス国内の規制への対応まず1つ目のGDPRの対応については、サービス規約の作成や、各種同意画面のフロントへの実装を実施しました。洗い出し、デザインの調整などを細かく実施しました。次にフランス国内の規制への対応についてです。Analyticsを利用する想定でフロントエンドおよびデータ連携の実装を進めていました。Analyticsの利用は違法である旨の発表がありました。www.cnil.frこれにはかなり困ったのですが、対応しないわけにはいかないため、メンバーで相談し、ログ記録ツールを自作することにしました。Sinkを用いてBigQueryへ連携する構成にしています。フロントからそのAPIを呼ぶ際に、トラッキングする内容を含めてリクエストを送るようにすることで行動ログデータの取得を実現します。APIの実装のうち主要な実装は以下のようになっています(説明のために不要な部分を省略しています)。Loggingに出力するのみのシンプルな実装です。Send()出力したログはマネージドサービスのみでBigQueryまで連携される構成になっており、実装負荷はもちろん、運用負荷の低減にも貢献しています。Analyticsから自前ログ記録ツールに変更した後のアーキテクチャは以下のようになっています。Analyticsを自作のログ記録ツールに変更した後のアーキテクチャ技術的なチャレンジを考慮した意思決定ここから少し視点を変えて、このプロジェクトで取り組んだ「技術的なチャレンジ」について、その考えの背景を中心に簡単に紹介したいと思います。メンバーに任せられています。それが社内に技術的な多様性を生んでおり、個人的にも良い文化だなと思っています。エムスリーの多様な技術スタック普段の技術選定は、プロジェクトの性質、最近のトレンド、学習コストなどを総合的に考慮して行われます。今回のプロジェクトの技術選定では、メンバー全員が締切とクオリティに責任を持つ前提で、積極的にチャレンジしていく方向としました。メンバーが「面白そう」と感じる技術を採用する、ということを意味しています。Autopilot、GraphQLの採用の他、ORMとしてent、フロントエンドにReactを採用したことなどが挙げられます。Autopilotはリリース当時まだ比較的新しいサービスでしたが、GraphQLや、Reactは既にメジャーで採用事例も多いものであると思います。このチャレンジは、メンバーが、より楽しんで開発することができるようになり、そのことが良い成果につながるという狙いのもと実施しました。Reactの採用では、リリース当時、社内での利用は若干Vueが優勢というところであり、デザイナの大月もVueの経験がありました。順当にいけばVueを採用するような状況の中ではあるものの、メンバー内で議論の結果Reactの方が「面白いだろう」となり、Reactを採用することになりました。キャッチアップには大月も含めメンバー全員が多少苦労した部分もありましたが、技術選定の背景も後押しし、楽しんで開発することができました。結果として問題なく締め切りに間に合わせることができたのはもちろんのこと、手前味噌ではありますがクオリティ的にも良いものができたと思います。チャレンジにはいいことばかりではなく、リスクがあることも知っておく必要があります。リスクのコントロールを誤ると、不慣れな技術ゆえに思ったより多くの時間を使ってしまい、品質を上げきれない、締切に間に合わないなどが発生することは想像に難くありません。生存バイアスが強めにかかった事例ではありますが、このような技術選定の方向も面白いのではないでしょうか。まとめ今回は、グローバル向けメディアサービスの開発における工夫と、技術的な意思決定について紹介しました。このプロジェクトは現在もエンハンス開発をガンガン進めているところです。サービスの横展開など、さらなる大きな成果につなげるために頑張っていきたいと思っています。hiring!エムスリーでは、世界各地のメンバーと協力しながら、医療を前進させるプロダクトを生み出すエンジニアを広く募集中です。読者になる関連記事2024-09-02インターンの二週間で社内APIを新しく建て本番リリースまで何でもやった話【ソフトウェアエンジニアイン...はじめまして。(@KowerKoint2010)です。AI・機械学習チームの岩月です。9注目記事はてなブログをはじめよう!m3techさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。