RailsTutorial学習#1 第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を押す
 右手: 押したまま左右キーでタブを切り替え

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

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

 ◎インデント 4から2へ変更
 ◎コマンド

$ 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の内容を以下に書き換え

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

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

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

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

演習

デフォルトの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を表示する。

gitによるバージョン管理

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

git configで設定
 git config --global user.name "kogosruby"
 git config --global user.email [email protected]

今度は、リポジトリ (リポ (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 でめっちゃハマる

下記サイトの記事で解決した。

gitのssh公開鍵

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 [email protected]:ユーザー名/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ではまった。
  ロジックを作り込む前に、環境構築でよくハマってしまいそうだ。
  2章以降はサクサク学べるようにしたい!