過去作と黒歴史を管理するアーカイブシステムを構築してみた【ポートフォリオサイト】

2025-12-30 17:43 公開
2026-01-02 18:03 更新

この記事は、 FUN Advent Calendar 2025 23日目の記事です。

はじめに

uiroです。大遅刻しました、すみません。

学内ハッカソン「P2HACKS」と年末の間にやることが多すぎて遅くなってしまいました。ハッカソンについて触れた記事はあとで書こうと思うので、しばらくお待ちいただけると幸いです。

このWebサイトは uiro.dev という私のポートフォリオサイトで、過去の制作物やブログなどを公開しています。

今回は、このuiro.devと連携して過去に制作したWebサイトを配信できるアーカイブシステムを構築したので、その紹介をしたいと思います。

背景

みなさんは使わなくなったWebサイト、どうしてますか？

リポジトリごとそのまま爆破しても良いですが、当時の技術力や試行錯誤が見られること、自分が何をやってきたかを見せやすいことから、私はネットの海に残しておくと良いと思っています。

私は以前から、過去に制作したWebサイトやブログを、アーカイブ用Webサイトにまとめて公開していました。

昔公開していたアーカイブ一覧ページ
昔公開していたアーカイブ一覧ページ

何度か構成が変わっていて、Webサイトごとに別々のサブドメインを使ってみたり、サブディレクトリにWebサイトを仕分けたりして管理していました。

最新の構成では、過去のWebサイトを管理するために必要なアーカイブを公開するWebサイトと、アーカイブの一覧を表示するWebサイト、また過去のドメインを新しいドメインにリダイレクトするためのWebサイトを、それぞれ別のリポジトリで管理していました。

一方で、いくつかのリポジトリを横断して管理を行わなければならず手間だったこと、パスやリポジトリの情報を手動で同期する必要があり整合性が取れている保証がないこと、アーカイブ用のプロジェクトが大量にVercelに載っていることなど、いくつかの問題がありました。

作ったもの

