ハイアリングやマーケティングのために会社の技術ブログを作りたい話はよくありますが、なかなか継続しないというか、記事を書くモチベーションが上がりません。
社内エンジニアのなかには個人の技術ブログを書いているメンバーはいるので、それぞれのブログを集約するサイトがあればいいのではと考えていたところ、次の記事を見つけました。
zenn.dev
これは良さそうだと感じたので、Team Blog Hub を紹介しつつ、Azure Static Web Apps にデプロイしてみました。
Team Blog Hub とは
上記のブログで紹介されている Team Blog Hub は、ブログの RSS の URL を登録することで、メンバーの投稿を一覧にまとめて表示できます。
Next.js で作成されたシンプルなサイトで、配色やロゴなどのデザインも変更しやすそうです。
Next.js アプリの構成を変更する
このリポジトリを Fork して、Azure Static Web Apps に必要な構成に変更します。
静的サイトとしてビルドしたいので、package.json に next export を追記しました。
{ "scripts": { "dev": "next dev", "build": "run-s build:posts build:next", "build:posts": "ts-node --project tsconfig.builder.json ./src/builder/posts.ts", "build:next": "next build && next export", "start": "next start" }, }
次に、staticwebapp.config.json を追加し、404 のカスタムエラーページの構成を定義します。
{ "responseOverrides": { "404": { "rewrite": "/404.html", "statusCode": 200 } } }
Next.js アプリの構成変更は、これで完了です。
Azure Static Web Apps にデプロイする
Azure Static Web Apps は、公式ドキュメントの記載通り、GitHub のリポジトリを指定して作成すればよいです。
GitHub Actions のパイプラインも自動作成されるので、素早く Azure Static Web Apps にデプロイできます。
実際の運用では、最新の投稿を取得するために Schedule トリガーで同じパイプラインを定期実行させるようにします。
Dynamic Rooting を使っていると 404 エラーが発生してしまう
Azure Static Web Apps にデプロイされたサイトの Member のアイコンをクリックした際に、404 エラーで画面遷移に失敗していました。
404 エラーの原因は、Next.js の Dynamic Rooting を使っていることで、staticwebapp.config.json にルーティングの構成を定義する必要があります。
渡辺さんの記事が大変参考になりました。
私自身の Next.js 力が足りないこともあり、Member ページ毎にハードコーディングしていますが、動的にルーティング構成を定義したほうがいいです。
{ "routes": [ { "route": "/members/CatNose", "rewrite": "/members/CatNose" }, { "route": "/members/John Doe", "rewrite": "/members/John%20Doe" } ] }
この対応で解決できますが、アーキテクチャ的になぜ 404 エラーが発生するのか原因が気になっています。
ローカルの環境で Azure Static Web Apps CLI を使ってエミュレートしても 404 エラーは発生しないので、現象の発見が遅れてしまいがちです。
まとめ
Azure Static Web Apps に Team Blog Hub という Next.js で作られたサイトをデプロイしてみました。
デプロイ自体は簡単にできますが、Dynamic Rooting の 404 エラーにハマりました。とはいえ、Azure Static Web Apps はとても便利なサービスなので、活用していきたいと思います。
Team Blog Hub は、会社やチームの技術ブログを集約する Hub のようなサイトを作りたいときには、ぴったりのサイトでお勧めです。
