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 株式会社ヌーラボ
ヌーラボが取り組む RevOpsのこれまでとこれから
nulabinc
PRO
1
65
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
46
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
37
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
730
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
370
僕たちは何を守っているのか?ビジネスを守る、ヌーラボのセキュリティ実践
nulabinc
PRO
1
77
Snowflake九州ユーザー会
nulabinc
PRO
0
69
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
1.1k
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
450
Other Decks in Technology
See All in Technology
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.3k
TLSから見るSREの未来
atpons
2
310
無理しない AI 活用サービス / #jazug
koudaiii
0
100
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Building Adaptive Systems
keathley
43
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Done Done
chrislema
184
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Side Projects
sachag
455
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing for Performance
lara
610
69k
Into the Great Unknown - MozCon
thekraken
40
1.9k
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