Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cacoo HTML5への移⾏ それにまつわるインフラストラクチャーの再構築 / Cacoo ...
Search
株式会社ヌーラボ
PRO
September 21, 2017
Technology
1
260
Cacoo HTML5への移⾏ それにまつわるインフラストラクチャーの再構築 / Cacoo HTML5 Restructure infrastructure
2017年9月21日(木)に、Cacooのプロダクトオーナー平山が登壇した、日本MSP協会さんの主催する「MSPJ 福岡インフラ勉強会」の資料です。
株式会社ヌーラボ
PRO
September 21, 2017
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
21
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
30
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
680
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
320
僕たちは何を守っているのか?ビジネスを守る、ヌーラボのセキュリティ実践
nulabinc
PRO
1
69
Snowflake九州ユーザー会
nulabinc
PRO
0
65
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
1.1k
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
440
ライティングチームだからこそできた、「どことでも繋がれるチーム」づくりの結果 / Technical Writing Meetup vol.38
nulabinc
PRO
0
110
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
580
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
380
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.1k
解析の定理証明実践@Lean 4
dec9ue
1
190
OPENLOGI Company Profile
hr01
0
67k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
170
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
How Community Opened Global Doors
hiroramos4
PRO
1
130
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
220
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Music & Morning Musume
bryan
46
6.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
Cacoo HTML5への移⾏ それにまつわるインフラストラクチャーの再構築 MSPJ 福岡インフラ勉強会 Session#3
Cacooについて “ビジュアルコラボレーション”世界中270万⼈が利⽤す るオンラインドローイングツール(海外⽐率 88%)
本⽇のセッション Cacooのフロントエンド(エディタ)刷新それを⽀え るバックエンド・インフラの変化を紹介
Flash時代 DB (Master/Slave) Gossip ApplicationWe b Site MQ Site, Web
App, Webhook Webhook API ELB Multi AZ subnet ALB (Internal) Reverse Proxy ECS Webhook Worker ELB (Internal)
現在 MQ Site, Web App, Webhook, Editor API Webhook API
Web Site WebSocket ALB RDS (Diagram DB) Multi AZ subnet ALB (Internal) Reverse Proxy ECS Editor API Webhook Worker Editor Messaging Redis ELB (Internal) Gossip ApplicationWe b Site DB (Master/Slave) 現在 (HTML5関連)
⼤きな変更点 1) HTML5化に伴う新規データストアをRDS上に構築 2) エディタ⽤のバックエンドをマイクロサービス化
データの保持⽅法 (Flash) Flash版エディタ ひとつの図につき単⼀テーブル・単⼀レコードにバイ ナリデータとして保持 メリット アプリ実装⾯ではシンプルで取り扱いやすい デメリット スケーラビリティが低い容易にデータを更新できない https://nulab-inc.com/ja/blog/cacoo/cacoo-use-html5-data/
データの保持⽅法 (HTML5) HTML5版エディタ JSONのツリー構造を3つのテーブル・複数のレコー ドに分散して保持 メリット スケールさせやすい容易にデータを変更できる(部分 更新が可能) デメリット アプリの実装は難しい特に、データの整合性保持に注
意が必要 https://nulab-inc.com/ja/blog/cacoo/cacoo-use-html5-data/
HTML5のデータストア 図のデータ保持⽤のRDS (PostgreSQL) を追加 JSON型としてテーブル・レコードを分けて保持 図のデータはエディタ以外の部分からは利⽤されない (ほとんど) 図のデータがストレージに占める部分は少なくない
RDS利⽤までの変遷 RDBとRest APIでシンプルな実装を⾃製 最初CouchDBを利⽤し実装も⾏う ・レプリケーション毎時に2~3の通信が必 要・厳格すぎるリビジョン管理・ツリー状 データの部分更新はできない・セキュリテ ィの取り扱いが困難 Cacooにとって様々な問題が発覚
RDSの利点 ・基本的な構築が不要・運⽤が楽 バックアップ、ア ーカイブログ、ディスク拡張〜・チューニングなしで もハイパフォーマンス (いまのところ) 将来的にはPostgreSQL互換 Amazon Auroraに移⾏したい (検証環境では移⾏済み)
RDSの注意点 ・拡張機能は原則利⽤できない・すべてのオプション を設定できるわけではない 例︓ログのタイムゾーン
サーバーとクライアントの連携 Flash版エディタのサーバー連携 “BlazeDS” Flash由来のRPCやサーバーPushの Java実装 BlazeDS & AMFに依存しない実装 “AMF” Flash特化のバイナリプロトコルで通信
マイクロサービス化 HTML5版エディタ⽤に新規開発 RPC Go⾔語を⽤いたRest APIサービス それぞれ単独のシンプルなサービス軽量 なDockerコンテナとして配備 サーバーPush JavaサーブレットとRedisを⽤いた Pub/Sub実装
マイクロサービス化の利点 ・サービスの更新が容易・⾼いスケーラビリティ オ ートスケールが可能・分散開発が容易(福岡とニュー ヨーク)
マイクロサービス化の注意点(⼯夫) ・Dockerコンテナごとの監視は実装が必要 ・サブドメイン単位で管理を集約できる CORS やOPTIONSリクエストの配慮が必要 ・各コンテナや他サーバーとの タイムゾーンギャ ップの防⽌や配慮 ・各コンテナのロギング 確認しやすい状況の整備
が必要 (CloudWatch > Lambda > Typetalk & Elasticsearch) ・個々⼈の開発環境が混沌とする
その他の共有情報 ・ALB WebSocketに対応させるうえで必須 ECS との連携、 ターゲットグループの利⽤など利点も 多い ・CloudFrontのDynamic Site Accelaration
イン ターネットの経路障害を回避するため導⼊ WebSocketは通らないので要注意 ・アプリの開発者、インフラの担当者 相互に気軽 に話ができる体制や環境が理想的
職種 業務内容 勤務地 フロントエンジニア CacooHTML5版クライアント開発 福岡 Goエンジニア Cacooのサーバーサイド開発 福岡 ⼀緒にCacooを世界に届けましょう︕
募集しています︕
Happy Diagraming with