Your SlideShare is downloading. ×
変化に強いインフラを楽して構築するために考えること
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

807
views

Published on

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

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


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

No Downloads
Views
Total Views
807
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×