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
270
Cacoo HTML5への移⾏ それにまつわるインフラストラクチャーの再構築 / Cacoo HTML5 Restructure infrastructure
2017年9月21日(木)に、Cacooのプロダクトオーナー平山が登壇した、日本MSP協会さんの主催する「MSPJ 福岡インフラ勉強会」の資料です。
株式会社ヌーラボ
PRO
September 21, 2017
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
サクフェス2024_ヌーラボ原_CSと開発
nulabinc
PRO
0
5
チームの力を成果に変える、次世代のマネジメント術 〜中小企業の生産性革命〜
nulabinc
PRO
0
26
チームワークマネジメントとは
nulabinc
PRO
0
8
チームの未来を支えるバックログスイーパーという役割
nulabinc
PRO
0
6
ヌーラボが取り組む RevOpsのこれまでとこれから
nulabinc
PRO
1
140
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
140
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
52
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
780
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
450
Other Decks in Technology
See All in Technology
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
760
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
120
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
220
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
230
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
KotlinConf 2025_イベントレポート
sony
1
120
Obsidian応用活用術
onikun94
1
470
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
540
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
300
Agile PBL at New Grads Trainings
kawaguti
PRO
1
400
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
1
470
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Side Projects
sachag
455
43k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Code Review Best Practice
trishagee
70
19k
The Cult of Friendly URLs
andyhume
79
6.6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
BBQ
matthewcrist
89
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
330
21k
It's Worth the Effort
3n
187
28k
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