Fox Studio CMS構築

プロジェクト概要

拡張性が高い汎用的なCMSのテンプレート作成を行いました。
管理画面なので、シンプルなスタイリングにするため基本的な汎用クラスのTailwindのみを利用しています。

LPや中小規模のサイトではWordPressのヘッドレスCMS化やMicroCMSを利用する想定ですが、複雑な設定が必要なことを考慮してベースのCMSを作成しました。

技術構成とフロントエンド実装

フロントエンドではNuxt4、バックエンドではExpressを利用しています。
認証をJWTで管理しており、REST API設計で構築しています。

コンテンツ運用機能

ドラフト機能を作成し、「公開」「非公開」「削除」を選択してコンテンツの運用をすることが可能です。

利用したい箇所毎にエンドポイントを追加し、柔軟にコンテンツを取得できるようにしています。

画像投稿機能

アップロード先や環境などは変数で管理しており、サーバー・クラウドへのアップロードも柔軟に切り替えられるようにしています。
画像の自動圧縮化も実装しています。（Webp / AVIF）

ユーザー管理機能

admin / editor / viewer の3つの権限を用意し、ユーザー毎に操作可能な範囲を制限しています。

サイト公開機能

即時公開・時刻指定公開の2つの方法でサイトを公開できるようにしています。