Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LaravelとNuxt.jsを業務で取り入れる際に得た知見

2,693 views

Published on

Laravel/Vue.js勉強会#4

Published in: Engineering
  • Hi there! Essay Help For Students | Discount 10% for your first order! - Check our website! https://vk.cc/80SakO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

LaravelとNuxt.jsを業務で取り入れる際に得た知見

  1. 1. LaravelとNuxt.jsを業務で取り入れる際 に得た知見 株式会社ITプロパートナーズ 戎島功 森山智哉 2018/04/25 Laravel/Vue.js勉強会#4 1
  2. 2. 自己紹介 森山智哉 株式会社ITプロパートナーズ エンジニア Laravel / Vue / Nuxt / Twitter: @frostndays 2
  3. 3. 自己紹介 戎島功(えびすじまいさお) 株式会社ITプロパートナーズ エンジニア Laravel / Vue.js / Nuxt.js Twitter: @isao_x 3
  4. 4. 話すこと 1. プロジェクト概要 2. 認証方法について 3. Nuxt.js 環境設定の読み込み 4. axiosのラッパー 5. 開発の際に役立った便利ツール 4
  5. 5. ・株式会社ITプロパートナーズで新規開発中 ・toC Webサービス ・大規模なSNSみたいなもの 1−1 プロジェクト概要 5
  6. 6. 1−2 技術スタック ・MySQL ・Nginx ・AWS ・AmazonLinux ・Docker ・Git ・PHP 7.1.7 ・Laravel 5.5 ・HTML 5 ・CSS 3/SCSS ・JavaScript/ECMAScript2015(ES6) ・Vue.js 2.9.3 ・Nuxt.js 1.0.0 6
  7. 7. 1−3 サーバー構成 ユーザー 管理者 7 APIサーバー / 管理画面フロント側サーバー
  8. 8. ・Laravel Passportとは APIでログイン認証を行うためのLaravelのライブラリ ・使い方 laravelPassportで使用するTableを生成 認証用のルーティングが自動生成される 2−1 認証方法について 8
  9. 9. 2−2 Laravel Passportでの認証フロー ③ AccessTokenを渡す ① ID/password ④ ヘッダーにAccessTokenをセッ ト ⑤ 認証が必要なぺージにアクセス ② AccessTokenを発行 9
  10. 10. 2−3 Laravel Passport facebook認証 ・使用したライブラリ danjdewhurst/laravel-passport-facebook-login ・使い方 laravelPassportと同様のエンドポイントを使用する ID/passの代わりにFacebookのアクセストークンをPOSTする userテーブルにはfacebookID用のカラムを用意する 10
  11. 11. 2−4 Laravel Passport エンドポイント変更 デフォルトのエンドポイント oauth/token を api/oauth/token に変更 app/Providers/AuthServiceProvider.php public function boot() { $this->registerPolicies(); Route::group([ 'middleware' => 'Barryvdh¥Cors¥HandleCors::class'], function() { $callback = null; $options = [ 'prefix' => 'api/oauth', 'namespace' => '¥Laravel¥Passport¥Http¥Controllers', ]; Passport::routes($callback, $options); }); } 11
  12. 12. 2−5 Laravel Passport トークン有効期限 12 ・有効期限チェック機能の追加 使用するアクセストークンに有効期限を設定 。。が有効期限をチェックして期限切れかどうかを判定する機能は無い ため
  13. 13. 2−5 Laravel Passport トークン有効期限 13 ・有効期限チェック機能の追加 使用するアクセストークンに有効期限を設定 。。が有効期限をチェックして期限切れかどうかを判定する機能は無い ため 有効期限をチェックする機能追加 有効期限が切れていていたらリフレッシュトークンを使用
  14. 14. 2−5 Laravel Passport トークン有効期限 14 public function checkToken(ResourceServer $server, Request $request) { // ヘッダーのアクセストークンを取得 $psr = (new DiactorosFactory)->createRequest($request); $psr = $server->validateAuthenticatedRequest($psr); $reqToken = $psr->getAttribute('oauth_access_token_id'); // 有効期限が切れていないかチェック $accessToken = OauthAccessToken::where('id', $reqToken) ->where('expires_at', '>', Carbon::now()) ->first(); }
  15. 15. nuxt.config.js module.exports = { env: { baseUrl: process.env.BASE_URL || 'http://localhost:3000' } } 3−1 Nuxt.js 環境設定の読み込み 15 通常、Nuxt.jsでは、apiサーバーのurlとか、laravel passportで生成したsecret key とかっていう環境固有の定数をnuxt.config.jsで定義します。 こんな感じです↓(Nuxt.js公式ドキュメントより引用)
  16. 16. 3−2 Nuxt.js 環境設定の読み込み 16 env.js exports.env = { BASE_URL: 'http://localhost:3000', CLIENT_ID: 2, PASSPORT_SECRET: 'dummyMWN3ojUoBUWww5o3w5TrviGbW8BI9Vdummy', }; 今回、Laravelと同じようにenvファイルを用意してそれで定数を管理したいと思 ったので、env.jsというファイルを作って、そこで環境固有の定数を定義しまし た。 こんな感じです↓
  17. 17. nuxt.config.js const env = require('./env.js'); module.exports = Object.assign(env, { … } env.jsをnuxt.config.jsでrequireする 3−3 Nuxt.js 環境設定の読み込み 17
  18. 18. 4−1 axiosのラッパー services/http.js import axios from 'axios'; const axiosBase = axios.create({ baseURL: '', timeout: 10000, headers: { 'Access-Control-Allow-Origin': '*', 'X-Requested-With': 'XMLHttpRequest', }, }); 18
  19. 19. 4−2 axiosのラッパー services/http.js get(url, config = {}) { return axiosBase.get(url, config); }, post(url, data = {}, config = {}) { return axiosBase.post(url, data, config); }, delete(url, config = {}) { return axiosBase.delete(url, config); }, 19
  20. 20. services/http.js axiosBase.interceptors.request.use((config) => { // 特定のURL指定が無い場合のみ、server/client 判定 if (!config.baseURL) { config.baseURL = process.server ? process.env.API_URL_SERVER : process.env.API_URL_CLIENT; } return config; }, error => Promise.reject(error)); 4−3 axiosのラッパー 20
  21. 21. 4−4 axiosのラッパー services/http.js setAuthorizationToken(token) { if (token) { axiosBase.defaults.headers.common.authorization = `Bearer ${token}`; } else { delete axiosBase.defaults.headers.common.authorization; } }, 21
  22. 22. ・Clockwork(ブラウザでのLaravelのデバッグに役立つchrome拡張) https://chrome.google.com/webstore/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp ・sequel-pro-laravel-export(migrationを自動生成するsequelPro拡張) https://github.com/cviebrock/sequel-pro-laravel-export ・SQL to Laravel Builder(SQLからクエリビルダーへ変換するWebサービス) http://www.midnightcowboycoder.com/ ・Vue.js devtools(ブラウザでのVue.jsのデバッグに役立つchrome拡張) https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja 5−1 開発の際に役立った便利ツールなど 22
  23. 23. ・PHPのコーディング規約はPSR-2を採用 https://www.php-fig.org/psr/psr-2/ ・PHPのLintツールはPHP_CodeSnifferを採用 https://github.com/squizlabs/PHP_CodeSniffer 5−2 開発の際に役立った便利ツールなど 23
  24. 24. 5−3 開発の際に役立った便利ツールなど 24 ・ES6のコーディング規約はeslintのeslint-config-airbnbがベース https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb ・vue.jsのコーディング規約はvue.js公式のスタイルガイドがベース https://jp.vuejs.org/v2/style-guide/index.html ・ES6のlintツールはeslintを採用 https://github.com/eslint/eslint
  25. 25. LaravelとVue.js(Nuxt.js)を使ってみて 25
  26. 26. LaravelとVue.js(Nuxt.js)を使ってみて よかった!! 26
  27. 27. おしまい ですが、、、 27
  28. 28. おしまい ですが、、、 ITプロパートナーズではLaravel、Vue.jsで開発したいエンジ ニアを募集しています。 28
  29. 29. おしまい ですが、、、 ITプロパートナーズではLaravel、Vue.jsで開発したいエンジ ニアを募集しています。 ご興味のある方は是非お声掛けください!! 29
  30. 30. おしまい ご清聴ありがとうございました!! 30

×