“OSCキャラクター大集合”を支えるMODX

1,479 views

Published on

“OSCキャラクター大集合”を支えるMODX 〜
スマホ500台の負荷に耐えるシステム作り〜
オープンソースカンファレンス2014 Tokyo/Spring Days1

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,479
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

“OSCキャラクター大集合”を支えるMODX

  1. 1. “OSCキャラクター大集合”を支えるMODX 〜スマホ500台の負荷に耐えるシステム作り〜 MODX Japan PR Manager Kei Mikage < kmikage@modxcms-jp.com >
  2. 2. にゃん ぱすー! よくいらしたのん。
  3. 3. アジェンダ • OSCキャラクター大集合って? • 投票システムって? • 今回のMODXの使い方 • フロントエンドの作り方 • バックエンドの作り方 • パフォーマンスチューニング
  4. 4. I’m MODX PR Manager. 御影けい / Kei Mikage • MODX Japan PR Manager / 広報担当 • 普段はしがないインフラエンジニア • 誰か時間ください…
  5. 5. OSCキャラクター大集合
  6. 6. 人大杉…
  7. 7. ニコ生…
  8. 8. はじまりは1/31… • 渋谷某所にて ミーティング • 座敷わらしは 居なかった。 • 色々もめた末、 「OSSで 投票システム作ろう」 と言ってしまい、 自分のタスク増えた。 OTL…
  9. 9. 要件定義 • 各キャラクターに投票 • 持ち点制 • 500ユーザくらいアクセスしてくるかも。 – 会場300人 – ニコ生200人
  10. 10. 一般的なCMS 一般的なCMSをコンポーネント化すると、次スラ イドのようになると思います。 今回、MODXの各コンポーネントの『使い方』を カスタマイズしています。 具体的には、キャッシュエンジンをほぼ無効化 しテンプレートエンジンとして使用、リッチテキス トエディタの無効化等。
  11. 11. 一般的なCMS コア 管理画面 キャッシュ (テンプレート) エンジン RTE CMS
  12. 12. 今回のMODXの使い方 コア 管理画面 キャッシュ (テンプレート) エンジン 外部プログラ ム 自作コード CMS
  13. 13. 要するに 管理画面付き PHPフレームワーク
  14. 14. MODXのカスタマイズ 1. リッチテキストエディタの無効化 2. CSSを動的生成 3. キャラクターをデータベース化 4. APIを使用して独自のコードを実装
  15. 15. 1.RTEの無効化
  16. 16. 1.RTEの無効化 【メリット】 • コードがきれい • 軽い • 自由にコーディングできる 【デメリット】 • プレビューできない
  17. 17. おまけ:TinyMCEを有効化すると
  18. 18. 2.CSSの動的生成 • MODXの仕組みを上手く使うことで、 CSSを動的に生成する事ができます。 • 今回はスマホ対応の為に 動的生成しましたが、 他にも使い方はあると思います。
  19. 19. 2.CSSの動的生成 専用テンプレートの作成 [*content*]とだけ書かれたテン プレートを作ることで、書いたコン テンツをそのまま出力する事がで きます。
  20. 20. 2.CSSの動的生成 URLの書き換え (alias) MODXのエイリアスは、拡張子 が指定された場合はそちらが 優先されます。
  21. 21. 2.CSSの動的生成 チャンク・スニペットの挿入 チャンク(値の置き換え)、スニペット(PHPコードの結果の置き 換え)を使用して、必要な内容をCSSに挿入します。
  22. 22. 2.CSSの動的生成 CSSをCMSで管理する副産物として、 DreamweaverやChromeで修正したCSSを、 FTP等で毎回アップロードしなくても良いメリット があります。 今回、FTPを使用しない事により、 かなり開発効率がアップしました。
  23. 23. 3.キャラクターのデータベース化 • MODXは、特定の階層以 下のコンテンツをデータ ベースのレコードとして 扱う事ができます。 • これは、Dittoというスニ ペットにより実装されてい ます。
  24. 24. カスタムフィールド
  25. 25. 3.キャラクターのデータベース化 • カスタムフィールド(テンプレート変数)を使用するこ とで、ページの項目を自由に増やす事がで きます。 • Dittoでは、これらカスタムフィールドについ てもデータベースとして扱う事ができます。
  26. 26. 3.1. Dittoとは? • MODXの機能の1つで、コンテンツ(リソース)を データベースとして使用するができる機能で す。 • 一般的なSQL文やAccess等のRDBが理解でき ていれば、それほど難しくはありません。 (記述に方言があるので、そこは…)
  27. 27. 3.キャラクター情報のデータベース化 • 標準の入力項目をすべ て表示すると管理画面 が使いづらくなるので、 ManagerManagerを使っ てカスタマイズします。
  28. 28. 4. APIを使用して独自のコードを実装 • MODXには、 MODX API($modx)という仕組みがあり、 PHPのコードから容易にMODXの機能を 呼び出す事ができます。
  29. 29. MODX APIの例 ■指定したチャンク(GUIで管理する変数)を呼び出す $modx->getChunk('default_comment’) ■指定したページ以下の特定の項目を呼び出す。 $modx->getAllChildren ($tpl, 'pub_date', 'ASC', 'id, longtitle, alias'); その他、沢山APIはありますが、 ドキュメント整備が追いつかないのが 現実です。
  30. 30. その他、使用したライブラリ • TimThumb.php サムネイル生成。 端末ごとに画像サイズを変更する用途で使用。 • MobileDetect スマホ・PCブラウザ機種判別モジュール。 https://code.google.com/p/php-mobile-detect/
  31. 31. 全体の構成 MODX 自作コード timthumb DataBase MobileDetect ブラウザ MOD API PDO Class
  32. 32. 次に インフラの話
  33. 33. ツナ缶とか鯖管とか大事。
  34. 34. “なれる!SE”読もうね!!! ツナ缶とか室見さんとか とーーーっても大事!!!
  35. 35. 時に… • CMSって色々ありますが、 一般的には車に例えるとわかりやすいです。
  36. 36. じゃあMODXは? スーパーカブという、 とにかく壊れない、 とにかく燃費が良い、 小回りが効く、 そしてとにかく安い、 よくわからないバイクです。 THE・日本のバイク
  37. 37. しかし、カブは小回りが効く代わりに、 一回に運べる量には限界があります。
  38. 38. 普通これくらいが限度。
  39. 39. では、カブを使って、 小回りの効きを残しつつ、 沢山宅配するには?
  40. 40. THE・新聞配達
  41. 41. これをコンピュータの世界では、これを… クラスタリング …といいます。
  42. 42. 今回のサーバ構成 DB/NFS Web Web Web LB LB – 1台 Web – 8台 DB/NFS – 1台 管理用 – 1台
  43. 43. • LB – ロードバランサ – 大量の負荷を複数台のサーバに分散するサー バ • Web – Webサーバ、PHPアプリケーションを実行する • DB/NFS – データベース(MySQL)、ファイルサーバ
  44. 44. セッションクラスタリング • 負荷分散した場合、セッション(Cookie)の内 容を複数台のサーバで同期する必要があり ます。 • これをセッションクラスタリングといいます。 • 今回、PHPのセッションファイルをNFSで共有 することで解決しました。
  45. 45. サーバの大量生産 • 一部クラウド等では、稼働中のサーバのディ スクをコピーする事が可能な為、正直問題に なりません。 • 一部物理サーバでは、稼働中のディスクを人 力でコピーする事により、同等の運用が可能 です。
  46. 46. VPSとか どうするのん?
  47. 47. シェル書きました。 ConoHaデフォルトのCentOS6.4に対し、 自動でWebサーバのミドルウェアの展開・Config の展開等を行うスクリプトを作成しました。 約100行のスクリプトを作ることにより、 1台あたりの構築時間10分程度まで短縮。 テスト含めサーバ10台程作ったため、 約100分程まで作業時間を短縮。
  48. 48. パフォーマンスチューニング ストレステストを行い、パフォーマンスをきちんと 計測することで、システムの不調や限界を予め 知る事ができます。 今回は、CAT MEDSさんを使用しました。 https://catmdes.com/
  49. 49. 当初のパフォーマンス
  50. 50. 当初のパフォーマンス ここから明らかにおかしい!!!
  51. 51. 原因:MySQLのmaxconnection • MySQLの標準のコネクション数は100。 • MAX Connection まで使い切ったところで、 コネクションの取り合いになり、パフォーマン ス悪化。 • 最終的にmaxconnection=1000まで拡大。 • その他、細かな修正を行う。
  52. 52. 最終的なパフォーマンス 同時アクセス数:100〜150くらい エラー率:0.00%
  53. 53. その他、施したチューニング • MySQLバージョンアップ(5.0→5.6) • MySQL スレッドキャッシュ有効化 • NFSサーバの設定デバッグ • WebServerにAPCの導入
  54. 54. そんな感じです。
  55. 55. 13歳の座敷わらし いいよ。 (OSS開発に是非!)
  56. 56. おわりに またOSC 来てね!!!
  57. 57. おわり

×