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

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

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

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

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

# **ローカル環境設定**
Macでのローカル環境設定は[こちらを参考にしてください](https://hajipro.com/ruby/mac-ruby-development-environment)

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アプリがきちんと作成でき、サーバーを起動してアプリが正常であれば、
ローカル環境設定が完了したということらしいです。

<b>情報収集した中でどのようにしたらローカル環境設定が完了するかがあまり書かれてなかった</b>ので、ふわっとした理解になったままでしたが、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のユーザーの下にフォルダーができますが、素人的にはどこに行ったかわからなくなります(笑)。
こちらのコマンドで確認ができます。小文字のエルとエスです。

```js:
$ ls
```

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

```js:
$ cd Desktop
```

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

```js:
Desktop ユーザー名$ ls
```

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

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

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

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

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

```js:
ユーザー名$ cd Desktop
```
```js:
Desktop ユーザー名$ cd myapp
```
この後、現在のpsqlのバージョン把握をするため以下のコマンドをタイプしてみます。

```js:
myapp ユーザー名$ psql --version
```

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

```js:
Desktop ユーザー名$ psql -l
```

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

```js:
$ createdb 希望のDB名
```

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

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

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

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

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

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

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

再度

```js:
Desktop ユーザー名$ cd アプリ名
```

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

```js:
アプリ名 ユーザー名$ rails s
```

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

http://localhost:3000/

と打てばrailsが正常に起動している画面が出てきますのでこちらでアプリ作成完了です。
ターミナルを元の状態に戻すにはCtrl+Cをすれば戻ります。
![スクリーンショット 2018-02-14 22.57.48.png](https://qiita-image-store.s3.amazonaws.com/0/108456/7bb20cd5-d5ec-d213-0b01-340cc6530132.png)

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

```js:
$ rails g controller home index product about contact
```
そうすると
![スクリーンショット 2018-02-17 18.43.09.png](https://qiita-image-store.s3.amazonaws.com/0/108456/cc1f9e6f-d2af-28b8-db7d-c74fa943a812.png)


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

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

参考としてはこちらで十分わかりやすいかと思います。
[Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)

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

```ruby:Gemfile
gem 'bootstrap', '~> 4.0.0.beta2.1'
gem 'jquery-rails'
```

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

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

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

```js:
$ bundle show |fgrep sprockets-rails
```
**application.css**のエクステンションを**application.scss**に変更
そして
application.scssファイルの中の一番下に以下を入れて保存

```js:
// 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と呼ばれるクラウドサービスです。詳細は[こちらから](https://www.sejuku.net/blog/7858)もご確認いただけます。

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

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

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

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

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

```js:
$ heroku create your-heroku-app-name
```

これを実行したら、

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

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

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

```js:
$ git push heroku master
```

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

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

```js:
$ 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/)

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

```js:
$ 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を更新します。

```js:
$ git add .
$ git commit -m "xxxxxxxx"
$ git push origin master
```
とローカルでコミットした後にリモートレポジトリにあげる必要があります。

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

```js:
$ git push heroku master
```
とすれば現状のアプリ更新がリリースされ反映されます。

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


# **参考**
[挫折した人必見！HerokuでRailsアプリを公開する方法](https://www.sejuku.net/blog/8178#Rails-2)
[最速！MacでRuby on Rails環境構築](https://qiita.com/narikei/items/cd029911597cdc71c516)
[Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)
[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)