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

mtmtkzm-nuxt-meetup6.pdf

C1e0debdf9a011fe8ce4884e048298ff?s=47 mtmtkzm
December 06, 2018

 mtmtkzm-nuxt-meetup6.pdf

NuxtMeetup#6 のLTスライドです。
https://nuxt-meetup.connpass.com/event/107759/

maner|EXIFを同時に見ることができる写真ギャラリーサイト
https://maner.gallery

C1e0debdf9a011fe8ce4884e048298ff?s=128

mtmtkzm

December 06, 2018
Tweet

Transcript

  1. Nuxt で写真ギャラリーを作った話 + α NuxtMeetUp#6 @mtmtkzm 1 / 38

  2. LIVE RELEASING 2 / 38

  3. event-stream flatmap-stream 3 / 38

  4. event-stream flatmap-stream npm ls event-stream flatmap-stream を実行して、 └─(empty) と出力されれば依存なし! 4

    / 38
  5. 5 / 38

  6. 6 / 38

  7. 7 / 38

  8. 8 / 38

  9. そう、彼が LIG の 凄腕ディレクター 北川パーヤン です。 9 / 38

  10. LIG も彼も、何も悪さはしてません 10 / 38

  11. 松本 和馬 / ライダー 株式会社LIG Web事業部 フロントエンドエンジニア https://mtmtkzm.com (Nuxt 製!)

    93年生 / 25才 はじめまして、ライダーです 11 / 38
  12. はじめまして、ライダーです Nuxt/Docs のタイポや冠詞抜けを修正していたら、 12 / 38

  13. はじめまして、ライダーです Nuxt/Docs のタイポや冠詞抜けを修正していたら、 13 / 38

  14. Nuxt で写真ギャラリーを作った話 14 / 38

  15. 15 / 38

  16. 動機 技術の勉強の実験場として エンジニアとして「顔」がほしかった 写真に興味があった(= 欲しいものだった) 16 / 38

  17. SSR(サーバサイドレンダリング) 写真詳細ページのルーティング /_id/ Flickr API 経由で人気写真を取得し、一覧 人気写真のIDを返すAPIがある 写真に紐づくEXIFを取得し、一覧 IDに紐づいたEXIFを返すAPIがある EXIFの値によってフィルタリングしたり...

    17 / 38
  18. 18 / 38

  19. serverMiddleware 便利かも! 19 / 38

  20. serverMiddleware 便利かも! Nuxt に API(/api/ )を作成した それ用のサーバいらない 環境変数とか使いまわせる BFFとして扱える module.exports

    = { serverMiddleware: ['~~/api/'], 20 / 38
  21. ディレクトリを分割した! /api/ を作ったついでに、 21 / 38

  22. ディレクトリを分割した! /api/ を作ったついでに、 module.exports = { srcDir: 'client/', . ├──

    README.md ├── api ├── client ├── node_modules ├── nuxt.config.js ├── package-lock.json ├── package.json └── server 22 / 38
  23. ディレクトリを分割した! /api/ を作ったついでに、 module.exports = { srcDir: 'client/', . ├──

    README.md ├── api <-------- さっきの serverMiddleware ├── client <-------- pages, assets... 等が入る ├── node_modules ├── nuxt.config.js ├── package-lock.json ├── package.json └── server 23 / 38
  24. state は function を返しましょう ストアを有効にする サーバーサイドで不要な共有状態を避けるため、state の値 は常に function でなければなりません。

    24 / 38
  25. state は function を返しましょう ストアを有効にする サーバーサイドで不要な共有状態を避けるため、state の値 は常に function でなければなりません。

    const state = { ... } ↓ const state = () => { return { ... } } 25 / 38
  26. Heroku へデプロイ 26 / 38

  27. Heroku へデプロイ 27 / 38

  28. OK, 全部やったぜ 28 / 38

  29. 君だけを残して... 29 / 38

  30. git push heroku master 30 / 38

  31. というわけで、 31 / 38

  32. LIVE RELEASING 32 / 38

  33.  LIVE RELEASING   33 / 38

  34.  LIVE RELEASING                

      34 / 38
  35. 35 / 38

  36. maner.gallery 36 / 38

  37. \ ありがとうございました / 無事,リリース出来たのかな... NuxtMeetUp#6 @mtmtkzm 37 / 38

  38. もしよければ 我が子 maner をシェアお願いします maner.gallery 38 / 38