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
160
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
150
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
53
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
780
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
460
Other Decks in Technology
See All in Technology
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
590
「Linux」という言葉が指すもの
sat
PRO
4
140
Create Ruby native extension gem with Go
sue445
0
130
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
210
slog.Handlerのよくある実装ミス
sakiengineer
4
470
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
1
110
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
6
750
S3アクセス制御の設計ポイント
tommy0124
3
200
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How STYLIGHT went responsive
nonsquared
100
5.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Designing for humans not robots
tammielis
253
25k
Context Engineering - Making Every Token Count
addyosmani
3
60
Music & Morning Musume
bryan
46
6.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
KATA
mclloyd
32
14k
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