RailsTutorial学習#1　第１章　ゼロからデプロイまで

Railsの学習記録をQiitaに残し、備忘録とする。

第1章ゼロからデプロイまで
第2章Toyアプリケーション
第3章ほぼ静的なページの作成
第4章Rails風味のRuby
第5章レイアウトを作成する
第6章ユーザーのモデルを作成する
第7章ユーザー登録
第8章基本的なログイン機構
第9章発展的なログイン機構
第10章ユーザーの更新・表示・削除
第11章アカウントの有効化
第12章パスワードの再設定
第13章ユーザーのマイクロポスト
第14章ユーザーをフォローする

●前提知識
第1章
コマンドラインコース
Gitコース
第4章
Rubyコース
第5章
HTML & CSSコース
Sassコース
第14章
jQueryコース
JavaScriptコース
SQLコース
Railsの基礎
Ruby on Railsコース

全然関係ないが、tab移動が大変なのでショートカットキーを多用しよう！（時短につながる）
タブの切り替え
　左手： Option + Commandを押す
　右手： 押したまま左右キーでタブを切り替え

●第１章　ゼロからデプロイまで

　◎AWSアカウント作成
　　気になったところ（請求がどの位くるのか？）
　　　無料枠１年あるが、アカウント自体は過去に作成済
　　　　いろいろ調査したが、時間かかりそうだし、
　　　　請求きても数百円と予想され、学習を先に進めることを優先し、ここはスルーした。

　◎インデント　４から２へ変更
　◎コマンド

```
$ printf "install: --no-document \nupdate:  --no-document\n" >> ~/.gemrc
```

バージョンを指定してRubyをインストールする

```
gem install rails -v 5.1.6
```

#最初のアプリ
　rails newを実行

```
rails _5.1.6_ new hello_app
```

　gemfile 書き換え　ジェムって読む
　hello_app¥Gemfileの内容を以下に書き換え

```ruby:Gemfile

source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end




# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

```

```
$ cd hello_app/
/hello_app (master) $ bundle install
```
エラー吐いたので、以下実行

```
$ bundle update
```

```
$ bundle install
```

#rails server を実行する。

```
$ rails server
```

以下のとおりローカルサーバを共有する。

![スクリーンショット 2021-01-01 11.04.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307409/3efae50c-088c-9093-298a-205933d8dbfe.png)


アプリケーションを実行した時の画面

![スクリーンショット 2021-01-01 11.05.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307409/d69d7abd-9f2d-f53d-dbc5-0d5ea7523dc7.png)

アプリケーションを実行する。

![スクリーンショット 2021-01-01 11.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307409/3478e740-94d3-aab1-d59c-1a2eb4d767dc.png)

#演習
デフォルトのRailsページに表示されているものと比べて、今の自分のコンピュータにあるRubyのバージョンはいくつになっていますか? コマンドラインでruby -vを実行することで簡単に確認できます。

```
$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
```

同様にして、Railsのバージョンも調べてみましょう。調べたバージョンはリスト 1.1でインストールしたバージョンと一致しているでしょうか?
```
$ rails -v
Rails 5.1.7
```
バージョンは一致していない。
bundleインストールしたから？なぜだ


*Linuxコマンドメモ

|説明	|コマンド	|コマンド例|
|---|---|---|
|ディレクトリ内容の表示|ls	|$ ls -l|
|ディレクトリの作成|	mkdir <ディレクトリ名>|	$ mkdir 
 environment |
|ディレクトリの移動	|cd <ディレクトリ名>|	$ cd environment/ |
|上のディレクトリに移動 | |$ cd ..|
|ホームディレクトリに移動| | $ cd ~  もしくは $ cd |
|ホームディレクトリ直下のenvironmentに移動 | | $ cd ~/environment/ |
|ファイルの移動やリネーム |mv <移動元> <移動先> |$ mv foo bar |
| |mv <現在の名前> <変更後の名前> |
|ファイルのコピー | cp <コピー元> <コピー先>  |$ cp foo bar |
| ファイルの削除 | rm <ファイル名> | $ rm foo |
|空のディレクトリの削除 | rmdir <ディレクトリ名> | $ rmdir  environment/ |
| 中身のあるディレクトリの削除	| rm -rf <ディレクトリ名> | $ rm -rf tmp/ |
|ファイルの内容の結合と表示 | cat <ファイル名> | $ cat ~/.ssh/id_rsa.pub |


```
リスト 1.7: Applicationコントローラにhelloを追加する
app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end
```

