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 ミドルウェアです。

以下のようなファイルを作成します。

config/initializers/rewrite.rb

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 モードでのルーティングが実現できます。