[レポート] AWS Cloud Roadshow 2017 福岡：【ヌーラボ】Cacoo html5 バージョンにおける AWS 活用事例 #awsroadshow

森永です。

10/31（火）に福岡で開催されているAWS Cloud Roadshow 2017に来ています。
いつもお世話になっているCacooを開発されているヌーラボさんがCacooの裏側話をしていただけるということで聞いてきました。

セッション概要

• タイトル
  • 【ヌーラボ】Cacoo html5 バージョンにおける AWS 活用事例
• スピーカー：
  • 株式会社ヌーラボ 渡辺 信行
• 概要
  • ヌーラボが提供するオンラインドローイングサービス「Cacoo」において、主要機能である編集機能を Flash をベースとしたものから HTML5 をベースとしたものに刷新しました。この移行では、編集機能の画面側の変更のみならず、全体的なアーキテクチャの見直しを行い、バックエンドも含めたチャレンジングな変更も行っています。本セッションでは、この対応の開発期間中に行った、様々なインフラストラクチャーでの工夫や苦労した点をご紹介します。

レポート

• Cacooについて
  • ヌーラボが提供しているビジュアルコラボレーションツール
  • 90%が海外、10%が日本
  • 日本、北米、中国、ヨーロッパ
  • プレゼンテーション作成ツールとしても使える
  • AWSのアイコンを無償提供しているので、構成図を書ける
    • 聴講者の5割がCacoo使用経験あり、2割が構成図をCacooで書いている
• Flash時代
  • ELBで受ける
  • EC2でリバプロ、MQ、PostgreSQLなどを構築
  • モノリシックな構成
• HTML5
  • CloudFrontで受ける
  • ELBではなくALBで
  • DBはEC2からRDSに移行
  • エディタのバックエンドをAmazon ECS上に構築してマイクロサービス化

データストアをRDSへ

• Flash版エディタ
  • 一つの図につき単一テーブル、単一レコード
  • アプリでは扱いやすい
  • データ表示時間かかる、部分保管できない、スケールもしない
• HTML5
  • JSONのツリー構造を3つのテーブル、複数のレコードに分散して保持
  • 初期表示が早い、スケールさせやすい
  • アプリ側での扱いが難しい
• RDS使うまでの変遷
  • CouchDBを使用しようとしたが、Cacooには適さなかった
  • RDBをつかうことに
• EC2上に載せたDBからRDSに一部データを移行
  • DMSを使用
  • FullloadとCDCを使用した
  • ダウンタイムが短くてよかった
• RDSの利点
  • 基本的な構築が不要
  • 運用が楽（バックアップ、アーカイブログ、ディスク拡張）
    • EC2上に立てているDBはアーカイブログが溢れそうになったり問題が
  • チューニングなしでもハイパフォーマンス
  • 将来的にはPostgreSQL互換のAuroraに移行したい（検証環境では移行済み） 　- 移行にはDMSを使う予定

エディタのバックエンドをECS上に構築してマイクロサービス化

• Flash時代
  • 独自の機能を使って構成していた
  • HTML5化するにあたりこれらを使わない設計が必要に
• HTML5
  • エディタ用にRPCというGo言語を用いたRest APIサービスを利用
• マイクロサービスに必要なこと
  • 迅速なプロビジョニング
  • モニタリング
  • 迅速なデプロイ
• ECSの構成要素
  • ECR
    • コンテナイメージリポジトリ
  • Task definition
    • コンテナイメージやCPUやメモリやネットワークポートや環境変数を設定する
  • Service
    • Task definitionやTask数やALBを設定する
• ECSへのデプロイ
  • ECRへのイメージプッシュ
    • git tag release-xxxを契機にJenkinsがbuildし、イメージをECRにpush
  • デプロイ
    • deploy-ecs release-xxxでJenkinsがECSへデプロイ
    • ローリングアップデートする
    • 旧バージョンへの戻しも簡単にできる
• マイクロサービス化の利点
  • サービスの更新が容易
  • セキュリティの更新が容易（コンテナもホストも）
  • 高いスケーラビリティ（オートスケールが可能）
  • 分散開発が容易（福岡とニューヨーク）
  • 好きな言語で開発できる
    • APIはGolang、メッセージングはJava
    • 開発者のモチベに影響
• マイクロサービス化の注意点
  • Dockerコンテナ毎の監視は実装が必要
    • コンテナを監視するコンテナを作ってmackerelにデータ送信
  • 各コンテナのロギング確認しやすい状況の整備が必要
  • サブドメイン単位で管理を集約
    • CORSやOPTIONSリクエストの配慮が必要
  • 個々人の開発環境が混沌とする
    • モノリシックの場合は一つの開発環境でいいが…
• その他
  • マイクロサービスを勧めるにはopsに強い人がチームに何人書いたほうがいい
  • チームがDeveloperだけなら、チーム全体でアプリとインフラを見たほうがいい

その他の共有事項

• CloudFrontのDynamic Site Accelararion
  • Cacheとしてだけではなく、インターネットの経路障害を回避するため導入
  • 通信が近くのエッジを通るので、経路障害を回避できる
  • WebSocketは通らないので注意
• ALB
  • WebSocketをCloudFrontが受け付けないので、ALBで対応
• 募集中
  • フロントエンジニア
  • Goエンジニア

まとめ

HTML5化するにあたり、AWSの構成も大きく変更していることがわかりました。
サービスをAWS上で提供されている企業さんの意見は非常に参考になります。 AWSの構成図を書くならCacooいいですよ！！