はじめに？
自作モノリス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
... etc
Railsバックエンド
WEB API と 管理画面(Rails Admin)で構成。
Rails7.1 + PostgreSQL。
※ Rails Adminについてはカスタマイズしていません。
(RailsAdminサイドでModelのdefault_scopeの無効化は
行なっています。)
利用技術
DBサーバー: PostgeSQL
ストレージサーバー： MinIO
NoSQLキー/バリュー・ストア: Redis
利用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 と、バージョンアップを経てきています。 -
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 -
CSSまわり
Bootstrap 4 → 5
最後に
Nuxt3いいよ、Nuxt3！
上記アプリのMPA化に掛かった期間はちょろちょろ作成で数週間。
(初めての Nuxt3 アプリ作成、Nuxtを触るのも初めて。)
React / Next.js / Remix で 数週間で RailsアプリをSPA
or MPA化 する のは、今のところ、自分には無理... と、
以前、書いていましたが、面倒くさがらなければ、今なら時間を
掛ければできそうです、でも、面倒くさいので、しません、
ハマりどころもありそうなので...。
コードの解説は書きません。
コードは、全てを識っている(嘘？です、書いてみただけです)。