はじめに
私は25卒の文系大学生です。
現在はベトナムの受託開発企業でインターンとしてサーバーサイド開発をしています。
12月になり、リモートですが日本企業の就職面接やレジュメを出さなければいけないという事態になり、どうにかサクッとブログを作りたいなと思い、今回はmicroCMSとNext.jsを使ってブログを作りました。
URL
サイトURL
GithubURL
Demo
花火が打ち上がっている東京の夜をイメージして作りました。
思いの外綺麗にできたなと思います。
休憩時間で暇だったから花火打ち上げてみた pic.twitter.com/zzBcGyaVeK
— yuta@25卒サーバーサイド (@yuta1984421) December 12, 2023
技術スタック・構成
どれも個人開発で少し触ったことがある程度で、あまり得意ではありません。
ただ、リッチなブログにはこれが最適だなと思い選択しました。
また、typescriptで書いていますが特に型安全にする必要があるようなものでもないので対して機能を生かしていません(笑)
サーバーサイド
- microCMS
フロントエンド
- TypeScript
- Next.js
- Prizma
- fireworks.js (花火打ち上げ)
データベース
- PostgreSQL
デプロイ
- Vercel
その他
- Qiita API
つまったこと
QiitaのレスポンスにOG画像のリンクがない
https://my-blog-yuta-2001.vercel.app/blogs
こちらのページでQiitaで投稿している記事の一覧を表示しています。
作る前の想定では、他の人のサイトを見た時にOG画像も表示できていたので、アクセスがあった際にQiitaのAPIを叩けば良いかと考えていました。
ただどうやらAPIにOG画像のリンクは含まれないのが実装中にわかり、当初の想定が崩れました。
解決した方法
Step 1️⃣ DBにQiitaの情報＋Qiita APIから渡ってきたURLを元にスクレイピングを実行＆DBに保存するAPIを作る
- QiitaのAPIからはブログのurlも渡ってくるので、それを元にpuppeteerというライブラリを用いてスクレイピングを実行しOGを取得
- ブログの情報とOGを合わせてblogsテーブルに保存
ただ、毎回これ全てを実行するとtimeoutが発生したりするので、QiitaAPIから渡ってくるupdated_atがDBのupdated_atより新しいもののみに対して実行するようにしました。
Step 2️⃣ 作ったAPIを定期的にcronで叩く (これは手動でいっかと思いやめました。)
vercelにcronの機能があったので実装しました。
ただ、Qiita更新の時に手動でやればいいやと思いやめました。
ちゃんと運用するならこちらがいいと思います。
Next.js・Vercelの機能で驚いたこと
今回必要に応じて色々機能を調べていたのですが、Next.js・vercelで「え。これできんの。」と思ったことが何点かありました。
今回のブログ作成を通じて、単なるフロントエンド向けののフレームワークではなかったんだなと認識しました。笑
人によっては当たり前だろと思われるかもですが、ほぼサーバーサイドだけしかやっていなかった自分にとって驚きが多かった開発でした。
API routerでapiを作れる
これほんとにすごいなと思ったのですが、だいぶ前からあるみたいですね。
APIを作れるってほとんどサーバーサイドもできるってことですね笑
Cron jobを設定できる
cronの設定をすれば任意の時間にAPI routerで作ったルートをたたけてしまうんですね。
確かNode.jsのライブラリでcron jobをコード上で作れるみたいなあった気がしますが、そんなことしないでも良いのはすごい便利だなと思いました。
VercelでPostgreSQLを用いてDBを立てれる
QiitaのレスポンスにOG画像のURLがなかったときはかなり落胆しましたが、探してみるとDBを使えるとのことでこの機能を発見しました。
助かりました。
便利なORMがある
サーバーサイド向けの機能揃いすぎだろと思いました。
最後に
わからない技術や使ったことない技術を使える個人での開発はやはり面白いなと感じました。
Next.js・Vercelの強さを改めて感じさせられました。
今度から簡単なサイトは全てNext.jsでやろうかなと思ってしまいました笑