はじめに？
自作モノリス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化 する のは、今のところ、自分には無理... と、
以前、書いていましたが、面倒くさがらなければ、今なら時間を
掛ければできそうです、でも、面倒くさいので、しません、
ハマりどころもありそうなので...。
コードの解説は書きません。
コードは、全てを識っている(嘘？です、書いてみただけです)。