uiro.dev アーカイブシステム(https://arc.uiro.dev) を作成しました。といっても、このページを開くだけではそれっぽいアニメーションが流れているだけで、ここから遷移できるアーカイブはありません。

アーカイブシステムのトップ画面
アーカイブシステムのトップ画面

特徴

一番の特徴は、以下の3つの役割を1つのシステムだけでこなせることです。

  1. アーカイブの公開
  2. 過去ブログページのパスのリダイレクト
  3. 過去ドメインのリダイレクト

1. アーカイブの公開

まずメインの機能であるアーカイブの公開です。過去に作ったWebサイトを、サブディレクトリ（arc.uiro.dev/0503 のような形）で配信しています。

これは昔作っていた自分語りサイト
これは昔作っていた自分語りサイト

2. 過去ブログページのパスのリダイレクト

次に、過去ブログページのパスのリダイレクトです。

過去のuiro.dev系ブログへのアクセスは、すべて最新のブログにリダイレクトされるようになっています。サブドメインの終活は大変ですが、きちんと回収されるようになっている点が推しポイントだと思っています。

これはpages.uiro.devからのリダイレクトテーブル、気合いで実装してます
これはpages.uiro.devからのリダイレクトテーブル、気合いで実装してます

3. 過去ドメインのリダイレクト

例えば、以前アプリを公開していた、 https://app.uiro.dev というドメインにアクセスした場合、自動的にそのリポジトリのアーカイブである、 https://arc.uiro.dev/0608 にリダイレクトされるようになっています。

こんな感じでリダイレクトを設定しています
こんな感じでリダイレクトを設定しています

技術スタック

フレームワーク・ランタイム

  • Next.js 16
  • Bun

UI ライブラリ

  • Tailwind CSS v4
  • react-icons
  • tsparticles

バックエンド・ストレージ

  • Supabase
  • Vercel

特徴としては、Next.jsのサーバー周りで動く機能を活用して認証や配信を行っていること、またSupabaseをバックエンドに採用していることが挙げられます。

Supabase は自宅サーバーで運用しているため、転送量に制限がないことがうれしいです。

こだわったポイント

他にこだわったポイントとしては、以下が挙げられます。

  1. アーカイブのメタデータを一元管理できる
  2. アーカイブごとにパスワード認証を設定できる
  3. アーカイブの内容を編集したくなったとき、ビルド→公開までを1コマンドで行える

1. アーカイブのメタデータを一元管理できる

アーカイブのメタデータ（名前、説明、使用技術、タグ、ビルド方法など）を一元管理できるようにしました。 以下の設定ファイルを、各リポジトリのルートに配置しています。

import type { ArchiveConfig } from '../../routes'

const config: ArchiveConfig = {
  id: '0708',
  slug: '0708_uiro-dev-shiki',
  status: {
    isPublic: false,
    isAuthNeeded: true,
    isArchive: true
  },
  metadata: {
    name: 'shiki',
    description: 'おしゃれなポートフォリオ候補',
    language: 'Next.js(React)',
    tag: 'uiro'
  },
  build: {
    installCommand: 'bun install',
    buildCommand: 'bun run build',
    outputDir: 'dist'
  }
}

export default config

以前はNotion, GitHub, アーカイブ用ページに上記のデータが分散していました。

今回の変更によって、アーカイブシステムでデータを管理し、アーカイブシステム上から各アーカイブの設定をまとめた設定ファイルを配信しています。

uiro.dev側から設定ファイルを読み込むことで、uiro.devのリポジトリに変更を加えなくてもアーカイブ情報が同期できるようになっています。

2. アーカイブごとにパスワード認証を設定できる

これがタイトルの「黒歴史を管理する」にあたります。過去に作ったセキュリティが終わっているWebサイトや、自分でも意味がわからないWebサイトなど、いつでも見られるようにはしておきたいけれど、あまり公開はしたくない場合があります。

そこで、アーカイブごとに設定ファイルでパスワードを設定し、閲覧時に要求されるようになっています。

パスワード要求画面、サーバーサイドで処理しています
パスワード要求画面、サーバーサイドで処理しています

3. アーカイブの内容を編集したくなったとき、ビルド→公開までを1コマンドで行える

bun run upコマンドを実行するだけで、ビルドから公開まで完了します。アーカイブの変更はSupabaseにだけ依存するので、アーカイブシステムの再デプロイが不要な点がうれしいです。

また、複数のアーカイブを並列でビルドする仕組みや、ログの整備によって、アーカイブ管理のハードルを下げる工夫をしました。

1コマンドでアーカイブをビルドして公開
1コマンドでアーカイブをビルドして公開

それぞれの段階の詳細なログを見ることもできる
それぞれの段階の詳細なログを見ることもできる

成果

このシステムによって、アーカイブの管理が格段に楽になりました。

移行前と移行後の違いをまとめましたが、箇条書きになってしまうのでこのセクションは参考程度にご覧ください。

移行前

ドメイン一覧

flowchart TB
    subgraph MAIN["uiro.dev (メインサイト)"]
        subgraph CURRENT["現行ブログ"]
            blogs["uiro.dev/blogs"]
        end

        subgraph CURRENT_WORKS["アプリ一覧"]
            uiro["uiro.dev/works"]
        end
    end

    subgraph ARCHIVE_LIST["アーカイブ配信"]
        prism["prism.uiro.dev"]
        arc["arc.uiro.dev/XXXX"]
    end

    subgraph LEGACY_APPS["過去アプリ配信"]
        app["app.uiro.dev"]
        airo["airo.uiro.dev"]
    end

    subgraph ROUTER["0705_uiro-router"]
        blog["blog.uiro.dev"]
        pages["pages.uiro.dev"]
    end

    uiro -->|アーカイブを見る| prism
    uiro -->|アプリを見る| app
    prism -->|各アーカイブを見る| arc
    app -->|各アプリを見る| airo
    blog -->|リダイレクト| blogs
    pages -->|リダイレクト| blogs

アーカイブの公開手順

  1. アーカイブを配置するサブディレクトリを設定
  2. 手元でビルド
  3. ビルド成果物をアーカイブ用リポジトリにコピー
  4. アーカイブ用リポジトリをVercelにデプロイ
  5. アーカイブ一覧Webサイトにアーカイブのパスをコピー
  6. アーカイブ一覧WebサイトをVercelにデプロイ
  7. 過去ドメインリダイレクト用リポジトリにリダイレクト設定を追加
  8. 過去ドメインリダイレクト用リポジトリをVercelにデプロイ
移行後

ドメイン一覧

flowchart LR

    subgraph ARC["arc.uiro.dev"]
        arc_0608["/0608 (旧app)"]
        arc_0503["/0503 (旧airo)"]
        arc_main["その他アーカイブ..."]
    end

    subgraph LEGACY["過去ドメイン"]
        app["app.uiro.dev"]
        airo["airo.uiro.dev"]
        blog["blog.uiro.dev"]
        pages["pages.uiro.dev"]
    end

    subgraph MAIN["uiro.dev (メインサイト)"]
        uiro["works"]
        blogs["blogs"]
    end

    app -->|リダイレクト| arc_0608
    airo -->|リダイレクト| arc_0503

    blog -->|リダイレクト| blogs
    pages -->|リダイレクト| blogs

    uiro -->|直接リンク| ARC

アーカイブの公開手順

  1. アーカイブをアーカイブシステムに配置
  2. ビルド設定やメタデータを設定ファイルに記述
  3. bun run up コマンドを実行 各アーカイブのビルド+アップロード、uiro.dev向けの設定ファイルの生成
  4. 設定ファイルに差分があれば、Deploy Hooksを使いuiro.devの再デプロイを実行

uiro.dev(このWebサイト)との統合

アーカイブとの接続を行うためにuiro.devを改修しました。

カテゴリごとの色分けや技術スタック用バッジの拡充、添付リンクの自由度を上げるといった変更を行いました。

過去のアーカイブ(Works)を表示するページを改修
過去のアーカイブ(Works)を表示するページを改修

過去アプリをアーカイブ内に配置するように
過去アプリをアーカイブ内に配置するように

備忘録(Notes) ページのデザインも改修
備忘録(Notes) ページのデザインも改修

トップ画面の技術スタック表示もバッジを使うように合わせました
トップ画面の技術スタック表示もバッジを使うように合わせました

トップ画面は今回の変更に追従しきれていない部分や見づらい部分があるので、近いうちに小規模な改修を挟むと思います。

おわりに

以上でこの記事を終わろうと思います。
改めて、アドカレ大遅刻してしまい誠にごめんなさいでした。

FUN Advent Calendar 2025 では、以下の記事が公開されています。ぜひご覧ください。

22日目の記事

バッシュさん： 個人インターネットラジオ局を作った

FUN_オホーツクさん： P2HACKS2025を振り返って～技術者保育園～

23日目(同日)の記事

tomisukeさん： 大学生が自動車を買ったけど､買って良かったか考察する

くあさん： 素人が考えるAIとの向き合い方

24日目の記事

nagataさん： 表現活動について

Onnenaiさん： P2HACKSお疲れさまでした！& 萌えの話

25日目の記事

宮原良太さん： 真狩で嫁と生き別れた話

バッシュさん： アドカレなんのサービス使われているのか2025

uiro

uiro

famisics