『kmdworks』 個人のポートフォリオサイト

『kmdworks』 個人のポートフォリオサイト hero

プロジェクト概要

1. 案件内容

Next.jsとCloudflare Workersを用いて構築した技術ブログサイトです。
学習内容のアウトプットとポートフォリオの両立を目的として設計しており、エッジ環境での高速配信と運用コストの最適化を重視しています。

2. 目的

従来のブログサービスでは構成の自由度やパフォーマンスに制限があったため、自前で設計・構築することで以下を実現することを目的としました。

  • エッジ環境での高速表示
  • 低コストでの運用
  • 技術スタックの可視化（ポートフォリオとしての役割）

基本情報

種別

個人開発（技術ブログ・ポートフォリオ）

担当範囲

要件定義 / 設計 / 実装 (フロントエンド・バックエンド) / インフラ構築 / 運用

公開URL

kmdworks.com
https://kmdworks.com

制作時期

2025年11月 〜 2026年1月 (自分のサイトのため現在も継続的に機能を追加しています)

技術詳細

1. スタック

  • フロントエンド: Next.js 15（App Router） / TypeScript / TailwindCSS
  • バックエンド: Next.js API Routes & Server Actions / 認証・認可 Auth.js OAuth2.0
  • インフラ: Cloudflare Workers（エッジ実行） / D1（DB） / R2（ストレージ） / KV（キャッシュ）
  • CI/CD: GitHub Actionsによる自動デプロイ
  • IaC: Terraform wrangler による環境管理

2. 主な機能

  • 認証・認可（Auth.js） → 管理者ログインおよびセッション管理を実装

  • 招待メールによるユーザー登録 → 招待制により登録を制御

  • Markdownによる記事管理 → マークダウンによる柔軟な記事運用

  • 画像配信（Cloudflare R2） → 画像をオブジェクトストレージに保存し、高速かつ低コストで配信

  • キャッシュ（Cloudflare KV） → 頻繁にアクセスされるデータをキャッシュし、レスポンスを最適化

3. 構成図

- システム構成図

systemconfigurationdiagram

工夫したポイント

- マークダウンによる記事管理

記事(Post)コンテンツはマークダウン形式で管理し、R2に保存する構成としました。 これにより、コードとしての管理（Git管理）とコンテンツ管理を分離しつつ、柔軟に記事の追加・編集ができるようにしています。

また、ビルド時に静的生成するのではなく必要に応じて取得することで、エッジ環境でも運用しやすい構成としています。 マークダウンの作成表示は「react-markdown」「remark-gfm」「rehype-sanitize」を使用し、その他必要があれば自作で機能を実装しました。
正直にいうとzennやqiitaの記述方法を目標として作成しています。

また、「記述中に編集とプレビューを切り替えられる機能」「文中に画像を挿入する機能」「投稿日時指定機能」などマークダウンの記述のしやすさにもこだわりました。
ここに関しては、リンクカード作成機能の検討など今現在もアップデートし続けています。

markdown20260318

- 招待メールによるユーザー登録

本アプリでは記事を作成する際にはユーザー登録が必要です。
ユーザー登録は公開制ではなく、招待メール経由でのみ可能とする設計にしました。これにより、不正登録やスパムを防ぎつつ、限定的なユーザー管理を実現しています。
認証にはAuth.jsを使用し、メールリンクによるログインフローを構築しました。 サーバーサイドでトークン管理を行うことで、安全性と実装のシンプルさを両立しています。

invitation20260318

*セキュリティの観点から一部画像を編集しております

- Terraformによる環境分離

開発・検証・本番の各環境をTerraformで管理し、 Cloudflareのリソース（Workers / D1 / R2 / KV）をコード化しました。 これにより、環境ごとの差分を明確にしつつ、再現性のあるインフラ構築と安全なデプロイを実現しています。

また、wrangler と GitHub Actions(一部試験的導入中) と組み合わせることで、ブランチごとに環境を切り替えた自動デプロイフローを構築しています。

課題と今後

本プロジェクトは、低コストで運用可能なポートフォリオ兼技術ブログとして設計しており、今後大規模な機能追加やシステムの複雑化は意図的に行わない方針としています。
そのため、現状の構成を維持しつつ、以下の点を中心に改善を検討しています。

  • マークダウンをベースとした投稿フローの整備
    → 自動画像最適化機能や本格的なリンクカードの導入など、編集・公開の効率化を図る

  • Cloudflare KVの活用最適化
    → キャッシュ戦略を見直し、レスポンス性能とコストのバランスを改善

シンプルな構成を維持しながら、運用性とパフォーマンスを段階的に向上させていく予定です。

GALLERY

← 一覧へ戻る