28日目 jrubyアプリのherokuへのデプロイ⑧(完了編)

おはようございます。
今日の今日こそはデプロイ作業を終わらせようと思います。

昨日までのおさらい

前回の記事までで、JRuby on Rails(Rails)アプリケーションをherokuへデプロイしたのはよいものの、そのデプロイしたアプリケーションを開こうとしたら、「Railsのルーティング設定が足りてない」という旨のエラーが表示されていました。

画像

Railsアプリケーションのプロジェクトデータの配下の「config/routes.rb」にRailsのルーティング設定を記載するファイルがあるのですが、そのファイルにて、root(Webサイトにアクセスした際に最初に表示されるページ)が設定していないために起こるものだそうです。

そのため、rootを設定しようと思いましたが、そもそもデプロイするRailsアプリがまだ何も実装していない状態で、Webページすら作っていなかったため、昨日、「Hello World」ページのようなものを作りました。(昨日の記事はこちら)

今日はその「Hello World」ページをrootに設定しておき、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アカウント作成済)

今日やること

  1. Railsのルーティング設定

  2. ローカルでのアプリ起動&動作確認

  3. 変更内容をGitにコミット(登録)

  4. Herokuへのデプロイ

本日の作業

1. Railsのルーティング設定

Railsにおいてルーティング設定はRailsアプリケーションのプロジェクトデータの配下の「config/routes.rb」の中身を編集することによって行ないます。そこで、「config/routes.rb」をVisual Studio Codeで開きます。

「config/routes.rb」の開き方については、昨日の記事の「事前説明2. helloコントローラーを作る前の状態を確認」見出しに記載しております。

「config/routes.rb」をVisual Studio Codeで開いてみると、現在は以下のような状態になっております。

「config/routes.rb」のコードを以下に抜き出すと、

1 Rails.application.routes.draw do
2   get 'hello/index'
3
4   # The priority is based upon order of creation: first created -> highest priority.
5   # See how all your routes lay out with "rake routes".
6
7   # You can have the root of your site routed with "root"
8   # root 'welcome#index'

  ~9行目から51行目までは全てコメントのため、省略~

52  # Example resource route within a namespace:
53  #   namespace :admin do
54  #     # Directs /admin/products/* to Admin::ProductsController
55  #     # (app/controllers/admin/products_controller.rb)
56  #     resources :products
57  #   end
58 end

となっておりますが、上のコードの8行目に注目すると、
「 # root 'welcome#index'」となっていて、先頭に「#」がついているため、ソースコードとはならず、コメントになっています。

実は、先頭の「root」とその後の「'(コントローラー名)#(アクション名)'」の組み合わせによってrootの設定を行なうことが可能です。
例えば、今回の場合、昨日までの作業にて「hello」コントローラーを作成済で、そのコントローラー上に「index」アクションを定義済です。

そこで、8行目を

8   # root 'welcome#index'

から

8   root 'hello#index'