```
リスト 1.9: ルートルーティングを設定する
config/routes.rb
Rails.application.routes.draw do
  root 'application#hello'
end
```
Hello Worldを表示する。
![スクリーンショット 2021-01-01 13.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307409/02384b9f-ed3c-f6c0-d91f-9d3da8bf6e16.png)


#gitによるバージョン管理

インストールしたGitを使う前に、最初に1回だけ設定を行う必要があります。これはsystemセットアップと呼ばれ、コンピュータ1台につき1回だけ行います。


```
git configで設定
 git config --global user.name "kogosruby"
 git config --global user.email your.wwowowoww@gmail.com
```


今度は、リポジトリ (リポ (repo) と略されることもあります) ごとに作成の必要な作業を行います。まず、Railsアプリケーションのルートディレクトリに移動し、新しいリポジトリの初期化を行います。
```
$ git init
  Initialized empty Git repository in
  /home/ec2-user/environment/environment/hello_app/.git/
```


次にgit add -Aを実行し、プロジェクトのファイルをリポジトリに追加します。


```
 git add -A
```

ステージングエリアで控えている変更を本格的にリポジトリに反映 (コミット) するには、commitコマンドを使います。



```
$ git commit -m "Initialize repository"
[master (root-commit) df0a62f] Initialize repository
.
```

#git add でめっちゃハマる
下記サイトの記事で解決した。

https://www.it-swarm-ja.tech/ja/git/git-add%E3%80%82-gt%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%BE%E3%81%A0%E3%80%8C%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E3%81%99%E3%82%8B%E3%82%82%E3%81%AE%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%8D/1067021948/


gitのssh公開鍵

https://git-scm.com/book/ja/v2/Git%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-SSH-%E5%85%AC%E9%96%8B%E9%8D%B5%E3%81%AE%E4%BD%9C%E6%88%90


#bitbucketのアカウント作成


1. Bitbucketアカウントがない場合はアカウントを作成します。
公開鍵をクリップボードにコピーします 「Git - SSH 公開鍵の作成」を参考に公開鍵・暗号鍵を作成
 https://git-scm.com/book/ja/v2/Git%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-SSH-%E5%85%AC%E9%96%8B%E9%8D%B5%E3%81%AE%E4%BD%9C%E6%88%90
2. Bitbucketに公開鍵を追加するには、左下にあるアバター画像をクリックして [Bitbucket 設定]、[SSH 鍵] の順に選択します 

#Bitbucketへのリポジトリ追加とリポジトリへのプッシュ

```
$ git remote add origin git@bitbucket.org:ユーザー名/hello_app.git
$ git push -u origin --all
```


#branchの作成
```
$ git checkout -b modify-README
Switched to a new branch 'modify-README'
$ git branch
  master
* modify-README
```

#ブランチの状態確認
```
$ git status
On branch modify-README
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")
```

#commit

```
$ git commit -a -m "Improve the README file"
[modify-README 9dc4f64] Improve the README file
 1 file changed, 5 insertions(+), 22 deletions(-)
```

#Merge (マージ)
ファイルの変更が終わったので、masterブランチにこの変更をマージ (merge) します。
```
$ git checkout master
Switched to branch 'master'
$ git merge modify-README
Updating af72946..9dc4f64
Fast-forward
 README.md | 27 +++++----------------------
 1 file changed, 5 insertions(+), 22 deletions(-)
```

#トピックブランチの削除

$ git branch -d modify-README
Deleted branch modify-README (was 9dc4f64).


#herokuのセットアップ

gemfileへ下記内容を追加する。
```
group :production do
  gem 'pg', '0.20.0'
end
```
```
本番用以外のgemをインストールする
$ bundle install --without production
```
学習用の本番用と研修用の環境を変更している、

```
$ git commit -a -m "Update Gemfile for Heroku"
```

herokuのバージョン確認
```
$ heroku --version
```

クラウドIDE上でHerokuをインストールする

```
$ source <(curl -sL https://cdn.learnenough.com/heroku_install)
```

```
$ heroku --version
heroku-cli/6.15.5 (linux-x64) node-v9.2.1
```

herokuコマンドでログインしてSSHキーを追加します。

```
$ heroku login --interactive
$ heroku keys:add
```

 Herokuに新しいアプリケーションを作成する
```
$ heroku create
Creating app... done, fathomless-beyond-39164
https://damp-fortress-5769.herokuapp.com/ |
https://git.heroku.com/damp-fortress-5769.git
```

#herokuにデプロイする

```
$ git push heroku master
```

#感想
　ハマりまくって時間がかかった。
　　git,bitbucket,herokuではまった。
　　ロジックを作り込む前に、環境構築でよくハマってしまいそうだ。
　　２章以降はサクサク学べるようにしたい！