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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

森永です。

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

セッション概要

  • タイトル
  • スピーカー:
    • 株式会社ヌーラボ 渡辺 信行
  • 概要
    • ヌーラボが提供するオンラインドローイングサービス「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いいですよ!!