FuelPHP活用事例
- 1.
- 2. 自己紹介 ! 仲 裕介（なかゆうすけ / @Tukimikage ） ! NTTコミュニケーションズ所属 ! R&Dな部署にいます ! http://html5lab.ntt.com/ ! オフィシャルワーク ! HTML5 Experts.jp 副編集長 ! WebRTC BaaS SkyWay 中の人 ! コミュニティーワーク ! FuelPHP&CodeIgniter ユーザの集い 共催 ! WebRTC Meetup Tokyo 共催 ! html5j自動車部 部長
- 3. 今日話すこと ! WebRTC開発者向けプラットフォーム「SkyWay」でのFuelPHP活用事例 ! SkyWayの概要 !FuelPHPをどこで利用しているのか ! 開発体制 ! 開発環境 ! FuelPHP活用事例 ! プロジェクト作成 ! プロジェクト構造 ! 実装ポイント（８個） ※ 実際のソースコードなんかもお見せしながら進めます
- 4.
- 5.
- 6.
- 7. WebRTCとは？ ! ひとことで言うと「ブラウザでテレビ電話を実現する技術」 ! ブラウザだけで、プラグインのインストール無しに、Web会議、ボイスチャット、 テキストチャット、ファイル転送、電話との連携等が実現可能。 Web WebRTC
- 8. SkyWayとは？ ! WebRTC利用アプリを簡単に開発できるクラウド基盤 ! 2013/12/5提供開始 ! 無料！ ! 提供内容 ! Signaling API ! STUN API ! クライアントライブラリ ! 開発者ドキュメント ! サンプルアプリ ! 開発者向けダッシュボード https://skyway.io NAT NAT STUN API Signaling API STUN API Peer to Peer SkyWay
- 9. ちょっと宣伝・・・ ! WebRTC ConferenceJapan ! 日本初のカンファレンス！ ! エンジニアは無料！ http://webrtcconference.jp/
- 10.
- 11. ! 開発者向けダッシュボードの開発に利用 ! バックエンド開発 ! FuelPHP Ver 1.8-Dev ! 開発当初は 1.7.1 ! ORM:FuelPHP Orm Package ! Auth Package:Ormauth ! Test：phpunit+Gutte ! フロントエンド開発（SPA） ! Lang：TypeScript ! UI-FW:JsRender,Bootstrap ! CSS：SCSS ! Other；Jquery ! Test：Mocha+chai ! TaskRunner:Grunt
- 12. SkyWayシステム構成 ! クラウド環境上にホスティング（概略） RevProxy Signaling&STUN DB Monitoring etc AP Front Seg Back Seg Hosted by Cloudn VPC Type http://www.ntt.com/cloudn/data/server3.html Usergrid
- 13. FuelPHPに関係するサーバ ! クラウド環境上にホスティング RevProxy Signaling&STUN DB Monitoring etc AP Front Seg Back Seg Hosted by Cloudn VPC Type http://www.ntt.com/cloudn/data/server3.html FuelPHP製ダッシュボードアプリを設置 WebSever : nginx+php-fpm DB : MySQLフロントにnginxを 設置 Usergrid APがRestAPI叩 かれます APからRestAPI 叩かれます
- 14.
- 15.
- 16.
- 17.
- 18. 開発環境 Provision サーバ Stage(本番擬似環境) Test (インテグレーション) Production (本番環境) Dev（ローカル開発環境） 開発マシン Pull / Push 運用監視 PM系 Pull Request Builder (PRトリガ) 障害通知 内製 Cloud Formation ぽいやつ メール 送信擬似 通知 CI環境
- 19. ローカル開発環境 ! 開発マシン：Mac ! ディスプレイは縦置きでｗ ! IDE：Intellij IDEA ! エンジニアの能力をみるみる奪っていくｗ ! DB操作も楽ちん ! 環境：Vagrant+Chefで開発環境を構築 ! なんだかんだ言って最初の構築は大変 ! ChefはAnsibleに移行中
- 20. CI環境 ! Jenkins ! はずせませんが、プラグインとの相性とかオンプレで立てると色々あるね ! GitHub Enterprise ! 高いけど便利ですね、やっぱり便利 ! Chef ! 重量級でヘビー ! Ansible ! Chefから移行中 ! http://techracho.bpsinc.jp/yamasita-taisuke/2014_05_29/17567 ! expect ! やらなければよかった・・・ということで、AnsibleかFabricに移行予定
- 21. クラウド環境 ! 自社サービスCloudn ! 安くて便利 ! トラフィック課金なし ! AWS互換のAPI提供 ! ただいまキャンペーン中 http://www.ntt.com/cloudn/index.html
- 22.
- 23. FuelPHPとは（おさらい） ! PHP製Webフレームワーク ! 1系はPHP5.3.3以上（2系はPHP5.4以上） ! MITライセンス ! 日本語ドキュメントや書籍多数 ! 機能 ! HMVC ! RestAPI用コントローラー ! ORM ! DB Migration ! Auｔｈパッケージ等のパッケージ管理 ! 各種脆弱性対策 ! テンプレートエンジン ! Composer対応（2系ではフルサポート） ! oilコマンドによるスキャフォールディング ! コマンドラインでのタスク実行機能 ! PHPUnitを統合
- 24.
- 25. プロジェクト作成 ! 開発当初FuelPHP1.7.1だったので・・・ ! chatiiさんのfuelphp_setupを利用してcomposerでインストール ! https://github.com/chatii/fuelphp_setup ! その後、開発中にv1.8-devまでバージョンアップ ! バージョンアップは php composer.phar update で。
- 26. プロジェクト構造 Rest Controller :SPAのバックエンド向け Controller：SPA以外のページ向け ORM Modelベースにカスタマイズ ４つの環境用にコンフィグを管理 アプリケーションのコンフィグはひとつにまとめる 管理者向けのツールはoil taskで用意 単体テストはPHPUnit 機能テストはGoutte+PHPUnit SPAベースとなるViewファイル、SPA以 外のViewファイルを用意 SPA開発用関連ファイル JSとかCSS DBはmigrationで世代管理
- 27.
- 28. ユーザ認証 ! ormauthを利用 ! ORMでデータベースアクセスするので親和性がいい ! かなりのテーブルが作成されるけど殆ど使わない ! ID or メールアドレス/パスワードではなくメールアドレス/パスワー ドでログイン出来るように運用対処 ! SNS連携 ! Opauthを利用する予定（まだ実装できてない）
- 29. コンフィグファイル管理 ! アプリケーションに関するコンフィグは１つにまとめる !config.phpのAutoloadでカスタムコンフィグを指定 ! ４つの環境でコンフィグ管理 ! development : ローカル開発環境 ! test ： インテグレーション環境 ! stage ： ステージング環境 ! production ： 本番環境
- 30. ルーティング ! ルーティングは見栄え良くｗ ! コントローラー名は隠す ! RestAPIはプロトコルで振り分け
- 31. テスト ! 単体テストはPHPUnitで ! テストグループをなるべく細かく分けてデバッグしやすいように ! ただ、例外が発生した時のデバッグ作業はマジ大変・・・ ! だれか良い方法教えて下さい。 ! コントローラーのテストはGoutteで ! SPA部分以外はGoutteでスクレイピングしてテストする ! RestAPIもGoutteでテスト ! 戻ってくるjsonはseek(0)してgetContents()しないと取得できないので注意
- 32. タスク ! 管理者向け機能は最小限にtaskで実 現 ! 日常の些細なこともタスクにしておくと楽 ちん・・・ ! Cliクラスでコマンドラインの対話型プロ グラムも簡単に 例えば、Authパッケージのディフォルトユーザを削除するとか
- 33. セキュリティ ! SPA時代のセキュリティ !RestAPIのサニタイジング ! Fuelphpは出力エンコーディング（サニタイジング）を前提にしている ! View出力する値はSecurity::htmlentities()でフィルタされる ! RestAPIの戻り値はフィルタされない ! SPAが主流になるこれからの時代必須→今回は手動で。 ! RestAPIのリクエスト・レスポンスでCSRFトークンの更新を行う ! SPAで画面遷移が無いため、RestAPIアクセスを契機にトークンの更 新を行う
- 34.
- 35. フロントエンド開発との連携 ! SPAの登場 ! サーバサイドレンダリングからクライアントサイドレンダリングへ ! 様々なフロントエンドフレームワークの登場でクライアントがリッチに ! タスクランナーやビルドツールなどの台頭 ! 設計など課題も多い ! SPAを構築するときに知っておいた方がいい7つの課題 http://blog.mitsuruog.info/2014/01/spa7.html
- 36. フロントエンド開発との連携 ! 今回、開発する上であがった課題 ! プロジェクト上のFuelPHPとSPAの同居方法 ! ページごとの実装方針（SPAかサーバサイドレンダリング） ! テストの棲み分けはどうするか ※ 今回の開発ではフロントエンド開発にはTypeScript、SCSS、jsRenderを利用
- 37. 課題１：プロジェクト上のFuelPHPとSPAの同居方法 開発フローとフォルダ構造 1) 開発用ファイルはscriptsディレクトリへ設置し開発 2) IDEでビルドし、public/assets/(cssor js)/src内に出力 3) gruntでそれらをminify・結合し、public/assets/(css or js)/ distに出力 １ ２ ２ ３ ３ １ TSファイル等をfuelディレクトリの外に置くことで、そ のままデプロイしてもインターネットからアクセスされ ることを防ぐ。（ルートはpublic/なので）
- 38.
- 39. 課題２：ページごとの実装方針（SPAかサーバサイドレンダリング） ! どのページをSPAにするかサーバサイドレンダリングにするか ! 今回はログインで分けた ! ログイン認証前はサーバサイドレンダリング ! ログイン後はSPA
- 40. 課題３：テストの棲み分けは？ ! サーバサイドテストとクライアントサイドテストの役割 ! 役割として重複してしまうこともあるので役割分担が必要 ! サーバサイド ! ユニットテスト：Modelの実装を確かめる ! 機能テスト：Controllerの実装を確かめる ! サーバサイドレンダリング部分はスクレイピングを行いUIテストも兼ねる ! クライアントサイド ! ユニットテスト：functionの実装を確かめる ! セッション管理されているRestAPIなどのテストは工夫が必要 ! サーバサイドの機能テストとかぶるので諦めてもいいかも ! UIテスト：SPAに関係するUIの動きを確かめる ! seleniumとか使うと幸せに
- 41. フロントエンド開発との連携 ! 環境変数をサーバサイドとクライアントサイドで一元化し活用 ! development環境だとjavascriptやCSSはminify前のモノを読み込む ! Viewのテンプレートを出し分ける ! javascriptのconsole.logの表示非表示を切り替える
- 42. まとめ ! WebRTC開発者向けプラットフォーム「SkyWay」でのFuelPHP活用事例 ! SkyWayの概要 !FuelPHPをどこで利用しているのか ! 開発体制 ! 開発環境 ! FuelPHP活用事例 ! プロジェクト作成 ! プロジェクト構造 ! 実装ポイント（８個）