Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js + Nuxt.js を使ってB2Cサービスを作った話

H
March 12, 2018
5.6k

Vue.js + Nuxt.js を使ってB2Cサービスを作った話

H

March 12, 2018
Tweet

Transcript

  1. 若松 良(Wakamatsu Hisashi) Front-end engineer 経歴 - 大学卒業後、映像制作に携わる - 2012年にCAに中途入社

    - フロントエンドエンジニアとして複数サービスの立上げ、運用に携わる - 1年半程前から女性向けメディア「 by.S」の運用を担当 自己紹介
  2. Vue.js + Nuxt.js について調べた結果 Positive Negative 肝心のNuxt.jsがrc版 色々備わっているが、拡張性は? 社内、社外を見渡しても、中・大規模な B2Cサービスでの開発実績がほとんどな

    い Vue.jsはバックボーンが企業ではない Vue.js自体、パフォーマンスに優れている Nuxt.jsは公式に推奨されている 簡単にSSR + SPAを実現できる 日本語ドキュメントが豊富
  3. pages/  ├ announcement/  ├ brand/  ├ category/  │ └ _id/  │   └

    _page.vue  └ item/ ディレクトリ構成がそのままサイトの パスとして反映される。
  4. app.get('/auth/facebook', passport.authenticate('facebook')); app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/login' }), function(req, res)

    { res.redirect('/login/sns'); }); app/server.js 特定のURLをトリガーにしてサーバ側で 何らかの処理を実行したい場合
  5. import express from 'express'; import { Nuxt, Builder } from

    'nuxt'; let app = express(); const nuxt = new Nuxt(nuxtConfig) app.use(nuxt.render) app/server.jsv Express上で、Nuxt.jsを ミドルウェアとして使う https://github.com/nuxt-community/express-template
  6. app.use(session({ store: new RedisStore({ port: *****, host: config.elasticacheEndpoint, ttl: COOKIE_EXPIRATION_DATE,

    db: 0 }), secret: SESSION_OPTION_SECRET, resave: true, saveUninitialized: true, cookie: { maxAge: COOKIE_EXPIRATION_DATE } })); app/server.js Redis等のデータストアも問題なく 利用できる
  7. SSR時のライフサイクルメソッドでサーバサイド特有のオブジェクトにアクセ スする時には、判定を入れる必要がある。 export default function (context) {  const currentPath =

    context.req.url;  context.permalink = context.env.baseUrl + currentPath; } middleware/context-data.js export default function (context) {  const currentPath = process.server ? context.req.url : context.route.fullPath;  context.permalink = context.env.baseUrl + currentPath; } middleware/context-data.js
  8. v1.4.0 Atinux released this an hour ago v1.3.0 Atinux released

    this 29 days ago · 86 commits to dev since this release v1.2.0 Atinux released this on 26 Jan · 111 commits to dev since this release v1.1.0 Atinux released this on 13 Jan · 182 commits to dev since this release v1.0.0 Atinux released this on 9 Jan · 209 commits to dev since this release v1.0.0-rc11 Atinux released this on 7 Sep 2017 · 712 commits to dev since this release nuxt/nuxt.js v1.0.0リリース以降も頻繁にアップデートを重ねている
  9. context.isClient has been deprecated, please use process.client instead. context.isServer has

    been deprecated, please use process.server instead. v1.0.0 Atinux released this on 9 Jan · 209 commits to dev since this release v1.0.0-rc11 Atinux released this on 7 Sep 2017 · 712 commits to dev since this release nuxt/nuxt.js アップデートのタイミングでWarningが出ることも
  10. apollo-module.js Update to v1 of NUXT dohomi released this on

    9 Jan · 17 commits to master since this release Upgrade apollo-client and vue-apollo dohomi released this on 8 Nov 2017 · 36 commits to master since this release v2.1.1 Atinux released this on 15 Sep 2017 · 45 commits to master since this release apollo-module.jsもアップデートする必要があり、 気づいたらインターフェースも結構変わっていた。
  11. 1. ライフサイクルが入り組んでいる    SSR + SPAのライフサイクルを予め理解しておく 2. ライブラリの新陳代謝が激しい      小まめにアップデートする

    3. その他 - ホットリローディングにかかる時間がかかるようになってきた    ※ コンポーネントの量産が影響してそう 困ったこと
  12. - 結局「SSR + SPA」を低コストで実現できた - 開発コストの削減、パフォーマンス発揮という点を鑑みても採用した ことに満足している - SSRしなくてもメリットは十分あると思う -

    継続的にNuxt.jsの開発が行われるのであれば、今後、他の新規プ ロジェクトの技術選定においても有力な選択肢になりうると思う。 結果として