Ruby on Railsでアプリを作ってデプロイするまでの流れ【Progate・Railsチュートリアル】

#はじめに
まずは、railsがしっかり起動するかを確認する。
以下、全てターミナルで作業する。
Macの人はSpotlightでターミナルを検索して、表示させる。

##railsのインストール確認
```terminal
rails -v
```
これで、「Rails is not currently installed on this system.」と表示されたら、railsがインストールされていないので、インストールする。

##インストール方法
```terminal
gem install rails
```
これでインストールされるはずだが、「You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.」と表示される場合は、こちらのやり方がおすすめです。
非常に丁寧に記載されており、初心者の私でも躓くことなくrailsをインストールすることができました。
https://qiita.com/nishina555/items/63ebd4a508a09c481150
https://www.yururiwork.net/archives/1563
https://qiita.com/w7tree/items/0860e2856f2429b20eee


#開発環境
localで開発したかったが、localhostがGoogle chromeで開けず断念した。
代わりにAWSのCloud9で開発している。
詳しい環境構築の方法はドットインストールの講座か<a href = "https://railstutorial.jp/chapters/beginning?version=6.0#cha-beginning" >Ruby on railsチュートリアル </a>で行うと良いです。

ドットインストールでは、railsのバージョンが最新ではないもの（確か5.0.3）を入れるように言われますが、Railsチュートリアルでは最新版を入れるように支持されるので、好きな方に従いましょう。

また、Railsチュートリアルでは、cloud9のディスク容量を大きくすることと、JavaScriptソフトウェアの依存関係を管理するYarnというプログラムのインストールを行うよう指示されます。

以下のコードをターミナルに記述しましょう。

```terminal:Cloud9環境のディスク容量アップと、クラウドIDEへのYarnインストール
$ source <(curl -sL https://cdn.learnenough.com/resize)
$ source <(curl -sL https://cdn.learnenough.com/yarn_install)
```

#アプリを作成する

```terminal:アプリ作成
rails new tweet_app
```
tweet_appは自分の好きなアプリ名に変更する。
作成すると、configやappなど、必要なファイルたちが自動で作成される。
作成されたファイルをfinderで探すときは、検索窓に自分の付けた名前を入力するとフォルダとして出てくる。
この例でいうとtweet_appと入力。

railsコマンドで作られる各ファイルの意味は、railsチュートリアルで詳しく教えてもらったのでメモする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1651134/08039b1f-5da1-639c-b749-c907c354676d.png)

railsチュートリアルでは、Gemfileの設定も変更する。
基本的に、Gemfileを編集したら、ターミナルで**bundle install**コマンドを使うことで、反映される。
bundle installは、、bundlerを使ってGemfileからgemをインストールするコマンド。

ちょいちょい出てくるgemとは、２つの意味がある。
1. RubyGemsが公開しているRubyのパッケージのこと
2. それらのパッケージを管理するパッケージ管理システムの名前


bundle installで以下のエラーが出た場合は、bundle updateを行う。

```terminal
Fetching gem metadata from https://rubygems.org/.
You have requested:
  listen = 3.1.5

The bundle currently has listen locked at 3.4.1.
Try running `bundle update listen`

If you are updating multiple gems in your Gemfile at once,
try passing them all to `bundle update`
```
参考サイトは<a href = "https://qiita.com/GalaxyNeko/items/c79b49762814f02c8129" >こちら　</a>

また、'could not locate Gemfile'というエラーが出る場合はcdで階層を移動する必要がある。
アプリ名の配下に移動しよう。
参考サイトは<a href = "https://tacosvilledge.hatenablog.com/entry/2015/08/02/191301" >こちら　</a>


#GitHubを使う
GitHubに関する詳しい設定や手順は以下のサイトを参照してください。
<a href = "https://qiita.com/juri_engineer/items/4f79ed55092ec3e595e4"> GitとGitHubを最低限使えるようにするためのロードマップ</a>

今回は備忘録程度にコードをメモします。

##　Gitに情報を登録する

　```
cloud9User:~/environment $ git config --global user.name "自分の名前"
cloud9User:~/environment $ git config --global user.email your.email@example.com
```

