はじめに？

自作モノリスRailsアプリを Rails(バックエンド) +
Nuxt3(フロントエンド)、に分割して、MPA化
してみました。

Easel

簡易画像ビューア。

ユーザー登録/ログイン/ログアウト機能、画像一覧機能、
画像登録(アップロード、タグ付け)機能、コメント機能
(投稿/一覧/削除)、画像プロフィール編集機能、画像検索機能、
ユーザープロフィール編集機能をもちます。

Nuxt3フロントエンド

Vue.js3 のAPIは Composition API を全面採用
しています。

旧フロントエンド(Rails)のパーシャルViewを
(レイアウトや機能については)そのままVue.jsのSFCに
書き換えてUIコンポーネント化してから、変更しています。

利用技術

利用NPMパッケージ

入力バリデーション: Vuelidate
国際化(i18n): Vue i18n + Nuxt I18n
通知: Vue Sonner
カレンダー: VCalendar
ページング: vuejs-paginate-next
Googleログイン: Vue3 Google Sign-in
WYSWYGエディタ: VueQuill
画像拡大表示: Luminous、Photoswipe

... etc

Railsバックエンド

WEB API と管理画面(Rails Admin)で構成。

Rails7.1 + PostgreSQL。

※ Rails Adminについてはカスタマイズしていません。
(RailsAdminサイドでModelのdefault_scopeの無効化は
行なっています。)

利用技術

DBサーバー: PostgreSQL
ストレージサーバー： MinIO (Amazon S3互換)
NoSQLキー/バリュー・ストア: Valkey (Redis互換)(Session Store用)

利用Gem

ログイン認証： sorcery + sorcery-jwt
画像アップロード： Shrine
タグ： ActsAsTaggableOn
論理削除： Discard
ページング： Pagy
UIのコンポーネント化： ViewComponent
JSONシリアライザ： JSON:API Serialization Library
(簡易)管理機能：　RailsAdmin
テスト： RSpec
... etc

旧アプリ(Rails)

Railsバックエンドとフロントエンドが一体化したモノリス。

Hotwire(Stimulus + Turbo)、
画像詳細ページのコメント一覧/コメント投稿機能に
Vue.js3 を採用。

履歴

Rails本体:
　5.2 → 6 → 7.0 → 7.1 -> 7.2 と、バージョンアップを経てきています。
Railsまわり:
　アップローダの変更: Refile → Shrine
　ストレージの変更：プロジェクト内 → MinIO (AWS S3互換)
　ページングの変更： Kaminari → Pagy
RailsのJS/CSSまわり:
　Sprockets →
　Sprockets + Webpacker (on Node.js) →
　Sprockets + esbuild & sass (on Node.js) →
　Propshaft + esbuild & sass (on Node.js)
　(jsbundiling-rails + cssbundling-rails)
JSバンドラ
　Yarn → PNpm
　(jsbundling-rails 1.3.0以降 &
　cssbundling-rails 1.4.0以降必要)
JSまわり
　旧Railsフロントエンド:
　Vue.js 2 → 3
　JavaScript → TypeScript
DBまわり
　MySQL → PostgreSQL
NoSQLキー/バリュー・ストアまわり
　未導入 → Redis → Valkey
CSSまわり
　Bootstrap 4 → 5

スクリーンショット

画像一覧

(未ログイン)

(ログイン済み)

検索条件

ログイン

ユーザー登録

ユーザープロフィール

ユーザープロフィール編集

(メールアドレス&パスワードでのログイン)

(Googleログイン)

画像アップロード

画像詳細

(未ログイン)

(ログイン済み)

画像プロフィール編集

最後に

Nuxt3いいよ、Nuxt3！

上記アプリのMPA化に掛かった期間はちょろちょろ作成で数週間。
(初めての Nuxt3 アプリ作成、Nuxtを触るのも初めて。)

React / Next.js / Remix で数週間で RailsアプリをSPA
or MPA化するのは、今のところ、自分には無理... と、
以前、書いていましたが、面倒くさがらなければ、今なら時間を
掛ければできそうです、でも、面倒くさいので、しません、
ハマりどころもありそうなので...。

コードの解説は書きません。

コードは、全てを識っている(嘘？です、書いてみただけです)。