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

不用品掲示サイトを MicroCMS + NextJS + vanilla-extract で作った話

33ef4c1ebe619115b552db9a9f9a3509?s=47 sadnessOjisan
September 30, 2021

不用品掲示サイトを MicroCMS + NextJS + vanilla-extract で作った話

不用品掲示サイト: https://shop.ojisan.io/

33ef4c1ebe619115b552db9a9f9a3509?s=128

sadnessOjisan

September 30, 2021
Tweet

Transcript

  1. 不用品掲示サイトを MicroCMS + NextJS + vanilla-extract で作った話 @ S A

    D N E S S O J I S A N
  2. 自己紹介 • sadnessOjisan (Twitter, GitHub) • 職業: 実装と型とJSONバリデータをよしなにする人 => 仲介者

    • ブログやってます。 https://blog.ojisan.io • 先月引っ越した
  3. 俺は、

  4. 片付けが、

  5. 苦手!!!

  6. None
  7. None
  8. 使ったことがない

  9. 引越しの荷物が邪魔!!

  10. 捨てたいが、

  11. もったいない

  12. 🤔o0O(フォロワーに引き取ってもらおう

  13. None
  14. 流れちゃう

  15. 一覧で見れるようにしよう

  16. shop.ojisan.io

  17. • CMSから入稿した商品を一 覧できる • それぞれの商品のステータ スを確認できる

  18. • スライドショーで状態を確 かめられる • 規約や、特定商取引法に基 づく表記を確認しないと申 し込めない仕組み • 在庫システムなどを持って るわけではなく、申し込み

    はツイッターなどへのリン クになっていて、僕にDM しないといけないという手 運用 • = 知り合いにしか売らない という条件を担保 • トラブルは嫌なので信頼あ る人だけを対象にしたい
  19. 構成 • MicroCMS + NextJS + vanilla-extract • 成果物は Firebase

    Hosting にホスティング
  20. 構成 入稿 ビルドを トリガー 静的コンテンツの出力 ホスティング Cache 配信

  21. MicroCMS • CMSを選定する必要があり、素振り目的 で導入 • 文句 提言をTwitterに書くと中の人が拾 ってくれて助かる • 保存・編集をトリガーにするGithub

    Actions を生成できるのが助かる • タダで使える https://twitter.com/sadnessOjisan/status/1413417878871699456
  22. NextJS • SSGのツールとして • なぜ Gatsby ではないか • 外部データソースに対する型を引き継ぐのがGatsbyだと難しいため。(gql codegen

    は optional まみれになるのが Not For Me)Nextだと getStaticProps から返す値に zod で型付けできる • SSGは異常系をデプロイ時に落とせるので JSON Validator と相性が良いと考えており、その恩 恵を最大限活かしたかった
  23. vanilla-extract • ZERO runtime CSS in JS • ビルド時に静的なCSSとして吐き出せる •

    JAMStack にする以上は CDN と ブラウザのキャッシュを最大限に活かすべきと考えて いるので、この手の静的なCSSを吐けるツールを採用した • Yet another Linalia を探していることもあり素振りをしたかった
  24. Firebase Hosting • Micro CMS + JAMStack + Zero Runtime

    CSS in JS の組み合わせを考えると Firebase Hosting が非常に相性が良い • CDNのエッジが国内にある • デプロイパイプラインを握れる • MicroCMS のコンテンツ更新をトリガーに GHA を叩く機能を使いたい • Firebase Hosting の最新 CLI には、プレビュー機能と GHA 生成機能が備わっている
  25. お買い上げ待っています。 Site: https://shop.ojisan.io GitHub: https://github.com/sadnessOjisan/shop.ojisan.io