TL;DR
RailsのルーティングはAPIのパス以外は、Vueのルートパスにルーティングするように設定したというだけの話。
前提
- インスタンス
- 環境: Puma with Ruby 2.5 running on 64bit Amazon Linux/2.7.2
- フロント: Vue.js(Nuxt.js)
- Rails設定
- APIモードではなく通常のプロジェクトで作成
- Vueの配置位置
- app/public/{VueRoot}
経緯
ローカルで開発している段階では以下のようにRailサーバとVueサーバ別個に立ち上げていたので問題は起きなかった。というか後に問題になることを気づかなかった。
$ cd {RailsRoot}
$ rails s // endpoint -> localhost:3000
$ cd {RailsRoot}/public/{VueRoot}
$ npm run build // localhost:3001
// ブラウザでlocalhost:3001にアクセス
AWS上にデプロイ後
Railsアプリケーションとしてデプロイしてるので、当然RailsにアクセスしてVueを表示したいわけです。なのでまず、RailsルートにアクセスしたらVuの起動ページを返す設定を追加。
# routes.rb
Rails.application.routes.draw do
root to: 'hoge#top'
# Rails APIのルーティング設定は省略
end
# hoge_controller.rb
class HogeController < ApplicationController
def top
# return Vue root page
render file: 'public/fuga/dist/index.html', layout: false, content_type: 'text/html'
end
end
トップページは表示されました。
下層ページ
Vue側のルーティングが動いた際、Railsのルーティングが動いてRailsの404が表示されてしまう。
→おそらくVueのルーティング〜レンダリングとRailsの404、どちらが先に動くかは不定になると思われる。
なので下層ページの際はRails側のルーティングは動かないようにしたい。
# routes.rb
Rails.application.routes.draw do
root to: 'hoge#top'
# Rails APIのルーティング設定は省略
# !!! 下記を追加 !!!
get '*path', to: 'hoge#top'
end
これでとりあえずOKでした。