##リポジトリを初期化する

```terminal
cloud9User:~/environment $ cd hello_app
cloud9User:~/environment/hello_app (master) $ git init
Reinitialized existing Git repository in /home/ubuntu/environment/hello_app/.git/
```

git initで初期化しても「リポジトリが再初期化されたよ」というメッセージが出るのは、
アプリを作成したときのrails newコマンドを実行すると自動的にGitリポジトリも生成するためである。


##プロジェクトの全ファイルをリポジトリに追加する

```terminal
cloud9User:~/environment/hello_app (master) $ git add -A
```

ちなみに、オプションを小文字の[-a]にすると、エラーになる。


##commitする
オプション[-m]のあとにコミットメッセージを書くことでエディタを開く必要なくメッセージが記述できる。

```terminal
cloud9User:~/environment/hello_app (master) $ git commit -m "Initialize repository"
[master (root-commit) 5d695f4] Initialize repository
 92 files changed, 3200 insertions(+)
 create mode 100644 .browserslistrc
 create mode 100644 .gitignore
・
・
・
　```

##GitHubのブラウザでNewRepositoryを作成する
Privateにするほうが望ましい。


##GitHubをリモートoriginに追加して、そのリポジトリにpushする
先程の手順のあとに遷移した画面で、コピーできるようになっているので、そのままコピーしてもOK

```terminal
$ git remote add origin https://github.com/<あなたのGitHubアカウント名>/hello_app.git
$　　git branch -M main
$ git push -u origin master
```

##ブランチを作って切り替えてみる
ブランチとは、「コミット履歴の流れを枝分かれさせるための機能」のことを指す。
開発の本流から枝分かれしたブランチは、独立した環境を持つため、開発作業を並行してすすめることができる。
最初からあるブランチがmain（昔のmaster）という名前で登録されている。

中身を見るとただの英数字の羅列（コミットID）になっており、ブラントとは、「ただ単に特定のコミットIDを指差しているだけ」であることがわかる。
ブランチとは？については、こちらのサイトがわかりやすいので参考になると思います。
<a href ="https://www.r-staffing.co.jp/engineer/entry/20190719_1" > ブランチとは？ポインタってどういう意味？</a>

```terminal
cloud9User:~/environment/hello_app (main) $ git co -b modify-README #一時的なブランチを作成
Switched to a new branch 'modify-README'
cloud9User:~/environment/hello_app (modify-README) $ git branch　#存在するローカルブランチを一覧表示する
  main
* modify-README
```

#デプロイする
デプロイとは、本番環境に移行し、実際に完成したプログラムを稼働できる状態にすること。
デプロイするためには、**Heroku**というRuby　Webアプリ用のホスティングプラットフォームを使う。

##Herokuのセットアップ
Gemfileを開き、以下のコードを追加する。
これにより、本番環境に**pg gem**（本番用のgem）をインストールして、RailsがPostgreSQLと通信できるようにする。
（HerokuでPostgreSQLを使うため）

```
group :production do
  gem 'pg', '1.1.4'
end
```
pg gemは本番用なので、ローカル環境にはインストールしないようにするため、以下の設定をしてからgemをインストールする。

```
cloud9User:~/environment/hello_app (modify-README) $ bundle _2.2.17_ config set --local without 'production'
cloud9User:~/environment/hello_app (modify-README) $ bundle _2.2.17_ install
Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Using rake 12.3.3
Using concurrent-ruby 1.1.9
Using i18n 1.8.11
Using minitest 5.15.0
Using thread_safe 0.3.6
・
・
・
```

つづいて、pg gemを追加したことを。Gimfile.lockに反映する。
（これをしないと本番環境へのデプロイに失敗する。）
commitのオプションのaはallの略。

　```
cloud9User:~/environment/hello_app (modify-README) $ git commit -a -m "Update Gemfile for Heroku"
[modify-README bb0b3cf] Update Gemfile for Heroku
 2 files changed, 8 insertions(+), 1 deletion(-)
```



##Herokuのインストール
herokuのバージョンを確認して、インストールされていない場合は、インストールする。

