【備忘録】Rails＋MongoDBを使用を想定したアプリの雛形作成からGitHubとHerokuにデプロイするまでの手順

MacにてRails＋MongoDBを使用したアプリを作成する際の
新規プロジェクト作成からGitHubにあげるのと
Herokuにデプロイまでの手順です

RailsとMongoDBでアプリを作ったので、その時の環境構築を再現できるようにしたく。環境構築は面倒ですので・・・

(Macを想定していますが、読み替えればLinuxやwindowsでもできると思います)

#今回作成するもの
Heroku上でアプリ作成するための雛形作成、およびHeroku環境構築とソース管理にGitHub使用

今回作るものの簡易的なイメージです。
![rails_MongoDBテンプレ.jpg](https://qiita-image-store.s3.amazonaws.com/0/238856/ffdbc0de-ac8c-0802-df6b-4e4a5cdcdaa4.jpeg)

ちなみに[draw.io](https://www.draw.io/)で作成しました。draw.ioを使うと概略図が作りやすかったりします
またHerokuからGitHubに連携することで、GitHubにデプロイするとHerokuにも自動的にデプロイできますが、今回は割愛します。

# プロジェクト作成から簡易ページがローカルで表示できるまで
まずは、プロジェクト作成してから簡易的なページを作成するところまでを行います

### プロジェクトフォルダ作成

まず、Railsをインストールする前に、Railsプロジェクト用のフォルダを作成し
そのプロジェクト内のgemにRailsをインストールします。ひとまずプロジェクト名は適当に'test_chat'にしときましょうか。

`＄　gem install rails` 
`$rails new test_chat`
のようにしてシステムにgemにインストールを行う方法でもいいのですが、
システムのgemをクリーンに保っておいたほうが、他のプロジェクトやシステムへの影響が少なくなるかと思います。
gemはvendor/bundleに入れてbundle execで呼び出すようにするのが良いそうです。
(参照:[新規Railsプロジェクトの作成手順まとめ](https://qiita.com/yuitnnn/items/b45bba658d86eabdbb26))

ということでターミナルやらfinderやらでプロジェクトフォルダを作成します。

```cmd:ターミナル
$ mkdir test_chat
$ cd test_chat
```
この時にVScodeやAtomをお持ちの場合、作成したフォルダを開いた後にエディタ内のターミナルでコマンドを叩くと、ターミナルを複数立ち上げずにすむので少し楽になるかもしれないです

![スクリーンショット 2018-12-22 18.03.51.png](https://qiita-image-store.s3.amazonaws.com/0/238856/3de92cba-9151-3fa7-6304-8ab08fa42bdf.png)

（なおもしこのプロジェクトのrailsのバージョンを指定したい場合、HomeBrewとrbenvをインストールします。参照:[MacにHomeBrew,rbenv,bundlerをインストールする](https://qiita.com/shinkuFencer/items/3679cfd966f6a61ccd1b))

### Gemfile作成とインストール
次にGemfileを作成します。

```cmd:ターミナル
$ bundle init
Writing new Gemfile to /Users/owner/Documents/ruby/chat_test/Gemfile
```
を叩くとルートフォルダーフォルダ内にGemfileができます。
（なおもし、bundleがシステムにインストールされていない場合は
`$gem install bundler`でインストールできます。）

次に`#gem "rails"`のコメントを外して `vendor/bundle`にインストールします

```cmd:ターミナル
$ bundle install --path vendor/bundle
```

### Railsプロジェクト雛形作成
次にRailsプロジェクトを作成します。（この例ではMongoDBを使用する予定ですので、--skip-active-recordをつけています)

```cmd:ターミナル
$ rails new . --skip-active-record
```

(.で現在のフォルダにインストール　。--skip-active-recordの詳細はこちら
[rails newで--skip-active-recordをつけ[た|なかった]時の違い]（https://qiita.com/satoh-disk/items/1a5aa14e0c5d57f422e6）)

この時Gemfileを上書きするか聞かれるかもしれないですが、上書きで問題ないです。これで、プロジェクトの雛形ができました。


#### 確認
この時点で一旦サーバーを立ち上げてみましょう。

```cmd:ターミナル
$ rails s
```

無事立ち上がったら以下のリンクで、Railsのwelcomeページが表示されていたら一旦おｋです！
http://localhost:3000

![スクリーンショット 2018-12-22 20.38.41.png](https://qiita-image-store.s3.amazonaws.com/0/238856/461a366e-9254-23dd-d76b-0eb23e30fe19.png)

### MVC作成
次にモデルとかコントローラとかビューの雛形を作成します。

```cmd:ターミナル
$ rails g model chat
$ rails g controller chat index
#chatコントローラ、indexページ
```
を叩くと/app内に
model: /models/chat.rb
controller: /controllers/chat_controller.rb
view: /views/chat/index.html.erb
ができます。


###mongoid.yml作成
次にDBの設定を行います
configファイルを作成します。

```cmd:ターミナル
$ bundle exec rails g mongoid:config
```

/configにmongoid.ymlが作成されます。このままでもローカルでは動きますが、
herokuにデプロイすることを想定して、下記を追記します。(ここではコレクション読み込み時にレコードがなくてもDocumentNotFoundにならないようにraise_not_found_errorをfalseにしてます)

```yml:mongoid.yml
production:
 clients:
   default:
    uri:
    options:
      connect_timeout: 15
 options:
    raise_not_found_error: false
```

###ルートページ設定
次にローカルや本番でテストを行うために、ルーティングを変更します。
configフォルダの中のroutes.rbを以下のように編集してください。**注意:何かしらrootを設定しないと、Herokuデプロイ後に「ページが存在しない」というエラーになります。**

```rb:/config/routes.rb
Rails.application.routes.draw do
  get 'chat/index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root 'chat#index'
end
```

####確認
再び以下のリンクで、以下のようなページが出たらおｋです！
http://localhost:3000

![スクリーンショット 2018-12-23 1.37.05.png](https://qiita-image-store.s3.amazonaws.com/0/238856/c4373598-dfa5-aa63-bfd7-2d1a161f8def.png)


#GitHubにPush
ここまでで一旦雛形として、gitの管理下に置きます。
ここではサービスとしてGithubを使用する場合を想定します。

gitの詳細は以下に詳しいです。
[いまさらだけどGitを基本から分かりやすくまとめてみた](https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0)
>分散型バージョン管理システム。各々のローカルで変更履歴を利用して自由にファイルの編集やローカルコミットができます。

(gitのインストールは→[git Downloads](https://git-scm.com/downloads)
`$ git --version`を叩き、ヴァージョンが出ればOKです)

###.gitignoreの設定
前準備として.gitignoreを設定します。
ここでは[gitignore.io](https://www.gitignore.io/) で'Rails'を入力した時に生成してくれる.gitignoreファイルをそのまま使う事とします。

###Githubでリポジトリ作成
Githubをユーザ登録していない方は、登録を行いましょう。
次にGithubのトップページの左に緑色の'new repository'ボタンよりリポジトリを作成します。
![スクリーンショット 2018-12-23 14.28.30.png](https://qiita-image-store.s3.amazonaws.com/0/238856/a304d172-18ec-6ef1-00f6-980c23b96603.png)

作成したリポジトリから、緑色の'clone or downloadボタン'でリモートリポジトリのURLが表示されます。
![スクリーンショット 2018-12-23 14.33.14.png](https://qiita-image-store.s3.amazonaws.com/0/238856/aca83025-9a48-13e4-9324-8f04db366129.png)



###git

git initでまずはローカル内にgitリポジトリを作成します。

```cmd/ターミナル
#このコマンドは最初の一回だけでいいです。
$ git init 
```

次に、初めてGitHubに登録する場合、ユーザー名とemailを求められるので

```cmd:ターミナル
$ git config --global user.email
$ git config --global user.name
```

でConfigを登録しておきます。もし、別のアカウントでコミットする場合も設定し直すと良いです。

次にファイルをローカルリポジトリにコミットします

```cmd:ターミナル
# gitignoreで設定したファイル以外をコミットします
＄　git add .
＄　git commit -m "雛形作成"
```


最後にマスターリポジトリ(GitHub上のリポジトリ)をｐushします(マスター以外のリポジトリの場合はmasterを別に設定)

```cmd:ターミナル
$ git remote add origin https://github.com/username/hoge.git
$ git push origin master
# originという別名でリモートリポジトリを加えます
# マスターにpush

```

push成功してGitHubのリポジトリページからもコミットが確認できればOKです!

#Heroku
次にHerokuにデプロイします

###Herokuとは
Webアプリケーションの公開を簡単にできるプラットフォームです。
通常比較的難しいRailsのデプロイを少し簡単に行う事ができます

###準備
####ユーザ登録
ユーザ登録を行っていない場合、Herokuにユーザ登録を行います
[Sign up for free](https://signup.heroku.com/）

####クレジットカード情報登録
次にHerokuでMongoDBを使用するためはアドオンを使いますが、そのためにはクレジットカード情報を登録する必要があります。（お試しでデプロイを行う限り請求されることはないです）Herokuダッシュボードの右上のユーザーアイコンから、Account settings をクリック。Billing を選択し、Billing Informationでクレジットカード情報を登録する。

####Heroku　toolbelt導入
次にターミナル上でHerokuを操作するために、Heroku　toolbeltをインストールします
[The Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)

###アカウント認証
PCからHerokuにログインします。メールアドレスとパスワードを求められるので、ユーザ情報を入力してください。

```cmd:ターミナル
$ heroku login
```

成功すると`Log in as メールアドレス`表示されます。

###Heroku上にアプリ作成
herokuにアプリを作成します
このとき、名前指定をしなければ自動的に名前がつけられます。名前はあとからでも変更可能です。

```cmd:ターミナル
$ heroku create [アプリ名(空白でもOKです)]
```

###Herokuにデプロイ
Herokuにデプロイします

```cmd:ターミナル
$ git push heroku master
```

エラーなくdeploy doneが出たら成功です


####rubyのバージョンが古いためエラーになった場合

Herokuにデプロイする際にもしかしたら、以下のようなエラーが出て
バージョンが古くてデプロイできないと言われるかもしれないです。

```log：log
remote:  !     An error occurred while installing ruby-2.3.7
remote:  !
remote:  !     This version of Ruby is not available on Heroku-18. The minimum supported version
remote:  !     of Ruby on the Heroku-18 stack can found at:

```

この時はその場しのぎですがGenfileをいじります

```Gemfile：Gemfile
# ruby '2.3.7'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.1'
```

とrubyのバージョンをコメントアウトしてから`$　bundle update`を行い
再び`$ git push heroku master`を行います

###Heroku確認
Heroku上にデプロイがきたかどうか確認しましょう
以下のコマンドでブラウザが立ち上がり、ページが表示されます。

```cmd:ターミナル
$ heroku open
```

以下のような画面が出たら成功です。


![スクリーンショット 2018-12-23 17.14.42.png](https://qiita-image-store.s3.amazonaws.com/0/238856/8449c1f3-59e1-9dd5-0a48-a9ff6e779d7a.png)









参照
---
[MacにHomeBrew,rbenv,bundlerをインストールする](https://qiita.com/shinkuFencer/items/3679cfd966f6a61ccd1b)
[新規Railsプロジェクトの作成手順まとめ](https://qiita.com/yuitnnn/items/b45bba658d86eabdbb26)
[Rails + MongoDBのメモ](https://qiita.com/oggata/items/58c3c8ef399b690853ba)

だいたいここらへんの自分なりのまとめだったりします。
ありがとうございます。

概略図作成サービス:[draw.io](https://www.draw.io/)