mtmtkzm-nuxt-meetup6.pdf

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

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

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