27日目 jrubyアプリのherokuへのデプロイ⑦（「Hello World」ページ追加）
おはようございます。
herokuへのデプロイを試みてから⑦日目が経ちましたが、まだエラーが出るところがあるため、エラー無くデプロイしたアプリケーションが見られるように、もう少しだけデプロイ作業に取り組みます。
昨日の記事はこちらです。
現時点での開発環境（前提）
・Windows 10
・JRuby 9.1.17
・Rails 4.2.4 （※「bundle install」コマンドにてインストール）
・bundler 1.17.3 （※バージョン「2.3.15」も同時にインストール済）
・PostgreSQL 10.21
・Visual Studio Code
・Git（＆ローカルリポジトリ作成＆プロジェクトデータのコミット済）
・Heroku CLI（＆Herokuアカウント作成済）
おさらい
前回の記事までで、JRuby on Rails（Rails）アプリケーションをherokuへデプロイしたのはよいものの、そのデプロイしたアプリケーションをheroku上にて起動し、そのアプリケーションを開こうとしたら、以下のエラーページが表示されていました。
赤字のエラーメッセージの内容に注目すると
・「The page you were looking for doesn't exist. 」
とのことです。ネット上で探してみると、今回のエラーと同じ例がいくつかあるようで（以下にピックアップしたものを載せます）
それらの例に共通することは「Railsのルーティング設定が足りてない」というようで、Railsアプリケーションのプロジェクトデータの配下の「config/routes.rb」にRailsのルーティング設定を記載するファイルがあるのですが、そのファイルにて、rootが設定していないために起こるもののようです。
ちなみにrootとは、Webサイトにアクセスした際に最初に表示されるページのようなものです。ルーティングとはURLにアクセスした際に、どのようなソースコード・Webページへと結びつけるかを決めるための設定のようなものです。（以下に参考となるページを張り付けますが、わからなかったら読み飛ばしても大丈夫です。）
今日やること
そのため、エラーを修正するためには、rootを設定すればよいのですが、そもそも昨日までの時点で、Railsアプリケーションには自分で実装したページなどはまだ何も作っていないほぼ空の状態でした。
そのため、まず、「Hello World」ページのようなものを作ってから、rootへのルーティング設定を行ない、その後にデプロイする流れになります。そのため、今日と明日に分けて以下のように実施しようと思います。
・【本日】Railsにおける「Hello World」ページ追加
・【明日】ルーティング設定＆Gitへのコミット＆Herokuへのデプロイ
参考
「Hello World」ページを作る際にはこちらを参考にしております。
本日の作業（Railsにおける「Hello World」ページ追加）
ということで本日は「Hello World」ページを作って、そのページを使ってrootにページを設定できる状態にしようと思います。
事前説明1. コントローラーとは
まずhelloコントローラーを作ろうと思いますが、そもそもコントローラー（controller）とは、Railsアプリケーションにおいて、ユーザーがパソコンやスマホ等のブラウザを通してRailsアプリケーションへアクセスしようとした際に、何らかのメッセージやデータをユーザーのところへ返す役割を持ったものです。今回は説明の詳細を省きますが、詳しく知りたい方はこちらをご参考ください。
今回はHelloコントローラーを作っておき、そのコントローラー上にて「Hello World」ページも作っておいて、ユーザーが「Hello World」ページに該当するURLへとアクセスしたら、Helloコントローラーが「Hello World」ページをユーザーのところへと返せるようにしておきます。
事前説明2. helloコントローラーを作る前の状態を確認
そこで、Helloコントローラーを作ろうと思いますが、その前に、コントローラーを作る前と作った後でどのようにアプリケーションデータの中身が変わるのか変化がわかるようにしておきますね。
まず、Visual Studio Codeを起動して、該当するRailsアプリケーションのプロジェクトデータを開きます。そこで、Visual Studio Codeの左側にある「エクスプローラー」ビューには色々とフォルダ名やファイル名があると思いますが、その中に「app」フォルダというものがあります。（以下、例）
「app」フォルダには、コントローラーやWebページ等様々なプログラム・データが入っていますが、今回でHelloコントローラーを作ると、「app」フォルダ内の一部の中身が変わります。
試しに、以下の①～③のように操作してみてください。
すると、以下のように「app」フォルダの中には「controllers」と「Views」フォルダの中身が見られると思います。（それぞれのフォルダの中身の説明は以下に書いてありますが、わからなかったら読み飛ばしても問題ありません。）
もう一つ、helloコントローラー作成前のRailsのルーティング設定を見ておきましょう。再度、Visual Studio codeの「エクスプローラー」ビューの全体へと視点を戻せば、色々とフォルダ名やファイル名が並んでいる中で「config」という名前のフォルダがあることを確認できるかと思います。（以下、例と説明があります。）
そこで、以下の①と②の操作を行なってみてください。「config/routes.rb」の内容が確認できると思いますが、まだ何もルーティングが設定されていない状態です。（先頭に「#」が付いている各行は緑色になっていると思いますが、緑色になっているものはただのコメントとなっていて、コンピューターからは「ソースコード」として認識されていないため、何を書こうが、その書いたものをプログラムとして実行されません。）
以上、3箇所を見ていただきましたが、これらのフォルダ・ファイルはhelloコントローラーを作成後に構成・内容が変わるため、覚えておいていただけましたら幸いです。（本当は他にも変化するものはありますが、特に重要なのは以下のところと思っていただければ良いかと思います。）
・「app\controllers」フォルダ
・「app\views」フォルダ
・「config\routes.rb」ファイル
1. helloコントローラーを作る
では、helloコントローラーを作っていきます。まず、以下のようにコマンドプロンプトを起動し、作業場所をRailsアプリケーションのプロジェクトデータ（ディレクトリ）まで移動させます。
ここで、Railsのコントローラーを作るためのコマンドを入力します。コマンドは以下の通りで、JRubyを用いるので先頭に「jruby -S」を付けます。また、わたしのPCの環境の場合、2つのbundlerのバージョンをインストールしているため、使うbundlerのバージョン（1.17.3）を指定するために、途中で「bundle _1.17.3_ exec」も付けます。
jruby -S bundle _1.17.3_ exec rails generate controller (コントローラー名) （アクション名）上記の（コントローラー名）と（アクション名）については、今回それぞれ「hello」と「index」を当てはめます。そうすると、
jruby -S bundle _1.17.3_ exec rails generate controller hello indexというコマンドになります。ここで、アクションとは、ユーザーがURLにアクセスした際に合わせてユーザーへ応答するためのサーバーの行動のようなものです。（解説は以下をご参考ください）
今回のコマンド入力時においては（アクション名）を省略することも可能ですが、指定したほうがアクションを作る手間が省けるため、「index」という名前のアクションのコマンドも同時に入れておきます。
実際にコマンドを入力すると、以下のようになります。
上に例として写真を張り付けていますが、コマンド入力（赤色の枠）後に出てくるWarningメッセージ（緑色の枠）は無視しても問題なく、重要なのはその後の部分（青色の枠）のところです。コマンドを入力することによって、コントローラーを動かすためのフォルダ・ファイルが自動的に作られてきます。
試しに、事前説明にて見てみた以下のフォルダ・ファイルがどうなっているか確認してみます。
・「app\controllers」フォルダ
・「app\views」フォルダ
・「config\routes.rb」ファイル
まず、「app\controllers」フォルダと「app\views」フォルダについてをVisual Studio Codeから先ほどと同様に開いてみると、以下の写真のようにそれぞれ「hello_controller.rb」ファイルと、「hello」フォルダが自動的に作られていることがわかります。
また、「config\routes.rb」ファイルの中身を先ほどと同じように見てみると、以下のように「get 'hello\index'」というルーティングが自動的に追加されていることがわかります。
以上のように、コントローラーを作るコマンドを入力すると、上記のようにフォルダ・ファイルが自動的に作られるので、ここから「Hello World」を表示するためのページを作っていきます。
2. helloコントローラーのアクションについての説明
※こちらの章はただの説明であり、特に作業があるというわけではありませんので、読み飛ばしても可能です。よくわからないという方のみ読んでいただけましたら幸いです。
前章の1にて、helloコントローラーを作るためのコマンドを入力する際、「index」というアクションも同時に指定していました。
そうすると、「app\controllers」フォルダの下に新しく作られた「hello_controller.rb」という、helloコントローラーの動きを定義するソースコードファイルがありますが、そのファイルの中に、「index」という名前のあるアクションの記述が自動的に追加されるはずです。
「hello_controller.rb」ファイルの開き方の例は以下の通りで、
コマンド入力後の時点での「hello_controller.rb」のコードを抜き出すと、以下のようになっているかと思いますが、そこで「def index」という行が書かれているかと思います。
class HelloController < ApplicationController
def index
end
end「def index」から始まる行と「end」で終わる行の値までが「index」というアクションで実行する動きを定義するところになります。「#」コメントを付けて詳しく説明すると以下のようになります。
def index # ここからindexアクションの動きの始まり
# この中でindexアクションの動きを記述する
end # ここまでがindexアクションの動きの終わりindexアクションの動きをいくつか記述しても良いのですが、今回はできるだけ簡単にするために何も記述しないことにいたします。
しかし、何も記述していないからといって、イコール何もしないとはならないということです。（何も記述がない≠何も動きがない）
例えば、コントローラー内でアクションを付ける際には、デフォルトの動きのようなものがあって、それは「app\views」の中から、「（コントローラー名）\（アクション名）.html.erb」を探し出して、そのファイルをWebページとして表示する、というようなものです。
今回の場合は、helloコントローラーにindexアクションを定義しているので、「app\views」の中に「hello」と同名のフォルダ、「index.html.erb」ファイルが自動的に作られているはずです。（ファイルの場所は、Visual Studio Codeの画面から以下のように操作すれば確認できます。）
そのため、（ルーティングの設定にもよりますが）もし、ユーザーが「hello\index」に該当するURLへとアクセスしたら、helloコントローラーは、「app\views」の中から、「hello」と同名のフォルダ、「index.html.erb」ファイルを引っ張っていき、そのファイルをWebページと姿を変えていって、アクセスがあったユーザーへ、Webページを返していくというようなことをします。
そのため、アクションの中で記述が特になかったとしても、Webページを返していく、というようなことをするため、何かしらの処理をコントローラーは行います。
前置きが長くなって申し訳ありませんが、今回はとにかくhelloコントローラーのindexアクションについては特に記述を追加しないと認識していただけましたらと思います。
3. 「Hello World」を表示するためのビュー（View）を編集する
前々章にて、helloコントローラーを作るコマンドを入力したら、「app\views」の中に「hello」フォルダが自動的に作られ、その下に「index.html.erb」ファイルも一緒に作られていると思いますので、そのファイルの中身を編集して、「Hello World」の表示を追加します。
まず、「index.html.erb」ファイルを開く際には以下のように操作します。
ここで、Visual Studio Codeに表示された「index.html.erb」の中身を以下に抜き出してみると、
<h1>Hello#index</h1>
<p>Find me in app/views/hello/index.html.erb</p>上のように、HTMLのタグや文章などが入っており、通常のHTMLページと同じように編集することが可能です。なお、通常のHTMLページと異なり、Rubyのソースコードも「index.html.erb」の中に含めることができますが、今回はその説明を省略します。
今回は、「Hello World」という<h3>（見出しの種類の1つ）を以下のように追記して、追記した内容を保存します。
<h1>Hello#index</h1>
<h3>Hello World</h3> # ここが追記した箇所
<p>Find me in app/views/hello/index.html.erb</p>4. ローカルでの動作確認（「Hello World」表示確認）
前章までで「Hello World」を表示するためのページを作ったので、ローカルでアプリケーションを起動させて、ページの中身を確認します。
アプリケーションを起動する際には、コマンドプロンプトから、作業場所（カレントディレクトリ）を作成したRailsアプリケーションプロジェクトでデータ（ディレクトリ）のある場所まで移動した状態で、以下のコマンドを入力します。
jruby -S bundle _1.17.3_ exec rails serverただ、コマンドを入力してアプリケーションを起動させてみると、以下のようになぜかアプリケーションを起動していないはずなのに、「アプリケーション起動済」という旨のメッセージが表示されて、アプリケーションが起動できないことが時々あります。
そんなときはひと手間ですが、Visual Studio Codeの画面から以下の①と②のように操作して、「server.pid」を削除しておいてください。
または以下のコマンドを入力することで、「server.pid」を削除することも可能です。
del tmp\pids\server.pid実際にコマンドを入力してみると、以下のようにコマンド入力後は何もメッセージはでませんが、「server.pid」が削除された状態になります。
「server.pid」を削除したら改めて以下のコマンドを入力してみます。
jruby -S bundle _1.17.3_ exec rails server今度はローカルでアプリケーションの起動に成功するかと思います。また、コマンド入力後のメッセージの中に、Railsアプリケーションをローカルで動かした際のルートURL（例：「http:\\localhost:3000」も一緒に出るかと思います。（Railsのバージョンなどによってはもしかすると出ないこともあるかもしれませんが。）
ここで実際の「Hello World」が表示されているページへとアクセスしてみます。アクセスするためのURLは上記の写真の中で表示されているルートURLと、「config\routes.rb」ファイルで記載されているルーティングの設定によって決まります。
例えば、先ほど「config\routes.rb」ファイルについて記載いたしましたが、「get 'hello\index'」というルーティングがあった場合のURLは、
「（ルートURL）\hello\index」
です。
そのため、今回、アプリケーションをローカルで動かした際のルートURLは「http:\\localhost:3000」でしたので、URLは
「http:\\localhost:3000\hello\index」
となり、そのURLをアクセスすれば、該当するページが見られると思います。
ということで、そのURLを開いてみます。開いてみると以下のように「Hello World」というページが表示されていると思います。
このページの内容は、前章の3にて「app\views\hello」フォルダの中の「index.html.erb」で定義したファイルの内容に従って表示されています。
「index.html.erb」の中に、<h3>タグで、「Hello World」というのを記述したため、上記のように表示されるということになります。
なお、起動したアプリケーションを終了する場合は、コマンドプロンプトに対して、以下の①、②の操作を行なうことでアプリケーションを終了させることができます。（単にコマンドプロンプトの画面右上にある「×」ボタンを押してコマンドプロンプトを終了することによっても、Railsアプリケーションを終了させることができます。）
おわりに
とても長くなってしまいましたが、ここまで読んでくださってありがとうございました。
今日で、「Hello World」ページ作成は終わりましたので、明日は「ルーティング設定＆Gitへのコミット＆Herokuへのデプロイ」を実行して、デプロイ作業を終わらせる予定です。
次回に続きます。
この記事が気に入ったらサポートをしてみませんか？