に変更して保存します。(「#」も消して、コメントではなく、ソースコードとしてアプリケーションサーバに認識させるように変更します。)
上記のように変更することで、rootが設定された状態になります。

※「root」の設定に関する補足説明

この章は補足説明ですので、作業は特にありません。そのため、読まなくても可能、読んでもよくわからない方は読み飛ばしていただいても問題ありません。

「root 'hello#index'」を設定した場合、アプリケーションはどのような動きをするのかというと、「root」には、Webサイトにアクセスした際に最初に表示されるページを決めるような動きがあります。

今回の場合、「root 'hello#index'」と設定すると、「root」の右側の「'hello#index'」のところをアプリケーションサーバが読み込むと、サーバは「hello」コントローラー上で定義された「index」アクションを実行しようとします。

それで、「hello」コントローラー上で定義された「index」アクションは現在、以下のコード(コードの場所:「app/controllers/hello_controller.rb」)の状態となっていますが、

1 class HelloController < ApplicationController
2   def index
3   end
4 end

「def index」と「end」の間(コードの2行目~3行目)には何も記述されていないため、特別な処理は行わず、デフォルトで定義されている動きだけ実行しようとします。

ここでのデフォルトの動きとは、「app\views」の中から、「(コントローラー名)\(アクション名).html.erb」という名前のファイルを探し出して、そのファイルをWebページとして表示することです。

今回は、「hello\index.html.erb」というファイルを「app\views」の中から見つけて、そのファイルをWebページとして表示する動きのみ実行することになります。

説明が長くなってしまいましたが、まとまると「root 'hello#index'」と設定すると、以下の(1)~(6)の流れでアプリケーションの処理が行われるようになります。


2. ローカルでのアプリ起動&動作確認

前述1の小見出し「1. Railsのルーティング設定」にて、rootの設定が終わったと思いますので、ローカルでアプリを起動して動きを確認してみます。

ローカルでのアプリの起動方法については、昨日の記事の「4. ローカルでの動作確認(「Hello World」表示確認)」見出しに記載しております。

アプリを起動したら、ブラウザも起動して、URLに「http://localhost:3000」と入れてみてください。(ローカルでは特にRailsの設定に変更がない限りは「http://localhost:3000」がルートURLになると思います。)

すると以下のように「Hello World」というメッセージのあるページが表示されるかと思います。この表示を確認できれば、rootの設定がなされたことになります。

3. 変更内容をGitにコミット(登録)

あとは、昨日(helloコントローラーと「Hello World」ページの作成)と今日(ルーティングのrootの設定追加)の作業によって変更・追加したファイルをGitへコミットします。

まず、コマンドプロンプトを立ち上げて、「cd」コマンドなどで自分が開発したアプリのプロジェクトデータがある場所まで作業場所を移動させておきます。(今回の例では「C:\Users\youto\Desktop\playtool\real_chat」とします。)

画像

その状態で以下のコマンドを入力します。

git status

すると、以下のように変更されたもののまだコミットされていないファイル(赤字で「modified: config/routes.rb」と書いてある行)と、変更した内容の追跡対象となっていないファイルの一覧(「Untracked files:」と書かれている行の下に赤字で書かれているところ)が表示されるかと思います。

これらのファイルをすべてGitリポジトリに登録しておきます。まず、以下のコマンドを入力して、すべてGitのコミット対象に追加します。

git add .

そしたら、以下のコマンドを再度入力します。

git status

そしたら、以下のように先ほどは赤字だったファイル一覧が、すべて緑色に変わっていると思いますが、緑色に変わったファイルは、変更・追加したファイルがすべてGitのコミット対象(緑色)になっていることを表します。

その状態で、次のコマンドを入力して、Gitリポジトリへコミットを行ないます。

git commit -m "hello controllers add"

上のコマンドの一部の"hello controllers add"は、コミット時のコメントで、内容は何でも可能です。(ただし、英語かローマ字で登録)

コマンドを入力すると、以下のようにコミットされると思います。

コミットが終わったら、以下のコマンドをまた入力します。

git status

コマンドを打つと、以下のように変更・追加したファイルが何もない状態に戻っていると思います。

一応、次のコマンドも打って、コミット履歴も確認します。

git log

コマンドを打つと、今までのコミット履歴が新しい順に上から表示されると思いますが、最新のものはコメントが「hello controllers add」になっていると思います。

ここまでで、Gitへのコミット作業は終了です。

4. Herokuへのデプロイ

最後に、herokuへのデプロイを行ないます。
前述の3章までの作業で、変更した内容をGitのローカルリポジトリへ登録できたので、あとはその内容をGitのリモートリポジトリにも反映させてデプロイを行なうだけです。

まず、コマンドプロンプトを起動した後、以下の①~④を実行して、「Heroku CLI」へのログインを済ませて、コマンドプロンプトからHerokuと通信ができる状態にしておきます。

※上記写真の中にある④については、自動的に起動されるログイン画面というのは以下のような「Heroku CLI」へのログイン画面です。この画面から「Log in」ボタンを押し、その後に聞かれるユーザー名とパスワードを入力してログインします。(ユーザー名とパスワードはHerokuアカウント作成時に作ったものと同じです。)

上記の①~④の操作が終わりましたら、以下のコマンドをコマンドプロンプトから入力します。

git push heroku main

入力してみると以下のように少しずつデプロイに関するメッセージが出てきます。前回、一度はデプロイできたので、今回は成功するとは思いますが、念のためデプロイが終わるまで祈りながら待機します。

デプロイが進んで、エラーメッセージが出ることもなく、最後に以下のような表示になっていればデプロイ成功です。

あとはデプロイしたアプリケーションのインスタンスを起動して、heroku上で動かします。インスタンスを起動するコマンドは以下の通りです。

heroku ps:scale web=1

入力してみると、以下のように「Scaling dynos… done, now running web at 1:Free」というメッセージが出ますが、これでデプロイしたアプリケーションのインスタンスを1つ起動したことになります。

最後に、アプリケーションがheroku上で動いているかどうか、以下のコマンドで確認します。

heroku open

実際にコマンドプロンプトから入力すると・・・

無事、「Hello World」が表示されました。前回はここでエラーが出ていましたが、エラーが出ることもなく、デプロイを完了することができました。

ちなみに、heroku上で起動したアプリケーションを停止させたい場合は、次のコマンドを入力することによって、アプリケーションを手動で停止させることもできます。(何もしなくとも、30分以上アプリケーションを動かさなければスリープモードに入り、自動的に停止します。)

heroku ps:scale web=0

以上で、デプロイ作業はすべて完了となります。

おわりに

ここまで読んでくださって、ありがとうございました。
もっと早く終わるかと思いましたが、noteでの執筆で、どこまで詳しく説明するか考えながら書きましたので、思ったより時間がかかりました。

それでも何らかの役に立ったり、アプリケーションを作ることができるようになった人が一人でも二人でもいたらいいなあと思いながら書いておりますので、時間がかかっていくのがと良いことなのかなあと思います。

次回以降はそろそろアプリケーションの実装、つまりプログラミングの話を書いていきたいなと思いますが、そのためには何を実装するかを考える必要があって、そこで以前から作ろうと思っていたチャットアプリを作ろうと思っています。

今までがインストールとか環境構築ばかりで、構想・設計・実装(プログラミング)にほとんど手を付けられていなかったため、やっと、どんなものを作ったらよいか考えながら進めることができそうですので、次からはもっと楽しんで取り組むことができそうです。

次回も続きます。興味ありましたら、よろしくお願いいたします。

この記事が気に入ったらサポートをしてみませんか?