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
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
Github Copilot エージェントモードで試してみた
ochtum
0
130
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3.3k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
140
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
310
AI専用のリンターを作る #yumemi_patch
bengo4com
3
1.3k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
580
怖くない!はじめてのClaude Code
shinya337
0
290
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
Connect 100+を支える技術
kanyamaguc
0
150
フィンテック養成勉強会#54
finengine
0
200
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Optimizing for Happiness
mojombo
379
70k
Done Done
chrislema
184
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Ace a Technical Interview
jacobian
277
23k
GraphQLとの向き合い方2022年版
quramy
49
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How GitHub (no longer) Works
holman
314
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
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