開発

当サイトは第3世代に進化しました

完全に自律開発、各端分離のサーバーレスアーキテクチャ

第3版の開発は、Strapiの限界やEXIF情報管理の改善を目指して再開発を決意。Nodeベースのバックエンドを放棄し、SvelteKitとSupabaseを利用してCMSを再構築。Remixを用いたフロントエンドを開発し、各部分を独立させた構造で多言語対応やAI統合も実現。今後はログイン方法の追加などを予定。

  1. #CMS
  2. #データベース
  3. #SvelteKit
  4. #Remix
  5. #Supabase
  6. #Cloudflare
  7. #Workers
  8. #AI統合
  9. #バージョンアップ

51

A breathtaking view of a snow-covered mountain range under a warm, orange and blue sky, with clouds covering the mountains and a person standing on the snow-covered slope.A breathtaking view of a snow-covered mountain range under a warm, orange and blue sky, with clouds covering the mountains and a person standing on the snow-covered slope.

前回のNextを使用して開発した第2版が完成した時に、次にもっと複雑で私のニーズに合った第3版を開発すると言いました。一年間の断続的な開発と実際の連続開発時間は約三四か月で、第3版がついに正式にリリースされました。

再開発する以上、現状に不満があるのは当然です。

第2版のCMSについて、Strapiは多言語コンテンツをサポートしていますが、いくつかの細かい部分で満足できませんでした。例えば、異なる言語のコンテンツが同じスラッグを持ち、同じ言語内には重複しないことを希望しましたが、Strapiではそれができません。

また、大量の写真作品を保存し、データベース内に画像のEXIF情報を保存するより良い方法も必要です。第2版ではオンラインで読み取るためのインターフェースを作成しましたが、私は画像をアップロードする際にEXIF情報がデータベースに保存されることを希望しました。

そのため、再開発を決意しました。

最初は、APIとしてのバックエンドを開発するつもりでした。2023年末までに、このバックエンドの機能の大部分が完成しました。画像を各種サイズと形式に変換し、EXIF情報を抽出する機能を備えています。

2023年末になって、当時のアーキテクチャの設計を再考し始めました:サーバー側、CMS、フロントエンドの三つの端が複雑すぎるのではないか、簡素化できないか?

したがってNodeで開発したバックエンドをキャンセルし、CMSがデータベースを直接操作することに決めました。年初から断続的にSvelteでCMS、つまりコンテンツ管理バックエンドを仕上げ、残りの作業は比較的簡単でした。Remixを用いて現在ご覧いただいているこのウェブサイトを作成しました。

構造

ウェブサイト全体は4つの部分に分けられます:データベース、CMS、エッジファンクション、ブログサイト。

データベースにはSupabaseを使用し、RLSとPostgresの各種プラグインを最大限活用しました。また、ユーザー登録、ログイン、認証にはSupabase Authを使用しました。

CMSはSvelteKitを使用して開発し、Cloudflareにデプロイされています。各種コンテンツの編集、データの閲覧と修正、設定の管理などを担当しています。

文章编辑页面文章编辑页面
文章编辑页面
文章列表页文章列表页
文章列表页
图片页图片页
图片页

現在閲覧しているウェブサイトはRemixを使用して開発され、同じくCloudflareにデプロイされています。技術選定時、長い間Reactを書いていなかったため、Reactを使うことに決めました。しかし、最新版のNextを試した後、Vercel以外のプラットフォームでのデプロイの体験が不満でした。そのためRemixを選びました。将来、Remixの開発経験を共有する予定です。

他にはWorkersもあります。AIインターフェースの呼び出し、画像のアップロード、EXIF抽出などに使用されています。

特徴

各端分離。データベース、CMS、ブログは独立しており、将来的にどの部分をリファクタリングする場合も比較的簡単です。

ネイティブなオブジェクトストレージのサポート。大量の写真画像を保存し、CDNを使用して加速するため、メディアファイルはS3ストレージのみがサポートされています。

多言語対応。新しいブログは世界中の訪問者を引き付けることを目的としています。実際、前のバージョンでもいくつかの外国人からコメントをもらいました。新バージョンではこれをさらに改善しました。

AI統合。現在、タイトルに基づいてスラッグを生成し、画像の説明、概要、タグの生成がAIによって行われています。将来的にはさらに多くのアプリケーションがあるかもしれません。

今後の計画

現在のこのウェブサイトのアーキテクチャと形態は、ほぼ満足のいく状態に近づいており、残りの作業は修正と修正のみです。

  1. さらに多くのログイン方法を追加、メールワンクリックログインを含む

  2. 未ログインのコメント

  3. ユーザー間のコメント通知

  4. コードの最適化

当サイトに関するコメントや提案があれば、コメント欄に記入してください。