ローカル環境でRailsアプリを開発し、Herokuへデプロイする方法

素人がアプリ開発をする上で必ず引っかかるのが以下4つの難関です。

• ローカル環境設定
• Railsアプリ開発（Gem, DB設定）
• GitHub, Herokuの設定
• Deployとリリース後の確認

逆に上記４つをマスターすることで簡単にアプリ開発を行い、形にしてしまうことが可能になります。

ローカル環境設定

Macでのローカル環境設定はこちらを参考にしてください

Macのローカル環境設定で挫折しがちなのは以下です。
実際に自分もすべて実行してみて思ったことです。

Vagrant, Virtualbox導入って必要？

結構設定が色々と複雑で、ドットインストールを見てできましたが、
これって本当に必要ありますか？って思って現役エンジニアに聞いたところ、
ローカルでRails sすれば特に導入しなくても問題ないらしいとのことでした。
やめます！インストールやめます！

Ruby, Railsインストール時のrbenv, homebrew

Ruby, Rails等をインストールするときにrbenvとかhomebrewとかよくわからないサイトにとばされてこれ本当に正しいやりかた？感が出てくる
→正しいらしいです
参考
[Rails開発環境の構築（rbenvでRuby導入からBundler、Rails導入まで）（Macport編）]
(https://qiita.com/emadurandal/items/a60886152a4c99ce1017)

railsサーバー起動時のブラウザ画面表示エラー

railsアプリをデプロイしてリリースしたときにいざ画面みたいってときにブラウザ画面に表示エラーが出ます。これはのちに出てきますが、Railsアプリがちゃんと作成されていないか、URLのPathが違っていて表示されない場合が多いです。

ローカル環境設定後

ローカル環境設定が完了したかどうかってどうやってわかるんでしょうか。
同じ境遇の人はRailsアプリがきちんと作成でき、サーバーを起動してアプリが正常であれば、
ローカル環境設定が完了したということらしいです。

情報収集した中でどのようにしたらローカル環境設定が完了するかがあまり書かれてなかったので、ふわっとした理解になったままでしたが、Railsアプリが作成できたらローカル環境設定完了とのアドバイスをもらって明確化できたのでこちらを踏まえてRailsアプリ開発に進んでください。

久しぶりに戻ったらこのエラーが出る

The `rails' command exists in these Ruby versions:
久しぶりに戻ったらこのエラーが出ました。
対処方は以下のようです。

gem の更新をする
$ gem update --system

bundlerをインストールする
$ gem install bundler

railsをインストールする
$ gem install rails

*ちなみにRailsアプリ作成にて使ったフォルダー毎にRails sしないとエラーになることも忘れてました。

Railsアプリ開発（Gem, DB設定）

[Railsアプリ開発はこちらを参考]
(https://www.sejuku.net/blog/8178#Rails-2)

###現在の位置を把握する方法

まずRailsアプリを作成する前に、ターミナル上で自分の現在地を把握する必要があります。
そのままRailsアプリを作るとMacのユーザーの下にフォルダーができますが、素人的にはどこに行ったかわからなくなります(笑)。
こちらのコマンドで確認ができます。小文字のエルとエスです。

$ ls

Railsアプリ作成をデスクトップ上に行う場合（素人にオススメです)はまず

$ cd Desktop

としましょう。そしてもう一度デスクトップ内でlsのコマンドをタイプすると、

Desktop ユーザー名$ ls

デスクトップ上にあるフォルダーやファイルなどがリストアップされます。

###Railsアプリ作成、DB設定

こちらを把握した上でデスクトップ上もしくは指定したいフォルダ内にRailsアプリを作成します。Heroku上ではSqliteだと設定が難しくなることを何回も経験したため、 -d postgresqlを追加して最初からpostgresqlを設定します。

Railsアプリを作る前にDB作成をしましょう

Postgresql(psql)の作成をするにあたって、今後アプリを作成したい場所をデスクトップ上に作成した上で、現在のpsqlのバージョンを把握してみましょう。ここではDesktopの上にmyappフォルダーを作った設定とします。
一度cdでデスクトップからフォルダーの中に入りましょう。

ユーザー名$ cd Desktop

Desktop ユーザー名$ cd myapp

この後、現在のpsqlのバージョン把握をするため以下のコマンドをタイプしてみます。

myapp ユーザー名$ psql --version

また現在作成されているpsqlのDBを調べるには以下のコマンドをタイプしてみましょう。

Desktop ユーザー名$ psql -l

そうすると現在作成してあるDBのリストが出てくるかと思います。また何もまだ作成されてない場合はデフォルトのリストが出てきます。

$ createdb 希望のDB名

psqlのDBは上記で作成できる為、作成した後にpsql -lで再度確認してみましょう。

psqlのDBが作成できたら、psql設定でrailsアプリを作成しましょう

デスクトップ上でrailsアプリの作成を行う場合は、以下を実施します。

Desktop ユーザー名$　Rails new アプリ名 -d postgresql

Railsのバージョンを合わせたい場合は以下のようにすれば、
バージョンがあった状態で、デスクトップにアプリフォルダが追加され、
Postgresqlを使ったアプリ作成が完了するはずです。

Desktop ユーザー名$ rails _4.2.6_ new アプリ名 -d postgresql

Railsアプリ作成が正しくできたかどうかの確認

再度

Desktop ユーザー名$ cd アプリ名

としてアプリフォルダの中に入り、

アプリ名 ユーザー名$ rails s

rails s のコマンドでrailsサーバーを起動することができます。
あとはchromeブラウザなどでURL部分に

と打てばrailsが正常に起動している画面が出てきますのでこちらでアプリ作成完了です。
ターミナルを元の状態に戻すにはCtrl+Cをすれば戻ります。

Railsアプリ作成後の基本ページ設定

Railsアプリ作成後、アプリの基礎となるトップページ、サービス紹介ページ、運営ページ、問い合わせページぐらいは作っておきたいので、以下のコマンドを試しにやってみてください。

$ rails g controller home index product about contact

そうすると

となり、
これでindex, product, about, contactの基礎となるページができます。
↓↓↓↓↓↓↓ あなたの記事の内容
その後のbootsrapでrailsアプリのデザインを整えます。
───────
その後のbootstrapでrailsアプリのデザインを整えます。
↑↑↑↑↑↑↑ 編集リクエストの内容

bootstrapでrailsアプリのデザインを整える方法

bootstrapはウェブやアプリデザインのテンプレートとなるもので、正しい設定の仕方をすれば時短でデザインができてしまうのでオススメです。

参考としてはこちらで十分わかりやすいかと思います。
Railsアプリで Bootstrap 4 を利用する

途中このgemのコードをどこに入れたらいいのかですが、

Gemfile

gem 'bootstrap', '~> 4.0.0.beta2.1'
gem 'jquery-rails'

場所はどこでもいいそうですので、他のgemコードと合わせた行間でどこか間に入れておくといいと思います。

あとのタスク解説としては

以下のコードでバージョンが確認できる

$ bundle show |fgrep sprockets-rails

application.cssのエクステンションをapplication.scssに変更
そして
application.scssファイルの中の一番下に以下を入れて保存

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

application.jsファイル内に以下を入力して保存する。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

で設定完了のようです。
別途デザインについては参考記事をリストアップしていきます。
ここに別記事があったので、最初からBootstrap化していくやり方も別で研究していきたいと思います。
[RailsにBootstrapデザインを適用する]
(https://qiita.com/kamizuno/items/5c3ecceea5aa78e25058)

GitHub, Herokuの設定

###GitHubとは？Gitとは？
[そもそもGitとは?GitHubとは?という方はこちら]
(https://qiita.com/mxsha/items/08f076b4d1437f44f8bd)

###GitHubの使い方
[GitHubの設定もこちらを参考]
(https://qiita.com/mxsha/items/08f076b4d1437f44f8bd)

###Herokuとは？
Herokuとはサーバー設定を代行してくれて無料でアプリケーションを公開できるPlatform as a Serviceと呼ばれるクラウドサービスです。詳細はこちらからもご確認いただけます。

###Herokuを利用できるように設定する
まずはHerokuの新規登録を行います。
こちらHeroku | Cloud Application Platformにアクセスして登録を行います。
登録できたら、ターミナル上でHerokuコマンドを使えるように設定しましょう。

###Herokuコマンドをターミナル上で使用できるように設定する
こちらからMacでのコマンドをみつけ、インストールする
https://devcenter.heroku.com/articles/heroku-cli
インストールできれば完了です。

###Heorkuにターミナルからログインしてサーバーを設定しよう

まずはログインしてみましょう。

$ heroku login

そうするとちゃんとHeroku登録されていれば、ログイン問題なくできると思いますので、
そのあとheroku create サーバーの名前　という構成でターミナルにタイプすれば
サーバーの構築をすることができます。

サーバー名の例としては以下です。

$ heroku create your-heroku-app-name

これを実行したら、

上記サーバーの名前がHerokuのトップ画面より確認できたら、
それではいよいよデプロイです！

デプロイとリリース後の確認

###デプロイしよう
まず以下のコマンドをターミナル上でタイプしてデプロイします。

$ git push heroku master

エラーが出る場合は、
・もう一度GitHubのリポジトリにRailsアプリケーションが接続されているか
・Herokuへデプロイする前に、GitHubにRailsアプリケーションがプッシュされているか
を確認してみてくださいとのことでした。

今回はPostgresqlを使ったアプリを本番リリースするので、

$ heroku run rake db:migrate

rake db:migrateというコマンドでデータベースを更新できるようです。

これでアプリ公開ができたはずです！！！
と思いきや、２週間ほど、アプリのデプロイができない状態に苦しみました

原因はこれです。
[アセットパイプライン。。。]
(https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/)

###リリース後の確認
アプリが無事公開されているか確認してみましょう。

$ heroku open

こちらのコマンドをタイプすると自動的にブラウザーが出てきます。
Herokuでアプリを公開する場合は以下のようになります。
http://サーバー名.herokuapp.com/
が、指定のViewをきちんとURLに書き足してあげないときちんと出てきません。

現状
http://サーバー名.herokuapp.com/
となっているので、例えば
http://サーバー名.herokuapp.com/[Viewファイル内のパス]/index.html
として、アクセスしてみてください。

そこでBootstrapでデザインした自分の画面が出てくれば公開完了です！
お疲れ様でした！

**出てこない場合の対処方法
アプリケーションエラーになる場合は様々な原因が考えれるそうですが、
以下をまず試すことで動くかもとのことでした。
・HerokuのRuby、Railsバージョンを合わせる
これでアプリケーションエラーになる場合は以下を試す。
[Herokuでトラブルがあった場合に試したい]
(https://devcenter.heroku.com/articles/getting-started-with-rails4#specify-ruby-version-in-app)
[[Ruby on Rails Tutorial]Herokuにデプロイ後Application error[H10 (App crashed)]が発生した時の対処法]
(https://qiita.com/masarusan24/items/77d064147a32169b5449)

###リリース後の編集と再度のリリース
リリース後に編集することがあるかと思います。
その場合は以下をタイプしてローカルのgitを更新します。

$ git add .
$ git commit -m "xxxxxxxx"
$ git push origin master

とローカルでコミットした後にリモートレポジトリにあげる必要があります。

$ git push origin master

上記のコマンドでリモートレポジトリに上がることができたら、
再度こちらのコマンドでデプロイしてあげましょう。

$ git push heroku master

とすれば現状のアプリ更新がリリースされ反映されます。

現状
http://サーバー名.herokuapp.com/[Viewファイル内のパス]/index.html

参考

挫折した人必見！HerokuでRailsアプリを公開する方法
最速！MacでRuby on Rails環境構築
Railsアプリで Bootstrap 4 を利用する
[RailsにBootstrapデザインを適用する]
(https://qiita.com/kamizuno/items/5c3ecceea5aa78e25058)
[Herokuでトラブルがあった場合に試したい]
(https://devcenter.heroku.com/articles/getting-started-with-rails4#specify-ruby-version-in-app)
[[Ruby on Rails Tutorial]Herokuにデプロイ後Application error[H10 (App crashed)]が発生した時の対処法]
(https://qiita.com/masarusan24/items/77d064147a32169b5449)