変化に強いインフラを楽して構築するために考えること

1,080
-1

Published on

MTCafe Tokyo 2013 Spring にて発表した資料です。

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,080
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

変化に強いインフラを楽して構築するために考えること

  1. 1. 変化に強いインフラを楽して構築するために考えることMTCafe Tokyo 2013 Spring柳下 剛利
  2. 2. 「ウェブサイトのアプリ化」このビッグウェーブに臆するな!!
  3. 3. アプリ化が進む背景 (1)•多様な要望・要件に応えるためにはインタラクティブな処理が不可欠- よりスマートな入力フォーム- 業務システムからデータを取得してCMSで表示- 検索機能を使った商品一覧ページの表示
  4. 4. タックスイノベーション様 http://www.f-tax.com
  5. 5. アプリ化が進む背景 (2)•モバイル・オフラインファースト- スマートフォン・タブレットに最適化されたUX•HTML5に代表される技術の普及- jQuery- node.js- backbone.js・AngularJSのJS Framework
  6. 6. AngularJSとは•Google開発のJS MVC Framework- テンプレート (HTML) とデータ (JS) を明確に分離- 双方向データバインディング{{xxxx}}: データを表示- jQueryよりもコード量が少なく直感的- CRUD系やシングルページアプリに最適
  7. 7. <div><input  type="text"  name="Phone"  ng-­‐model="inquiry.phone"  required  ng-­‐pattern="/^[0-­‐9]+$/"  /><span  ng-­‐show="inquiry.Phone.$error.required">(required)</span><span  ng-­‐show="inquiry.Phone.$error.pattern">(numeric  only)</span></div><div><input  type="email"  name="Email"  ng-­‐model="inquiry.mail"  required  /><span  ng-­‐show="inquiry.Email.$error.required">(required)</span></div>
  8. 8. デザインインフラアプリ 優れたUX
  9. 9. 変化に強いインフラの条件•インタラクティブなアプリ操作•トラフィックの変化•様々な要件に応えられる
  10. 10. インフラ構築のための3原則•HTTPの特性を理解した構成•ウェブサーバーの負荷を考慮した構成•クラウド技術を利用
  11. 11. HTTPの特性からみたパフォーマンス向上•転送するファイル数を減らす•転送するファイルのサイズを減らす•キャッシュを最大限に利用する(リクエスト数を減らす)
  12. 12. 転送するファイル数を減らす•JS/CSSファイルをまとめる•CSSスプライトを利用する•Data URI schemeを利用する
  13. 13. 転送するファイルのサイズを減らす•regex_replaceモディファイアの利用•minifierプラグインhttps://github.com/alfasado/mt-plugin-minifier•gzip圧縮で転送
  14. 14. キャッシュを最大限に利用する•スタティックコンテンツ- Cache-Controlヘッダによる有効期限の設定•ダイナミックコンテンツ- Last-Modifiedヘッダによる条件付きGET利用
  15. 15. ウェブサーバーの負荷を考慮した構成•スタティックとダイナミックで分離•特性を意識して分離
  16. 16. スタティックコンテンツ•nginxの利用- 高速ウェブサーバ- リバースプロキシサーバ•画像・動画・PDF等のアイテムは別- Six Apartをはじめに中・大規模なサイトは実施- 転送量を意識した結果
  17. 17. ダイナミックコンテンツ•リバースプロキシの配下で別プロセス- Movable Type: PSGI/Starman- PHP: FastCGI/php-fpm- Apache
  18. 18. クラウド技術を利用するメリット•早い: 短期間で構築が可能•安い: 事業者によってはVPS+α•うまい: 要件にあった環境構築が可能
  19. 19. クラウド事業者別の特長•月額固定料金- GMOパブリッククラウド- Movable Type EZ•従量課金- Amazon Web Service- Windows Azure
  20. 20. GMOパブリッククラウド•仮想CPU・メモリ・ディスク等のリソース単位で課金 (月額固定)- DISK 60G/CPU 24C/MEM 8G: 月2万円強- DISK 40G/CPU 2C/MEM 4G: 月5千円弱•リソース変更時に再起動が不要•ビジネスパートナー制度 (CB)
  21. 21. Movable Type EZ•MTの最新版が利用可能•メンテナンスフリー•カリカリにチューニングされており要件に依存
  22. 22. Amazon Web Service•トータルバランスに優れている•CDPを利用して様々な構成に対応可能•全世界のDCを使って構築可能•料金はすべて自前で用意するより安い
  23. 23. Windows Azure•Windows/Linuxが利用可能 (IaaS)•バックアップに強い (最低でも3段)•クセやお作法に慣れると楽•全世界のDCを使って構築可能•AWS並の運用コスト (従量課金)
  24. 24. MTに適した構築への提案•クラウドサービスを利用•開発・検証・本番環境を用意•目的別にディレクトリを整理•アイテムの利用可否を検討•SFTPやメール等もしっかり整備
  25. 25. 目的別ディレクトリ•書き込みがないディレクトリ- アクセス制限が必要 (望ましい) ディレクトリ- アクセス制限が不要なディレクトリ•書き込みが必要なディレクトリ
  26. 26. 書き込みがなくアクセス制限が必要•MT管理画面 (AdminCGIPath)•mt-static
  27. 27. 書き込みがなくアクセス制限が不要•コメントやトラックバック、検索等の管理画面以外のCGI (CGIPath)
  28. 28. 書き込みがあるディレクトリ•サイトディレクトリ•サポートディレクトリ- mt-static/supportを別ディレクトリに•テンポラリディレクトリ•その他
  29. 29. まとめ•デザイン+アプリ+インフラ=UX•HTTPの特性を理解した上で目的別にウェブサーバーを配置•クラウドサービスを利用することで楽に構築可能
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×