Rails で Vue の HTML5 History モードを動かす際の備忘録。
ちなみに Angular の HTML5 モードも同様に使えるはず。
HTML5 History モードとは
Vue (vue-router) のルーティング設定にはHTML5 History モードというものがあります。
詳しくは上記ページに任せるとして、要するに SPA で自然な URL でルーティングができるようになる機能です。
例えば http://oursite.com/user/id のような URL になります。
Rails の public ディレクトリに SPA を配置する場合の問題点
フロントエンドに Vue を、バックエンドに Rails5 の API を利用した環境を構築する場合、
通常は Web サーバと App サーバにそれぞれを分けてデプロイし、Web サーバの設定で history モードに対応させることが多いかと思います。
ただ、手軽にデプロイするなら Rails の public ディレクトリにビルドした Vue アプリケーションを置いてしまうのもアリです。
この場合リクエストは Rails が受けることになりますが
そのままでは http://oursite.com/user/id という URL にアクセスしても
No route matches [GET] "/user/id" エラーになってしまいます。
調べた範囲では Rails だけで /user/id へのアクセスをうまく public/index.html に流すことはできなさそうでした。
rack-rewrite の導入
いろいろ試してみた結果、rack-rewrite を利用する方法に落ち着きました。
名前のとおり URL の rewrite を行う Rack ミドルウェアです。
以下のようなファイルを作成します。
Rails.application.config.middleware.insert_before(Rack::Runtime, Rack::Rewrite) do
# 正規表現は環境にあわせて修正
send_file %r{\A/user(/\w+)?\z}, 'public/index.html'
end
※ send_file の第二引数は URL ではなく送信するファイルのパス
これにより http://oursite.com/user や http://oursite.com/user/id といったアクセスは public/index.html で処理するようになり、HTML5 History モードでのルーティングが実現できます。