```
cloud9User:~/environment/hello_app (modify-README) $ heroku --version

Command 'heroku' not found, but can be installed with:

sudo snap install heroku

cloud9User:~/environment/hello_app (modify-README) $ source <(curl -sL https://cdn.learnenough.com/heroku_install)
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 31.6M  100 31.6M    0     0  70.5M      0 --:--:-- --:--:-- --:--:-- 70.4M
```

事前準備として、ブラウザでherokuと検索し、SignUpしておく。
ここで登録したメールアドレスとパスワードを使って、ターミナル上で以下を入力する。

```
cloud9User:~/environment/hello_app (modify-README) $ heroku login --interactive
heroku: Enter your login credentials
Email: 登録したメールアドレス
Password: **********
Logged in as 〇〇
```


#サーバーを立ち上げる

サーバーは**rails s**で立ち上がる。
ポイントは、まずcdでアプリ名配下に移動することと、別のターミナルタブを開いてサーバーを起動すること。

```terminal
cloud9User:~/environment $ cd hello_app
cloud9User:~/environment/hello_app (master) $ rails server  #sでもserverでも起動できる
=> Booting Puma
=> Rails 6.0.3 application starting in development 
=> Run `rails server --help` for more startup options
warning ../../package.json: No license field              
Puma starting in single mode...
* Version 4.3.6 (ruby 2.6.3-p62), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:8080
* Listening on tcp://[::1]:8080
Use Ctrl-C to stop
```

##herokuにアプリの実行場所を作成

実際にデプロイする場所を作成する。

```
cloud9User:~/environment/hello_app (modify-README) $ heroku create
Creating app... done, ⬢ ~~~~
https://~~~~~.herokuapp.com/ | https://git.heroku.com/~~~~~.git
```

##実際にデプロイする

チュートリアルに沿って、git push heroku main（チュートリアルではmasterになっている）を実行すると
以下のエラーが出る。

```
cloud9User:~/environment/hello_app (modify-README) $ git push heroku main
```

#Railsの基本確認
railsはMVCモデルに似ていて、画面を表示するためのView、操作を担うController、ViewとControllerをつなぐルーティングの３つが要になる。
一つ一つ確認していく。


#Viewの確認
##アプリのトップ画面を表示する

```terminal:アプリ作成
rails generate controller home top
```
local/home/topにアクセスすると、railsの初期画面ではなく、アプリの画面が表示される。
この状態では、パス名だけが記載されており、寂しい感じ。


#アプリのトップ画面を書き換える
デフォルトの画面を書き換える。
app/views/home/top.html.erbのファイルを開き、HTMLを書く。
ファイルの拡張子はerbだが、HTMLを記載してOK。


#Controllerの確認
app/controllers/home_controller.rbを開く。
ここには、top画面を表示するためのtopアクションが定義されている。


#ルーティングの確認
ルーティングとは、送信されたURLに対して「どのコントローラの、どのアクション」で処理するかを決める「対応表」のこと。
ブラウザに入力されたURLを認識し、適切なControllerにつなぐ。

```ruby
get "URL" => "コントローラー名#アクション名"
```
上記のようにconfig/routes.rbに記載すると、URLを認識できる様になる。
逆に、ここに記載していないURLはエラーになる。


#共通のCSSを記載する
ヘッダーやフッターなど、共通のCSSを書く場合は、app/asssets/stylesheets/home.scssに記載する。


#画像を挿入する
画像をPCに保存する場合は、publicの中に保存する。
使い方は、一般的なCSSと同様で、各htmlファイルでimgを指定したり、home.scssで背景画像として指定するなど。
publicに保存した場合は、通常の画像名を指定する場合に**/画像名**と指定する必要がある。

#トップページのURLを変更する
トップページのURL（localhost:3000など、後ろに/〇〇がないURL）に対応するルーティングは、
*get "/" =>"Controller名#アクション名"*というようにURLに*/*を指定する。

また、ルート（/のこと）の場合は、root "Controller名#アクション名"でも指定可能。

```ruby:routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
get "/" => "application#hello"
#もしくは　 root 'application#hello'
end
```