LoginSignup
12
11

More than 3 years have passed since last update.

rails5 APIモードでindex.htmlを配信する

Last updated at Posted at 2017-07-29

rails5 APIモードでindex.htmlを配信するための方法をまとめました。

前提

  • rails5.1.2を利用。
  • nginxやCDNを使わずにrails内でソース管理したい。
  • URL設計もroutes.rbで行いたい。

[2020.5.10追記]
render file: パス指定により動いているものだと思ってましたが、私の勘違いでした:bow_tone1:
URLと公開ディレクトリを一定のルールで構成すれば、railsのmiddlewareが規約通りにサーブしてくれるようです。
config.public_file_server.enabledがtrueに設定されていると、publicディレクトリ以下に置かれているすべてのファイルをwebサーバにマウントします。そして、一定のリクエストURLルールにしたがって、publicディレクトリ配下のファイルをレスポンスしているとのことです。例えば、public/about.htmlが存在していればhttp://localhost:3000/aboutのリクエストに対して反応します。
詳しくは@daido1976さんのコメントをご覧ください。

APIモードでhtmlを配信する

静的ページ専用のコントローラーを用意する。
renderメソッドにfileキーを明示して静的ファイルのパスを直指定する。

StaticPagesController.rb
class StaticPagesController < ApplicationController
  def index
    render file: 'public/index.html'
  end
end
application_controller.rb
class ApplicationController < ActionController::API
end

routes.rb は以下で検証した。

  • match '*all', to: 'static_pages#index', via: [:get]
  • root 'static_pages#index'
  • get '/index', to: 'static_pages#index'

(寄り道)fileをつけなくても良いパターン

ルートで紐付けたcontroller#actionだとfileキーを付けなくてもいける。
html1枚だけ配信したいケースならこれで事足りる。

routes.rb
root 'static_pages#index'
StaticPagesController.rb
class StaticPagesController < ActionController
  def index
    render 'public/index.html'
  end
end

(注) render file:renderだけにしている。

パス指定すると、renderだけだとviews配下を見にいくので、ActionView::MissingTemplateが発生する。

routes.rb
  get  '/index', to: 'static_pages#index'
StaticPagesController.rb
同上

結果

Missing template public/index.html 
with {:locale=>[:ja], :formats=>[:html], :variants=>[], 
:handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}. 
Searched in: * "(...)/app/views"

SPAが動いていない時のケア

不幸にもSPAが管理しているURLなのに、ブラウザが拾ってサーバにGETリクエストを飛ばしてしまうケースは発生する。

  • ブラウザのアドレスバーに直接入力した
  • ユーザーがブラウザのキャッシュをクリアした
  • 特定のURLをいつものwebサービスのようにブクマするなりシェアした

SSR(ServerSideRedering)をしていればまた話は変わるが、そうでなければ以下のようにケアしておく。途中に置くと以降のルートに流れなくなるので、末尾に記載する。

routes.rb
  get '*path', to: redirect('/')

(追記)SPAのURLのままシェアする方法を別記事でまとめました。

他のhtmlファイル

サイト紹介のためのabout/contactらも同じように配信できる。

routes.rb
  get  '/about', to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'

他のJSファイルやCSSファイル

  • ルート直下にpublic/assetsフォルダを用意するなり。
  • フロントでビルドする
  • ビルドしたファイルをコピーする

参考

How to render file in Rails 5 API?

12
11
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
11