SPA開発 3. RailsをHerokuにデプロイする #03
2019年10月12日に更新

Railsに"Hello"を表示してHerokuへデプロイする

今回達成すること

今回は、Railsのトップページに"hello"を表示してHerokuにデプロイします。

現状の確認

前回までに

を行いました。

全てバックグラウンドの設定のため、まだトップページはこのままのはずです。
2019-08-03 13-19-24

このページは、開発環境のRailsが表示しているだけであってHerokuでは正しく表示されません。

今回はこのトップページの編集を行っていきます。

まずは、htmlを表示するファイルを作成する

今回作成したRailsプロジェクトはapiモードのため、トップページを表示するviewファイルがありません。

そこで自分でviewファイルを作成します。

app/views/layoutディレクトリにapplication.html.erbファイルを作成してください。

atomエディタの場合は、layoutディレクトリ上でaを押すと新規ファイルが作成できます。

2019-08-09 13-22-56

中身はこのように書きます。

application.html.erb

<!DOCTYPE html>
<html>
  <body>
    <%= yield %>
  </body>
</html>

この<%= yield %>がRailsの命令を表示する部分となります。

controllerの設定を行う

次に何を表示するかを設定していきます。

app/controllers/application_controller.rbを以下のように編集してください。

application_controller.rb

class ApplicationController < ActionController::API
  def index
    render html: "hello!"
  end
end

このindexにアクセスすると"hello!"という文字列を返してね。と宣言しています。

routes.rbの設定を行う

最後にroutes.rbファイルの設定を行います。

routes.rbは、ここにアクセスしたらこれを実行してね。と設定するファイルとなります。

config/routes.rbに移動してください。

routes.rb

Rails.application.routes.draw do
  root 'application#index'
end

これはアプリケーションのroot、つまりトップページにアクセスしたら、applicationコントローラーのindexを実行するように宣言しています。

localhost:3000にアクセスして確認をとる

Railsを起動して"http://localhost:3000/"にアクセスしてみましょう。

$ rails s

"hello!"と表示されれば成功です。

Herokuにデプロイする

Herokuにデプロイして、インターネット上でも表示されるか確認をとりましょう。

まず、gitにコミットして、

$ git add -A
$ git commit -m "hello_rails"

Bitbucketにpush!

$ git push

Herokuにもpush!!

$ git push heroku

デプロイが完了したら、ブラウザで確認

$ heroku open

"hello!"が表示されていますか?

これにてアプリケーション公開の第一歩を踏み出しました。

application.html.erbは削除する

確認が取れたら最初に作成したapplication.html.erbファイルは削除して構いません。

今回の設計では、あくまでRailsはapiデータを返すだけであり、フロントはNuxt.jsで表示するため、このファイルを必要としません。

終わりに

以上で、チャプター「2. RailsをHerokuにデプロイする」を終わります。

次回からはRailsプロジェクトにNuxt.jsを乗せ、共存させる方法について説明していきます。

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
SPA開発
今日のTweet
スポンサー広告