20200322のRubyに関する記事は17件です。

【RSpec】paramの書き方

はじめに

paramとして渡された引数を使うメソッドのテストをするときに、データの作成方法で悩んだので備忘として残します。
save_hogeメソッドの中でprivateメソッド、save_user_hoge!が呼び出されます。
hogeは、メソッド内でparamとして使用されるため、形を整える必要がありました。

メソッドのコード(省略してます)

app/models/user.rb
def save_hoge
  save_user_hoge!(hoge)
end

private
def save_user_hoge!(hoge)
    if hoge[:first_hoge_id].present?
      user_hoge.create(
        hoge_id: hoge[:first_hoge_id].to_i
      )
    end
    if hoge[:second_hoge_id].present?
      user_hoge.create(
        hoge_id: hoge[:second_hoge_id].to_i
      )
    end
end

OK

spec/models/user_spec.rb
let!(:hoge) do
  {
    hoge: {
      first_hoge_id: 1,
      second_hoge_id: 2
    }
  }
end
spec/models/user_spec.rb
let!(:hoge) {
  {
    hoge: {
      first_hoge_id: 1,
      second_hoge_id: 2
    }
  }
}

NG

let!(:hoge) { hoge: { first_hoge_id: 1, second_hoge_id: 2 } }

まとめ

do endで囲む場合も、{}で囲む場合も同じだと指摘をいただきました。
NG例がだめな原因は、ハッシュをくくる{}が足りなかったからみたいです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

関連する子モデルの情報を含んだフォームのバリデーションテスト(Rspec)

はじめに

スクールでフリマアプリ開発の際、出品フォームのバリデーションテストを担当しました。
その時、出品画像のバリデーションテストで苦労したので、復習も兼ねて記事に残そうと思います。

今回のケース

0a9433558f4c9427fbc2f041c4edba3c.png

  • 商品名や商品説明を保存するテーブル(productsテーブル)と、出品画像を保存するテーブル(imagesテーブル)が分かれて存在している。
  • アソシエーションは、has_many :images と、belongs_to :product の関係である。
  • 1つのフォームから、複数のテーブルにデータを送信して保存する実装をしている。
  • Productモデルに、validates :images , presence: true を記載しており、画像が無いと商品を出品できないようになっている。

問題なのは、画像が無いと出品ができないため、
フォーム上に画像がアップロードされている状態を、テストで再現しなくてはいけません。
このような場合、どうやってテストすればいいのでしょか?

それについて記述していきます。

テストの方法

まずはfactory_botを使って、imageの情報を含まないProductモデルのインスタンスを準備してみます。

spec/factories/products.rb
FactoryBot.define do
  factory :product do  #画像なしバージョン
    id                {"1"}
    name              {"商品名"}
    detail            {"詳細"}
    category_id       {"686"}
    which_postage     {"1"}
    prefecture        {"1"}
    shipping_date     {"1"}
    price             {"1000"}
    size
    condition
    sending_method
    user
  end
end

今回注目して欲しいのはimageについてなので、それ以外の値については気にしなくて大丈夫です。

この状態で、とりあえず下記のテストを実行してみます。

spec/models/product_spec.rb
require 'rails_helper'
describe Product do
  describe '#create' do
    it "全ての必須項目が入力されている場合出品できる" do
      product = FactoryBot.build(:product)
      expect(product).to be_valid
    end
  end
end
ターミナル
Product
  #create
    全ての必須項目が入力されている場合出品できる (FAILED - 1)

Failures:

  1) Product#create 全ての必須項目が入力されている場合出品できる
     Failure/Error: expect(product).to be_valid
       expected #<Product id: 1, name: "商品名", detail: "詳細", shipping_date: 1, price: 1000, which_postage: 1, delivery_status: "出品中", prefecture: 1, created_at: nil, updated_at: nil, brand_id: nil, user_id: 1, size_id: 1, condition_id: 1, sending_method_id: 1, buyer_id: nil, category_id: 686> to be valid, but got errors: 商品画像を入力してください
     # ./spec/models/product_spec.rb:154:in `block (3 levels) in <top (required)>'

Finished in 0.63978 seconds (files took 5.52 seconds to load)
1 example, 1 failure

当然ですが、「商品画像を入力してください」と言われ、テストは失敗します。
product.imagesの中身が空っぽな訳です。
なんとかしてproduct.imagesへ画像の情報を入れてあげなければいけません。

その為に、imageのfactoryをproductとは別に準備します。

spec/factories/images.rb
FactoryBot.define do

  factory :image do
    image   {File.open("#{Rails.root}/spec/fixtures/test_image.png")}
    product
  end

end

imageの準備ができたら、spec/factories/products.rb を以下のように編集します。

spec/factories/products.rb
FactoryBot.define do
  factory :product do  #画像ありバージョン
    id                {"1"}
    name              {"商品名"}
    detail            {"詳細"}
    category_id       {"686"}
    which_postage     {"1"}
    prefecture        {"1"}
    shipping_date     {"1"}
    price             {"1000"}
    size
    condition
    sending_method
    user
    after(:build) do |product|                           #追記
      product.images << build(:image, product: product)  #追記
    end                                                  #追記
  end
end

3行だけ追記しました。

after(:build) do |product|
  product.images << build(:image, product: product)
end

after(:build) do 〜 end の部分で、productのインスタンスが作成された直後に、imageのインスタンスを作成して、product.imagesの中にimageインスタンスの情報を入れてあげています。

これでフォーム上に画像がアップロードされた状態を再現することができました!
もう一度テストを実行してみます。

spec/models/product_spec.rb
require 'rails_helper'
describe Product do
  describe '#create' do
    it "全ての必須項目が入力されている場合出品できる" do
      product = FactoryBot.build(:product)
      expect(product).to be_valid
    end
  end
end
ターミナル
Product
  #create
    全ての必須項目が入力されている場合出品できる

Finished in 0.54654 seconds (files took 5.16 seconds to load)
1 example, 0 failures

今度は成功ですね!!

画像の枚数を変更したい場合

after(:build) do |product|
  product.images << build_list(:image, 10, product: product) #buildをbuild_listへ変更
end

build を build_listメソッドにすることで、画像の枚数も操作することができます。
上記の場合は、build_listの第2引数に10を渡している為、画像が10枚アップロードされた状態を再現しています。
境界値などをテストする場合は、build_listを使うといいと思います。

所感

テストに関しては、検索しても情報が少なく、苦労しました。
この記事が少しでも誰かの役に立てば嬉しいです。
初投稿ですので、間違い等ございましたら、ご指摘いただけると幸いです。
ここまで読んでいただき、ありがとうございました!!

参考にさせていただいた記事

accepts_nested_attributes_forで作成するpresence:trueを付けた子モデルに対するモデルのバリデーションチェック~RSpec~
FactoryBotとCarrierWaveを使ってRSpecに画像ファイルアップロードのテストを通す

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[Ruby on Rails]CSVファイルを使い、データを一括でDBに読み込ませる方法

はじめに

seed内でデータを作成するのが面倒だったので、Excel(Numbers)でデータを作成し、一括でDBに読み込ませる方法をまとめました!

【環境】
私はMacを利用しているので、初期搭載されていて、無料で使えるNumbersを使用。
(重複セルを見つけい場合や複雑な処理はExcelを使用。)

使い方

CSVファイルを作成

  1. 1行目にキーとなる任意の名前をつける。(対応するDBの項目名と同じにすると分かりやすい)
  2. 2行目以降にデータを打ち込む。

スクリーンショット 2020-03-22 18.14.00.png

3.データを作成したら ファイル → 書き出す → CSVを選択
スクリーンショット 2020-03-22 18.25.47.png

4.案内に沿って、次へ
スクリーンショット 2020-03-22 18.31.09.png

5.ファイル名(任意)と保存先(任意)を指定して書き出す
スクリーンショット 2020-03-22 18.32.52.png

seedファイルの準備

先ほど作成したファイルをDBディレクトリの中に置く

seedファイルの編集

db/seeds.rb
require "csv" #csvファイルを読み込む為に記載

#movieをcsv経由で追加する
CSV.foreach('db/movies.csv', headers: true) do |row|
#'db/movies.csv'←先ほど作成したCSVファイルのパスを指定
# headers: true ←Numbersファイルの先頭行を読み込む
  Movie.create( #データ挿入先のテーブル名を指定
    title: row['title'],
    #title:←テーブルの項目名を指定
    #row['title']←対応するNumbersファイルの先頭行を指定
    release: row['release'],
    production: row['production'],
    screening_time: row['screening_time'],
    genre: row['genre'],
    status: row['status'],
  )
end

seedファイル読み込み

ターミナルで rails db:seed を実行

rails db:seed

コマンドを実行したら、rails c で結果を見てみよう!

上手くDBにデータが入らない場合は以下を試してみてください!

  • CSVファイルを開いてみて、1行目にキーとなる任意の名前が記載されているか、間違いがないか確認する
    (1行目にシートの名前、2行目にキーが記載されている場合がある)
  • rails db:migrate:resetrails db:migraterails db:seed でリセットをかけてみる
  • CSVファイルの記載する項目名の順番と、DBの項目定義の順番を合わせてみる
    例. DBの項目定義順が title, release, production,...なら
    CSVの記載項目順も title, release, production, ...にする
    (私の場合これで上手く入るようになりました。)

以上となりますが何か間違った情報など提供してましたらコメント欄でお伝えください!

参考
【Rails】rake seedコマンドでCSVファイルからDBに読み込ませる方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】いいね機能の実装

現在絶賛作成中のポートフォリオでいいね機能を実装する際、色々躓いてしまったので反省もかねてメモしとこうと思います。

環境

  • Rails 5.2.2
  • mysql 8.0.17
  • macOS

実現したいこと

Twitterのようないいね機能の実装。

そのために必要な処理

いいねボタンを押下した場合、

  • 「いいねしたユーザーのid:user_id」と「いいねされた投稿のid:post_id」が「中間テーブル:likesテーブル」に保存される。
  • いいねボタンが「いいね追加」と「いいね削除」で切り替わる。

必要手順

  1. 中間テーブルの作成
  2. テーブルの紐付け
  3. ルーティングの設定
  4. コントローラー側の処理
  5. ビューでの表示処理

大体こんな感じです。

では順番に見ていきましょう。

中間テーブルの作成

まずは、「いいねしたユーザー」と「いいねされた投稿」を保存するテーブルの作成からです。

$ rails g model Like user:references post:references

referencesを指定することで、外部キー制約が自動で付きます。
非常に便利。

問題なければこのまま

$ rails db:migrate

しちゃいましょう。

テーブルの紐付け

お次はモデルでhas_manyを使ってテーブルを紐付けます。

これに関しては、
【Rails】投稿とユーザーの紐付け(一対多)のメモ
でも似たような記事を書きましたので、復習になります。

post.rb
has_many :likes
has_many :users, through: :likes

def liked_by?(user)
  likes.where(user_id: user.id).exists?
end

いいねされた投稿に対して、いいねしたユーザーは複数いるのでhas_manyを使います。

ここで使われているthroughは、likeテーブルを経由して直接userテーブルと繋げるためのものです。

また、

post.rb
def liked_by?(user)
  likes.where(user_id: user.id).exists?
end

この子は「すでにいいねしたかどうか」を判断するためのメソッドで、後にビュー側で必要となってきます。

一応簡単に説明すると、
likesテーブルの「いいねしたユーザー:user_id」カラムにuser.idが存在するのか探すという処理です。

引数userにはビューでcurrent_userを指定して入れます。

user.rb
has_many :likes, dependent: :destroy
has_many :like_posts, through: :likes, source: :post

ユーザー側でもしてることはほとんど変わりません。
一点気をつけるとすれば、

user.rb
has_many :like_posts, through: :likes, source: :post

の部分です。

多くの関連記事でlike_postsのところがpostsになっていたのですが、もし他に has_many :posts があるなら名前が被らないようにしましょう。

railsが混乱してエラーになってしまうので、like_postsのように名前が被らないように注意することをおすすめします。

ルーティングの設定

お次はルーティングです。

routes.rb
resources :posts do
  post 'add' => 'likes#create'
  delete '/add' => 'likes#destroy'
end

postのidをとってくるためにネストします。
中は普通にルーティング設定してあげればおkです。

コントローラー側の処理

ここまできたらあともう少し。

処理を書くためにコントローラーを作成します。

$ rails generate controller likes

コントローラーができたら以下の処理を記述します。

likes_controller.rb
class LikesController < ApplicationController
    before_action :authenticate_user!
    before_action :set_like

    def create
        user = current_user
        post = Post.find(params[:post_id])
        like = Like.create(user_id: user.id, post_id: post.id)
    end
    def destroy
        user = current_user
        post = Post.find(params[:post_id])
        like = Like.find_by(user_id: user.id, post_id: post.id)
        like.delete
    end

    private
    def set_like
        @post = Post.find(params[:post_id])
    end
end

create/destroyアクションで共通する処理は以下になります。

likes_controller.rb
user = current_user
post = Post.find(params[:post_id])
  • いいねするユーザーであるcurrent_userを変数userに格納
  • いいねされた投稿のidとPostテーブルのidが一致するものをfindで見つけて変数postに格納

createアクション

createアクションでは、いいねされた場合の処理を記述します。

likes_controller.rb
like = Like.create(user_id: user.id, post_id: post.id)

Likeテーブルに、
user_idが、先ほどcurrent_userを格納した変数userのidで、post_idが、いいねされたPostテーブルのidを格納した変数post
のデータをcreateで作成する処理です。

destroyアクション

destroyアクションでは、いいねが取り消された場合の処理を記述します。

likes_controller.rb
like = Like.find_by(user_id: user.id, post_id: post.id)
like.delete

find_byで、user_idがcurrent_userのidと一致するもの且つ、post_idがいいねされたpostのidと一致するものを探して、変数likeに格納します。

そしてdeleteメソッドでlikeを削除。

set_post

地味に一番下のところに、

likes_controller.rb
private
def set_like
    @post = Post.find(params[:post_id])
end

とありますが、こちらはjsのところで必要となってきますのでひとまずおいといてください。

ビュー側の処理

index.html.erbでは投稿一覧を表示しています。
この投稿一つ一つにいいねぼたんを表示させたいわけですが、そのためにはいくつか階層を分ける必要があります。

とりあえず、いいねボタンを表示したいところに以下のように記述しましょう。

index.html.erb
<div id="like-btn-<%= post.id %>">
   <%= render 'likes/like', post: post %>
</div>

renderを使用することで、いいねだけを表示するviewを表示します。

post: post は、いいねだけを表示するviewのpostにpost(ここでは@postsをeachで回してます)の情報を入れるでというくらいの意味あいだと理解して問題ないかと。

例えば、postの情報とは違った情報も渡したいのであれば、それに適応したものを渡してあげたらおk(私の場合はブックマーク一覧のviewでも同じようにいいねできるようにしたかったので、別にviewを作成してブックマークされている投稿の情報を格納したlikeを post: like として設定していました)。

_like.html.erb

「いいねだけを表示するview」である_like.html.erbを作成します。

app/views/likes/_like.html.erb
<% if post.liked_by?(current_user) %>
   <%= link_to(post_add_path(post), method: :delete, remote: true, id: :"like-button-#{post.id}") do %>
       <i class="fa-lg fas fa-heart icon-btn liked"></i>
   <% end %>
<% else %>
   <%= link_to(post_add_path(post), method: :post, remote: true, id: :"like-button-#{post.id}") do %>
       <i class="fa-lg fas fa-heart icon-btn not-like"></i>
   <% end %>
<% end %>

if post.liked_by?(current_user)

まずこのif文は、先ほどmodelで定めたメソッドを使ってすでに現在のユーザーがいいねしてるかどうかを判定します。

  • すでにいいねしてる場合 → link_toはmethod: :delete
  • まだいいねしてない場合 → link_toはmethod: :post

となるわけですね。

remote: true

link_toに記述しているremote: trueですが、この子はコントローラーに値を送信する役割を果たし、ajaxを発火してくれる優秀な子です。
ajaxを利用することで、画面全体をリダイレクトする必要がなく、いいねアイコンの部分のみ更新してくれるので、アプリ全体の負担が減ります。

では最後に、remote: trueで呼び出すためのjsファイルを作ってあげましょう。

create.js.erb/destroy.js.erb

_like.html.erbと同階層に次の二つのファイルを作成します。

create.js.erb
$('#like-btn-<%= @post.id %>').html("<%= escape_javascript(render partial: "likes/like", locals: { post: @post }) %>");
destroy.js.erb
$('#like-btn-<%= @post.id %>').html("<%= escape_javascript(render partial: "likes/like", locals: { post: @post }) %>");

内容はどっちも一緒です。

先ほどコントローラー側で設定したset_likeで、いいねされた投稿のidを取得して、それをいいねアイコンのidとしています。

ここまでできたら、いいねボタンの完成です!

あとはいいねしたときと外した時でスタイルを変更するなど、創意工夫してください。

まとめ

いいね機能はほとんどのアプリで使うと思うので、結構情報があったのですが、いまいち仕組みが理解ができなくて結構苦戦しました。
特に中間テーブルへの保存で時間を取られたと思います。

できる範囲で細かく書いたので、誰かの助けになれば幸いです。

ではでは。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

VSCodeでRubocopを使う

Rubocopとは

Rubyのコード解析ツール。Gem。
修正した方が良い書き方を指摘してくれたり、自動で修正してくれたりします。

導入

Gemfile
group :development do
  gem 'rubocop'
$ bundle install

以下のコマンドで、コード解析が走ります。

$ rubocop
Inspecting 67 files
........CCC...CC.C..........................................CC.C...

67 files inspected, 24 offenses detected

-aオプションをつけると、自動で修正できるところ(クォーテーションの種類を変えるなど)を修正してくれます。

$ rubocop -a

設定ファイル

.rubocop.yml

プロジェクトルートに作成して、無視するルールや無視するディレクトリ等を指定することができます。デフォルトは厳しすぎるので、大体何かしらの設定をすることになります。

inherit_from: .rubocop_todo.yml

AllCops:
  TargetRubyVersion: 2.6.5
  Exclude:
    - 'config.ru'
    - 'bin/**'
    - 'lib/**'
    - 'db/**/*'
    - 'node_modules/**/*'

# 日本語でのコメントを許可
Style/AsciiComments:
  Enabled: false

# クラスのコメント必須を無視
Style/Documentation:
  Enabled: false

#文字列をfreezeするか
Style/FrozenStringLiteralComment:
  Enabled: false

# 名前空間を分ける時、ネストしない書き方を許可
Style/ClassAndModuleChildren:
  Enabled: false

Style/HashEachMethods:
  Enabled: true

Style/HashTransformKeys:
  Enabled: true

Style/HashTransformValues:
  Enabled: true

# 1行の文字数
Layout/LineLength:
  Exclude:
    - "db/migrate/*.rb"

.rubocop_todo.yml

--auto-gen-configオプションをつけて実行すると、自動で生成されます。

$ rubocop --auto-gen-config

現在指摘されている部分の規約を書き出します。このファイルに書かれているルールは無視されます。いきなり全てを修正するのは難しいことが多いので、少しずつこのファイルの記述を減らしていけるように頑張りましょう。

VSCodeとの連携

VScodeを使っていると、.rubocop.ymlで定義したルールに則ったLinterやFormaterを利用することができます。
(ルールに違反している箇所に下線が引かれ、ショートカットキーを押すとフォーマットされる)

有効化には以下の設定が必要です。

  • 拡張機能Rubyをインストール
  • setting.jsonに以下の記述を追加
setting.json
{
  "ruby.useLanguageServer": true,
  "ruby.lint": "rubocop",
  "ruby.format": "rubocop"
}

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Unknown action [初心者備忘録]

Unknown action

railsでアプリを作成していたところ、初めて見るエラーが発生しました。
結果からいうとコードの誤記という恥ずかしいイージーミスでしたので、反省と忘れないために書きたいと思います。

エラー発生

Users::RegistrationsControllerのnew_credit_cardアクションを実行したところ以下のエラーが発生しました。

Unknown action
The action 'new_creditcard' could not be found for Users::RegistrationsController

なるほど、アクションがないのか。
ということで、RegistrationsControllerを確認します。

解決

以下がコントローラーで当該のアクションを呼び出してる箇所とroutes.rbです。

uses/registrations_controller.rb
render :new_credit_card
config/routes.rb
get 'creditcards', to: 'users/registrations#new_creditcard'

しっかりアクション名を書き間違えていました。
ということで、これを修正することでエラーが直りました。

おわり

今回はアクション名がルーティングとコントローラーで不一致だったためエラーが起きましたが、呼び出したいアクションをコントローラーのprivate以下に書いた場合でも、今回と同じエラーが起きるそうです。
最後まで見ていただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】バリデーションによるエラーメッセージ表示の手順

はじめに

Railsで、バリデーションによるエラーメッセージの表示をしようとしたら
エラーが出てしまい、調べてみたらとても初歩的なミスを犯していたので
忘れないよう、エラーメッセージ表示の手順を、自分用のメモみたいな感じでまとめました!

手順

「新規投稿」を例にとることにします。

まず、新規投稿が行われる手順から
順を追って、バリデーションによるエラーメッセージの表示方法について説明していきます。


1.まずは、modelフォルダの中のpost.rbファイルの中で、バリデーションを設定します。
これによってバリデーションに弾かれたデータには自動でエラーメッセージが取得されます。

models/post.rb
class Post < ApplicationRecord

  validates :content, presence: true,
                      length: {maximum: 140}

end



2.「new.html.erb」で投稿ボタンを押すと、form_tagで指定したURL("/posts/create")へデータが送信されます

new.html.erb
 <%= form_tag("/posts/create") do %>

   <textarea name="content"> </textarea>
   <input type="submit" value="投稿">

 <% end %>



3.送信されたデータをルーティングで取得し、createアクションへ

routes.rb
post "posts/create" => "posts#create"



4.送信されて来たデータの保存が完了した場合→("/posts/index")画面へ。
バリデーションに弾かれ、保存されなかった場合→再び("/posts/new")画面へ転送する。

posts_controller.rb
 def create
   @post = Post.new(content: params[:content])
     if @post.save
       redirect_to("/posts/index")
     else
       render("posts/new")
     end
 end


この後、データベースに保存された全ての投稿データを取得し、繰り返し処理によりビューで表示することで、投稿が一つずつ表示されるわけですが

私は、バリデーションに弾かれたエラーメッセージの取得が、手順3の段階でされるのだと思っていました。

それゆえ、以下のように3の手順で取得した@postから、エラーメッセージを表示させようとしたら

new.html.erb
 <% @post.errors.full_messages.each do |message| %>

    <%= message %>

 <% end %>

undefined method `errors' for nil:NilClass
といったように、エラーメッセージが定義されてませんと怒られてしまいました…ごめんなさい…。


何故取得できないのかというと、2の手順でバリデーションに弾かれたデータは
newアクションへ転送され、newアクションで取得する必要があるからでした。

つまり、弾かれたデータは直前のアクションに送信されます。
しかし、それ以前に「new.html.erb」で「createアクションで定義した変数」を使えるわけないのですから当然でした……

ですので、以下のように、newアクションで変数を定義してあげることで
ここに、バリデーションで弾かれたデータが作成されるようになります。

posts_controller.rb
  def new
    @post = Post.new
  end



あとは、「new.html.erb」で、エラーメッセージを表示するためのコードを書いてあげれば
ちゃんとエラーメッセージが表示されるようになるはずです。

new.html.erb
 <% @post.errors.full_messages.each do |message| %>
    <%= message %></p>
 <% end %>

参考

【Rails】バリデーションのエラーメッセージを表示する
Progate

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Ruby on Rails】railsでやってみたいこと。

rails入門参考動画

Ruby on Rails 5入門(ドットインストール)

やりたいこと(目標)

  • 1.基本的なcrud作成 (create,show,index,delete)
  • 2.DBのselect結果を反映したセレクトボックスの作成
  • 3.入力データと登録済みデータの比較(登録済みデータが存在すれば、 エラーメッセージを出して登録させない)
  • 4.恐竜登録ツールのrails版の作成
  • 5.恐竜画像登録ツールのrails版

rails_try1.jpg

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Ruby】最新バージョンにしようとしてハマったこと

rbenvでバージョンがうまく切り替わらなかったことはありませんか?
Macのrbenvで最新バージョンにしようとしてハマったことを共有したいと思います。

最新バージョンまでの流れと状況

rbenvのバージョン一覧を確認

$ rbenv versions
=>
system
2.3.7
2.4.1
* 2.5.1 (set by /Users/use_name/.ruby-version)

Homebrewをアップデートして、rbenvをアップグレード

$ brew update
$ brew upgrade rbenv ruby-build

rbenvからインストールできるRubyのバージョンを確認

$ rbenv install -l

たくさん出てきますが2020年3月22日時点での安定最新バージョンの2.7.0をインストール

$ rbenv install 2.7.0

再度、rbenvのバージョン一覧を確認

$ rbenv versions
=>
system
2.3.7
2.4.1
* 2.5.1 (set by /Users/use_name/.ruby-version)
2.7.0

2.7.0がインストールされています。

rbenvのバージョンを切り替える

全体に反映ならglobal

rbenv global 2.7.0

特定のディレクトリのみならlocalを設定

rbenv local 2.7.0

切り替わって成功するはずですが切り替わりませんでした。

rbenvのバージョン一覧を確認

$ rbenv versions
=>
system
2.3.7
2.4.1
* 2.5.1 (set by /Users/use_name/.ruby-version)
2.7.0

2.5.1のままで変わっていない。

解決方法

viコマンドで/Users/use_name/.ruby-versionファイルの中身を確認

$ vi /Users/use_name/.ruby-version
=>
2.5.1

2.5.1と書いてある。(use_nameはrbenv-versionsで表示されているset byの後に書いてあるものを使う)

iキーを押してから2.7.0に変更(入力できない場合は、escキーを押してからiのキーを押す)

保存して抜けるためにescキーを押してから:wqと入力してエンターキーを押す。

rbenvのバージョン一覧を確認

$ rbenv versions
=>
system
2.3.7
2.4.1
2.5.1
* 2.7.0 (set by /Users/use_name/.ruby-version)

2.7.0に変わっている。

rubyのバージョンを確認

$ ruby -v
=>
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin17]

最新バージョンに変わりました!!

参考記事

TECHACADEMY magazine
Rubyバージョンアップの方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryでFlash, error_messageを閉じる方法(Bootstrap xボタンが反応しない場合)。

はじめに

Bootstrapのflash,error_messagesなどに使われる
<div class= "alert alert-○○">
が閉じない場合の対処法です。
私の環境が悪く閉じるアクションができないのか定かではありませんが
jQueryを使って閉じるアクションを可能にする方法を書いておきます。

私の場合、xマークのボタンは表示できましたがクリックをしても一切反応しませんでした。

開発環境

  • bootstrap-sass (3.3.7)
  • devise (4.7.1)
  • jquery-rails (4.3.1)
  • rails (5.2.4.1)

Flashやerror_messagesにxボタンをつける

こちら Bootstrap4版
こちら Bootstrap3版
上記のサイトのサンプルを確認すると

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

サイトでは、↓

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

簡単に要約するとalertなどを閉じる時は
class=alert-dismissiblealertコンテナ
<button>タグにclass="close",data-dismiss="alert"
を記入すればxボタンクリック時に消えますよと。

(私の環境で何か導入し忘れのものがある、もしくは、Javascript,jQueryで閉じるアクションする前提なのかもしれません。わかる方宜しければコメントなどで教えてください。)

jQueryで閉じるイベント

applivation.js
$(function() {
  $(".close").click(function() {
    $(".alert").hide();
  });
});

参考サイト

w3schools.com
(https://www.w3schools.com/bootstrap/bootstrap_alerts.asp)
(https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp)

終わりに

xボタンを押した際にBootstrapを適用したクラスのFlashやエラーメッセージを閉じることができると思います。
jQuery、Javascriptの重要性を再確認できました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

#Ruby の pry で コマンド履歴を検索して戻る/進むショートカット ( reverse-i-search / i-search ) ( Mac )

reverse-i-search

  • Ctrl + R で pryのコマンド履歴を検索できる
  • 検索中にもういちど Ctrl + R を押すと、検索結果をひとつずつ過去に戻れる
  • だがしかし、いちど戻ると、そこから逆に進む方法が分からない
  • 戻ってから進む方法が分からずに、たまに調べては諦め、そして5年が過ぎた

image
image

解決は .inputrc

~/.inputrc に以下を設定する

"\C-t": forward-search-history
  • pryの設定ではなく、実行するシェルの設定
  • .bash_profile とか .bashrc とか .zshrc とかと同じ扱い
  • 設定したらpryを終了、再起動する

動作確認

履歴を戻りすぎた場合に Ctrl+T で進めるようになったぞ!

image
image
image

原因

readline のデフォルトのキーバインドか何かと干渉していたのかもしれない。

image

command line - readline reverse-search-history C-r repeatedly finds next cmd, how to go back to previous? - Super User

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3042

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryでFlash, Alertsを閉じる方法(Bootstrap xボタンが反応しない場合)。

はじめに

Bootstrapのflash,error_messagesなどに使われる
<div class= "alert alert-○○">
が閉じない場合の対処法です。
私の環境が悪く閉じるアクションができないのか定かではありませんが
jQueryを使って閉じるアクションを可能にする方法を書いておきます。

私の場合、xマークのボタンは表示できましたがクリックをしても一切反応しませんでした。

開発環境

  • bootstrap-sass (3.3.7)
  • devise (4.7.1)
  • jquery-rails (4.3.1)
  • rails (5.2.4.1)

Alertやerror_messagesにxボタンをつける

こちら Bootstrap4版
こちら Bootstrap3版
上記のサイトのサンプルを確認すると

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

サイトにでは、↓

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

簡単に要約するとalertなどを閉じる時は
class=alert-dismissiblealertコンテナ
<button>タグにclass="close",data-dismiss="alert"
を記入すればxボタンクリック時に消えますよと。

(私が何か導入し忘れのものがある、もしくは、Javascript,jQueryで閉じるアクションする前提なのかもしれません。わかる方よければコメントなどで教えてください。)

JQueryで閉じるイベント

applivation.js
$(function() {
  $(".close").click(function() {
    $(".alert").hide();
  });
});

参考サイト

w3schools.com
(https://www.w3schools.com/bootstrap/bootstrap_alerts.asp)
(https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp)

終わりに

xボタンを押した際にBootstrapを適用したクラスのFlashやエラーメッセージを閉じることができると思います。
jQuery、Javascriptの重要性を再確認できました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQueryでFlash, error_messageを閉じる方法(Bootstrap xボタンが反応しない場合)。

はじめに

Bootstrapのflash,error_messagesなどに使われる
<div class= "alert alert-○○">
が閉じない場合の対処法です。
私の環境が悪く閉じるアクションができないのか定かではありませんが
jQueryを使って閉じるアクションを可能にする方法を書いておきます。

私の場合、xマークのボタンは表示できましたがクリックをしても一切反応しませんでした。

開発環境

  • bootstrap-sass (3.3.7)
  • devise (4.7.1)
  • jquery-rails (4.3.1)
  • rails (5.2.4.1)

Alertやerror_messagesにxボタンをつける

こちら Bootstrap4版
こちら Bootstrap3版
上記のサイトのサンプルを確認すると

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

サイトでは、↓

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

簡単に要約するとalertなどを閉じる時は
class=alert-dismissiblealertコンテナ
<button>タグにclass="close",data-dismiss="alert"
を記入すればxボタンクリック時に消えますよと。

(私の環境で何か導入し忘れのものがある、もしくは、Javascript,jQueryで閉じるアクションする前提なのかもしれません。わかる方宜しければコメントなどで教えてください。)

JQueryで閉じるイベント

applivation.js
$(function() {
  $(".close").click(function() {
    $(".alert").hide();
  });
});

参考サイト

w3schools.com
(https://www.w3schools.com/bootstrap/bootstrap_alerts.asp)
(https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp)

終わりに

xボタンを押した際にBootstrapを適用したクラスのFlashやエラーメッセージを閉じることができると思います。
jQuery、Javascriptの重要性を再確認できました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails アプリを EC2 にデプロイしよう!(デプロイ編)

Rails アプリを Amazon Web Service を使ってデプロイするまでの手順をまとめました。
次の順番でデプロイまで持っていきます。

1, 準備編
2, サーバー構築編
3, 環境構築編
4, デプロイ編

今回は「デプロイ編」です。
1 ~ 3 を読んでない方は先に読んでください。
Rails アプリを EC2 にデプロイしよう!(準備編)
Rails アプリを EC2 にデプロイしよう!(サーバー構築編)
Rails アプリを EC2 にデプロイしよう!(環境構築編)

Gem のインストール

前回までに、アプリのクローンを完了しました。
今回の最初の作業は、gem のインストールです。

まずは bundler を設定しましょう。
bundler は本アプリ使用している bundler とバージョンが一致しているものを選択しましょう。

[minato@ip-192-168-10-49 ~]$ /var/www/rails/sample_app
[minato@ip-192-168-10-49 sample_app]$ gem install bundler 2.1.4
Fetching bundler-2.1.4.gem
Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Installing ri documentation for bundler-2.1.4
Done installing documentation for bundler after 3 seconds
1 gem installed

次に、Gemfile の中身を確認しましょう。
今回は次の gem を想定しています。

Gemfile
gem 'rails', '~> 5.2.2'
gem 'bootsnap', require: false
gem 'puma', '~> 3.7'
gem 'mysql2', '>= 0.4.10', '< 0.5'

確認したら bundle install を行いましょう。

[minato@ip-192-168-10-49 sample_app]$ bundle _2.1.4_ install --path vendor/bundle --without development:test

無事にインストールできれば OK です。

アプリの secret_key_base の設定

次に secret_key_base の設定を行います。
今回は Rails 5.2 なので、config/credentials.yml.enc を読み込むために
config/master.key をEC2でも作成しましょう。
これがないと本番環境で起動することができません。

  1. ローカル環境 にある config/master.key の中身をコピーします。
  2. サーバー環境config/master.key を新規作成して先ほどコピーした内容をペーストします。

次のコマンドで secret_key_base が確認できれば OK です。

[minato@ip-192-168-10-49 sample_app]$ EDITOR="vim" bundle exec rails credentials:edit

Puma の設定

次は Puma の設定を行います。
Puma はアプリケーションサーバーの一種です。

早速設定していきます。

config/puma.rb
case ENV['RAILS_ENV']
when "production"
  environment "production"
  port 3000
  threads 16, 16
  daemonize true

  # sample_app の部分は自身のアプリケーションの名前に変更してください。
  app_dir = File.expand_path("/var/www/rails/sample_app", __FILE__)

  bind  "unix://#{app_dir}/tmp/sockets/puma.sock"
  pidfile      "#{app_dir}/tmp/pids/puma.pid"
  state_path   "#{app_dir}/tmp/pids/puma.state"

  stdout_redirect nil, "#{app_dir}/log/puma.stderr.log", true

  plugin :tmp_restart
else
  environment "development"
  port 3000
  threads 5, 5

  pidfile    "tmp/pids/puma.pid"
  state_path "tmp/pids/puma.state"

  stdout_redirect nil, "log/puma.stderr.log", true

  plugin :tmp_restart
end

ここら辺は設定ファイルなので、詳細には追いません。
また、設定ファイルの記述が終わったら、次のコマンドも実行してください。

[minato@ip-192-168-10-49 sample_app]$ mkdir tmp/sockets

puma.sock を作成先のディレクトリを作成しています。
これで Puma の設定が完了です。

Nginx の設定

お次は Nginx です。「エンジンエックス」と読むそうです。
この Nginx は Web サーバーにあたります。

早速下記コマンドを打ち込んでください。

[minato@ip-192-168-10-49 ~]$ cd ~
[minato@ip-192-168-10-49 ~]$ sudo yum install nginx
[minato@ip-192-168-10-49 ~]$ sudo vim /etc/nginx/conf.d/sample_app.conf

vim コマンドで作成した nginx の設定ファイルを次のように記述します。

/etc/nginx/conf.d/sample_app.conf
# アクセスログ・エラーログの出力先を設定する
# sample_app の部分は自身のアプリケーションの名前に変更してください
error_log  /var/www/rails/sample_app/log/nginx.error.log;
access_log /var/www/rails/sample_app/log/nginx.access.log;

upstream puma {
    # puma.sock の場所を指定する
    # sample_app の部分は自身のアプリケーションの名前に変更してください
    server unix:///var/www/rails/sample_app/tmp/sockets/puma.sock;
}

server {
    listen 80;

    # server_name を設定します。自身のパブリックDNSに変更してください。
    server_name ec2-52-198-194-39.ap-northeast-1.compute.amazonaws.com;

    client_max_body_size 500M;
    keepalive_timeout 5;

    # パブリックページの場所をここで設定します。
    # sample_app の部分は自身のアプリケーションの名前に変更してください
    root /var/www/rails/sample_app/public;

    location / {
        try_files $uri $uri/index.html $uri.html @app;
    }

    location @app {
        proxy_read_timeout    300;
        proxy_connect_timeout 300;
        proxy_redirect        off;
        client_max_body_size  1G;

        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;

        proxy_pass http://puma;
    }

    # Rails のエラーページを表示する
    # sample_app の部分は自身のアプリケーションの名前に変更してください
    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/www/rails/sample_app/public;
    }
}

ここも設定ファイルなので詳細には追いません。
また、AWSが生成するドメイン名が
ec2-52-198-194-39.ap-northeast-1.compute.amazonaws.com
と大変長いので、次のコマンドを実行して設定を変えます。

$ sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.old
$ sudp vim /etc/nginx/nginx.conf
nginx.conf
# ...

http {
    # ...
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    server_names_hash_bucket_size 128; # これを追記
    # ...
}

最後に、次のコマンドを実行してください。

[minato@ip-192-168-10-49 conf.d]$ cd /var/lib
[minato@ip-192-168-10-49 lib]$ sudo chmod -R 775 nginx

post メソッドでもエラーが出ないようにするためのものです。
これにて Nginx の設定完了です。

MySQLの設定

次は DB です。
アプリケーションの DB が MySQL で作成されている前提で話を進めていきます。

まずは database の設定を行います。

[minato@ip-192-168-10-49 sample_app]$ vim config/database.yml

設定内容は次のとおりです。

config/database.yml
production:
  <<: *default
  adapter: mysql2
  port: 3306
  database: sample_app_production
  username: root
  password:
  encoding: utf8
  charset: utf8
  collation: utf8_general_ci

保存したら次のコマンドを実行していきましょう。

# mysql を起動
[minato@ip-192-168-10-49 sample_app]$ sudo service mysqld start

# mysql.sock を /tmp に移動する
[minato@ip-192-168-10-49 sample_app]$ ln -s /var/lib/mysql/mysql.sock /tmp/mysql.sock

# 本番環境用の db を作成する
[minato@ip-192-168-10-49 sample_app]$ RAILS_ENV=production bundle exec rake db:create

# 本番環境用の db の migrate を実行する
[minato@ip-192-168-10-49 sample_app]$ RAILS_ENV=production bundle exec rake db:migrate

seed を予め設定する場合はこのタイミングで実行してください。

Rails アプリの起動

このコマンドで puma を起動しましょう。
これで Rails アプリが起動します。

[minato@ip-192-168-10-49 sample_app]$ RAILS_ENV=production bundle exec puma

インターネットからアクセス出来る様に
次のコマンドで nginx を起動します。

[minato@ip-192-168-10-49 sample_app]$ sudo service nginx start

自身のパブリックDNSを使用してブラウザからアクセスしてみましょう
http://ec2-52-198-194-39.ap-northeast-1.compute.amazonaws.com/

無事にアクセスできれば OK です。

停止方法

最後に停止方法について記述しておきます。

$ sudo service nginx stop
$ bundle exec pumactl halt

最後に

これでデプロイを完了することができました。

でも、まだアクセス出来てない方もいるかと思います。
そんな方はググったり、質問したりして問題解決を頑張ってください。
当たりが強いエンジニアもいますが、優しく教えてくれるエンジニアもいます。

自分は大学一回生でこのデプロイ作業を初めて行いましたが、完了するのに1週間もかかりました。
それでも大学の先輩に質問したり、頑張って英語の公式ドキュメントを読んだり、
ひたすらググったりすることでなんとかデプロイを完了しました。

このデプロイ経験で多くの知識や経験を得ました。
特に、根気よく問題解決する精神は鍛えられました。

根気よく、適度に休憩をとりながら、デプロイ作業を頑張ってください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails アプリを EC2 にデプロイしよう!(環境構築編)

Rails アプリを Amazon Web Service を使ってデプロイするまでの手順をまとめました。
次の順番でデプロイまで持っていきます。

1, 準備編
2, サーバー構築編
3, 環境構築編
4, デプロイ編

今回は「環境構築編」です。
準備編」と「サーバー構築編」を読んでない方は先に読んでください。

EC2 にログインする

まずは、作成したインスタンスが起動しているのを確認してください。
下記画像の欄が緑文字で「running」となっていればOKです。
EC2 ログイン
このインスタンスにアクセスしましょう。
アクセスするにはパブリックDNSを使用します。

パブリックDNSとは、インターネットを通じてアクセスするための住所といったイメージです。
例えば http://yahoo.co.jp と打ち込むと「Yahoo Japan!」のページに飛ぶことができますが、
http://118.151.235.191/ と打ち込んでも、同様のページにアクセスすることができます。

これは何故かというと、DNS(Domain Name System)というものが
118.151.~~~.~~~というIPアドレスとyahoo.co.jpというドメインを紐付けているからです。つまり、一旦ドメインでのアクセスをDNSが受け付けて、受け付けたドメインと対応するIPアドレスを探して表示させているという流れになります。

このDNSの場所が上記に記載されているといった形です。


パブリック DNS が表示されていない場合
パブリックDNSが割り当てられていないとインスタンスにアクセスできないので、
次の手順で解決を行ってください。
1. コンソール画面から検索するなりして「VPC」をクリックしてください。
2. 左のメニューバーから「VPC」をクリックしてください。
3. 左上辺りにある「アクション」から「DNS ホスト名の編集」を選択してください。
4. 「DNS ホスト名」にチェックを入れて「有効化」してください。

参考元:AWSでPublic DNS(パブリックDNS)が割り当てられない時の解決法


ここでやっと、ターミナル画面を使っていきます(長かった)...
今回は Mac を想定して記述していきます。

下準備

今回はopensshを使用するので、インストールしていない方はインストールしましょう。

~
$ brew install openssh

SSH? という方は次の記事を一読ください。
初心者がSSHについて学ぶ(´・ω・`)

今回はSSHを簡素に使用するので、よりセキュアに設定したい(しなければならない)方は
こちらの記事を一読するなどして、勉強しましょう。
インフラエンジニアじゃなくても押さえておきたいSSHの基礎知識

インスタンスへのログイン設定

先ほど作成したインスタンスにログインをしていきます。

EC2インスタンスにログインできるユーザーとして、
AWSでは、デフォルトでec2-userという名のユーザーが用意されています。

次の流れで進めていきたいと思います。
1. ec2-userでログイン
2. 新たなユーザーの作成
3. 作成したユーザーにec2-userと同様の権限を付与
4. 新たなユーザーで再度ログイン

打ち込むコマンドは次の通りです。

~
# 前回作成した公開鍵を .ssh ディレクトリに移動する
$ mv Downloads/SampleApp_ConsoleKeyRsa.pem ~/.ssh

# .ssh ディレクトリに移動
$ cd ~/.ssh
~/.ssh
# 公開鍵に600番で定義されたアクセス権を付与する
$ chmod 600 SampleApp_ConsoleKeyRsa.pem

# 公開鍵を利用してec2-userとしてログイン
$ ssh -i SampleApp_ConsoleKeyRsa.pem ec2-user@52.198.194.39

# 信頼性について警告を受けますが「yes」と入力しましょう。
The authenticity of host '52.198.194.39 (52.198.194.39)' can't be established.
ECDSA key fingerprint is SHA256:**************************************************.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

※ アクセス権について知っておきたい方は、次の URL を参考にするなどして予習しましょう
chmod? chown? よくわからんって人のための、ファイル権限系まとめ

これでEC2にアクセスすることができました。

~/.ssh
Warning: Permanently added '52.198.194.39' (ECDSA) to the list of known hosts.

       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/
7 package(s) needed for security, out of 11 available
Run "sudo yum update" to apply all updates.
[ec2-user@ip-192-168-10-49 ~]$ 

新たなユーザーの作成

続いて、新たなユーザーを作成し、作成したユーザーにマスター権限を与えていきます。

# 新規ユーザー名の登録
[ec2-user@ip-192-168-10-49 ~]$ sudo adduser minato

# 新規ユーザー名のパスワードを登録
[ec2-user@ip-192-168-10-49 ~]$ sudo passwd minato
Changing password for user minato.
New password: 
Retype new password: 
passwd: all authentication tokens updated successfully.

# 作成したユーザーに root 権限を追加する
# 1. rootに関する権限の記述箇所
#       root    ALL=(ALL)       ALL
#    を探す。
# 2. 「i」を入力することで「-- INSERT --」(入力)モードに移行する
# 3. その下に「作成したユーザーに権限を追加する」記述
#       minato  ALL=(ALL)       ALL
#    を追加する
# 4. esc を押して Input モードを終了
# 5. 「:wq」で保存&編集完了
[ec2-user@ip-192-168-10-49 ~]$ sudo visudo

$ sudo visudo では Vim というものを使用しています。
Vim とは主にコンソールから文字列を扱うviというテキストエディタを拡張したものです。
Amazon Linux においてはviコマンドを使用するとvimを使用するようにエイリアス設定がされています。

[ec2-user@ip-192-168-10-49 ~]$ which vi
alias vi='vim'
    /usr/bin/vim

vim の使い方については次の記事が非常に参考になります。
Vim初心者に捧ぐ実践的入門

編集が完了したら、次のコマンドでユーザーの切り替えを行ってください。

[ec2-user@ip-192-168-10-49 ~]$ sudo su - minato
[minato@ip-192-168-10-49 ~]$ 

無事にec2-userminato(作成したユーザー名)と切り替わればOKです。

SSH通信によるインスタンスへのログイン

続いては、先ほど作成したユーザーを使用してインスタンスにログインしていきます。

次の流れで進めていきたいと思います。
1. ローカルで鍵の生成
2. その鍵をどの通信の認証時に使用するか設定
3. サーバーとの認証処理を行う。
4. 実際に新ユーザーでログイン

では早速作業していきますが、
ここからしばらくは、ローカル(あなたが使っているパソコン)での作業になるので、
次のコマンドでローカル環境に戻りましょう。
(別のターミナルを立ち上げて作業を行ってもOKです)

[minato@ip-192-168-10-49 ~]$ exit
logout
[ec2-user@ip-192-168-10-49 ~]$ exit
logout
Connection to 52.198.194.39 closed.

次のコマンドで、ローカルで鍵の生成を行います。
~/.ssh 配下などで作業を行ってください。

~/.ssh
# 秘密鍵と公開鍵を作成
# 「Enter file in which to save the key」
# で、秘密鍵ファイルと公開鍵ファイルの名前を記述する
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/minato/.ssh/id_rsa): SampleApp_MinatoKeyRsa
Enter passphrase (empty for no passphrase): # そのままエンター
Enter same passphrase again: # そのままエンター
Your identification has been saved in SampleApp_MinatoKeyRsa.
Your public key has been saved in SampleApp_MinatoKeyRsa.pub.
The key fingerprint is:
SHA256:**************************************************
The key's randomart image is:
**********
**********
**********
**********
**********

# 秘密鍵と公開鍵が生成されたことを確認
$ ls
SampleApp_MinatoKeyRsa
SampleApp_MinatoKeyRsa.pem

# Vim を起動して設定ファイルを編集する
# 以下を追記します。
# ########################################
# Host SampleApp_MinatoKeyRsa
#     Hostname 52.198.194.39 # Elastic IP
#     Port 22     # ポート番号
#     User minato # サーバーで作成したユーザー名
#     IdentityFile ~/.ssh/SampleApp_MinatoKeyRsa # 秘密鍵の場所
# ########################################
$ vim config

# 公開鍵の中身をターミナル上に出力して、出力されたもの全てコピーしておく
$ cat SampleApp_MinatoKeyRsa.pub
ssh-rsa **************************************************

上記により、
1. ローカルで鍵の生成
2. その鍵をどの通信の認証時に使用するか設定
ここまでが完了しました。

次はサーバー側で作業を進めます。

~/.ssh
$ ssh -i SampleApp_ConsoleKeyRsa.pem ec2-user@52.198.194.39
[ec2-user@ip-192-168-10-49 ~]$ sudo su - minato

サーバーに公開鍵を登録します。

# 鍵を入れるためのディレクトリを作成、権限の付与を行い、
# そのディレクトリに移動する
[minato@ip-192-168-10-49 ~]$ mkdir .ssh
[minato@ip-192-168-10-49 ~]$ chmod 700 .ssh
[minato@ip-192-168-10-49 ~]$ cd .ssh

# 公開鍵ファイルを作成する
# 公開鍵の中身をコピペしましょう
[minato@ip-192-168-10-49 .ssh]$ vim authorized_keys

# 権限を設定する
[minato@ip-192-168-10-49 .ssh]$ chmod 600 authorized_keys

# ログアウトする
[minato@ip-192-168-10-49 .ssh]$ exit
[ec2-user@ip-192-168-10-49 ~]$ exit

これで新ユーザーでログインできるようになりました。
ローカルで下記コマンドを入力して、実際にログインできるか試してみましょう。

~
$ ssh SampleApp_MinatoKeyRsa

Last login: Sat Mar 21 16:54:32 2020

       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/
7 package(s) needed for security, out of 11 available
Run "sudo yum update" to apply all updates.
[minato@ip-192-168-10-49 ~]$ 

ログインできれば、無事ユーザー設定は終了です。

EC2インスタンスの環境構築

次は、作成したEC2インスタンス内でRubyやその他の環境が動くよう設定していきます。
「自身のPCで開発を始めるときに環境構築を行う」要領で、AWS内に新しく作成したパソコン(=EC2インスタンス)でも同様に環境構築を行なっていく感じです。

yum を使って環境を構築

まずは yum を使って幾つかの実行環境を構築していきます。

yum は「Yellowdog Updater Modified」の略で、環境を構築するときに使用する「パッケージ」を管理・運用することができるものです。
これを使って環境構築していきます。

EC2 には既に yum が入っているので、
まずは yum でインストールされているパッケージを最新の状態に更新しましょう。

# yum 内のパッケージを更新する
# パスワードが要求された際は入力する
# 「これだけインストールしますけど大丈夫ですか?」というような警告が出てきますが、
# 「y」を入力して承認してください。
[minato@ip-192-168-10-49 ~]$ sudo yum update

次に、今回使用するパッケージを一気にインストールしていきます。

# 今回使用するパッケージを一気にインストール。
# 各パッケージの説明は割愛しますが、
# C++、openssl、mysql、ImageMagick などをインストールしています。
[minato@ip-192-168-10-49 ~]$ sudo yum install \
git make gcc-c++ patch \
openssl-devel \
libyaml-devel libffi-devel libicu-devel \
libxml2 libxslt libxml2-devel libxslt-devel \
zlib-devel readline-devel \
mysql mysql-server mysql-devel \
ImageMagick ImageMagick-devel \
epel-release

Complete! が最後に表示されればOKです。

Ruby の実行環境

次に、EC2インスタンスに Ruby の実行環境を作成していきます。

Ruby をインストールするのに rbenv を使用します。
rbenv とは、簡単に Ruby のバージョンの切り替えを行うためのツールです。

次の手順で rbenv をインストールしていきます。

# rbenv をインストール
[minato@ip-192-168-10-49 ~]$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

# ~/.bash_profile に bin の位置を登録する
[minato@ip-192-168-10-49 ~]$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile

# ~/.bash_profile に rbenv コマンドが使えるように登録する
[minato@ip-192-168-10-49 ~]$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

# 先ほど設定したものを再読み込みする
[minato@ip-192-168-10-49 ~]$ exec $SHELL -l

# rbenv のバージョンを確認する
[minato@ip-192-168-10-49 ~]$ rbenv --version
rbenv 1.1.2-28-gc2cfbd1

# ruby-build をインストール
[minato@ip-192-168-10-49 ~]$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

# rehash を行う
[minato@ip-192-168-10-49 ~]$ rbenv rehash

そしていよいよ、Ruby のインストールです。

# rbenv のバージョンのリストを確認する
[minato@ip-192-168-10-49 ~]$ rbenv install --list
1.8.5-p52
1.8.5-p113
1.8.5-p114
...

# 2.6.5 をインストールする(バージョンは適宜変更してください)
[minato@ip-192-168-10-49 ~]$ rbenv install -v 2.6.5

# 2.6.5 を使用するように設定する
[minato@ip-192-168-10-49 ~]$ rbenv global 2.6.5

# rehash を行う
[minato@ip-192-168-10-49 ~]$ rbenv rehash

# ruby のバージョンを確認する
[minato@ip-192-168-10-49 ~]$ ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux]

しっかりと Ruby のバージョンが表示されれば成功です。

Node.js の実行環境

次に、EC2インスタンスに Node.js の実行環境を作成していきます。

Node.js をインストールするのに nvm を使用します。
nvm は、簡単に Node.js のバージョンの切り替えを行うためのツールです。
rbenv と同じ立ち位置ですが、

次の手順で nvm をインストールしていきます。

# nvm をインストール
[minato@ip-192-168-10-49 ~]$ git clone https://github.com/creationix/nvm.git ~/.nvm

# ~/.bash_profile に nvm.sh を読み込むように設定する
[minato@ip-192-168-10-49 ~]$ echo -e "if [[ -s ~/.nvm/nvm.sh ]]; then \nsource ~/.nvm/nvm.sh\nfi" >> ~/.bash_profile

# インストール可能な Node.js バージョンの確認
[minato@ip-192-168-10-49 ~]$ nvm --version

そしていよいよ、Node.js のインストールです。

# インストール可能な Node.js バージョンの確認
[minato@ip-192-168-10-49 ~]$ nvm ls-remote

# v12.16.1 をインストールする(バージョンは適宜変更してください)
[minato@ip-192-168-10-49 ~]$ nvm install v12.16.1

# Node.js のバージョンを確認する
[minato@ip-192-168-10-49 ~]$ node -v

しっかりと Node.js のバージョンが表示されれば成功です。

別のバージョンをデフォルトで使用するよう設定する場合は次のコマンドを使用してください。
$ nvm alias default v12.16.1

Rails アプリのクローン

今回の最後に、作成したアプリを git からクローンしてEC2インスタンス内に配置していきます。

git の設定ファイルを作成

まずは vim コマンドで .gitconfig という git に関する設定ファイルを生成します。

[minato@ip-192-168-10-49 ~]$ vim .gitconfig

次のように設定しましょう。

~/.gitconfig
# git のユーザー情報
[user]
    name  = minato         # git に登録した自分の名前
    email = hoge@hoge.com  # git に登録した自分のメールアドレス

# 色付け
[color]
    ui = true

# githubの場合
# pull と push のための設定
[url "github:"]
    InsteadOf = https://github.com/
    InsteadOf = git@github.com:

# bitbucketの場合
[url "bitbucket:"]
    InsteadOf = https://minato@bitbucket.org/ # minato はあなたのユーザー名に置き換えてください
    InsteadOf = git@bitbucket.org:

完了したらファイルを保存しましょう

アプリを配置するディレクトリの作成

次は、アプリを配置するディレクトリを作成していきます。

# / に移動
[minato@ip-192-168-10-49 ~]$ cd /

# var ディレクトリの所有者を minato にする
[minato@ip-192-168-10-49 /]$ sudo chown minato var
[sudo] password for minato: 

# var 配下に www ディレクトリを作成し、所有者を minato にする
[minato@ip-192-168-10-49 /]$ cd var; sudo mkdir www; sudo chown minato www

# www 配下に rails ディレクトリを作成し、所有者を minato にする
[minato@ip-192-168-10-49 var]$ cd www; sudo mkdir rails; sudo chown minato rails

mkdirコマンドでフォルダを作成し、chownコマンドで作成したフォルダの所有者を変更しています。

git と連携

いよいよ git と連携していきます。

まずは次のコマンドを打ち込んで、
git と連携する用の秘密鍵と公開鍵を作成しましょう。

[minato@ip-192-168-10-49 www]$ cd ~
[minato@ip-192-168-10-49 ~]$ chmod 700 .ssh
[minato@ip-192-168-10-49 ~]$ cd .ssh
[minato@ip-192-168-10-49 .ssh]$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/minato/.ssh/id_rsa): SampleApp_GitKeyRsa
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in SampleApp_GitKeyRsa.
Your public key has been saved in SampleApp_GitKeyRsa.pub.
The key fingerprint is:
SHA256:**************************************************
The key's randomart image is:
**********
**********
**********
**********
**********

[minato@ip-192-168-10-49 .ssh]$ ls
authorized_keys  SampleApp_GitKeyRsa  SampleApp_GitKeyRsa.pub

秘密鍵と公開鍵が作成されているか確認できればOKです。

次は vim を起動して設定ファイルを編集しましょう。

[minato@ip-192-168-10-49 .ssh]$ vim config

次のように設定してください。

~/.ssh/config
# github の場合
Host github
    Hostname github.com
    User git
    IdentityFile ~/.ssh/SampleApp_GitKeyRsa 

# bitbucket の場合
Host bitbucket
    Hostname bitbucket.org
    User git
    IdentityFIle ~/.ssh/SampleApp_GitKeyRsa

保存したら config に権限も設定しましょう。

[minato@ip-192-168-10-49 .ssh]$ chmod 600 config

次に、公開鍵を出力します。

[minato@ip-192-168-10-49 .ssh]$ cat SampleApp_GitKeyRsa.pub
ssh-rsa **************************************************

一度インスタンスとの接続で行った鍵の作成の流れなので、大丈夫だと思います。
そして cat で表示させた公開鍵を github または bitbucket に登録します。

GitHub の場合
1. GitHubにログインして、右上のメニューから Settings を選択
2. SSH and GPG keys を選択
3. New SSH Key を押す
4. Title(自由)、Key(コピーした内容をペースト)を入力して Add SSH key を押す

Bitbucket の場合
1. Bitbucket にログインして、左下の自身のアイコンから View Profile を選択
2. メニューから「設定」を選択
3. メニューから「SSH 鍵」を選択
4. 「鍵を追加」を押す
5. Label(自由)、Key(コピーした内容をペースト)を入力して「鍵を追加」を押す

登録が完了したら接続を試してみましょう

# github の場合
[minato@ip-192-168-10-49 .ssh]$ ssh -T github
Hi MinatoTachibana! You've succwwwessfully authenticated, but GitHub does not provide shell access.

# bitbucket の場合
[minato@ip-192-168-10-49 .ssh]$ ssh -T bitbucket
The authenticity of host 'bitbucket.org (18.205.93.2)' can't be established.
RSA key fingerprint is ******************************.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'bitbucket.org,18.205.93.2' (RSA) to the list of known hosts.
logged in as minato

You can use git or hg to connect to Bitbucket. Shell access is disabled

このように表示されれば接続成功です。
登録が済んだら、いよいよクローンです。

[minato@ip-192-168-10-49 .ssh]$ cd /var/www/rails
[minato@ip-192-168-10-49 rails]$ git clone git@bitbucket.org:minato/sample_app.git
[minato@ip-192-168-10-49 rails]$ ls
sample_app

自身で作成した Rails アプリが表示されていれば OK です。

最後に

今回は「環境構築編」でした。
次回が最終回になります(長い...)

それでは最終回「デプロイ編」お楽しみに。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Railsプロジェクト作成手順(Vue版)

環境

  • macOS Mojave 10.14.6
  • rbenv 1.1.2
  • Homebrew 2.2.10
  • ruby 2.7.0
  • Rails 6.0.2.2

方法

1. ディレクトリを作成する。

$ mkdir practice_project

2. 作ったディレクトリに移動する。

$ cd practice_project

3. Gemfileを生成する。

$ bundle init

4. Gemfileを編集する。

Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails" ←コメントアウトを外す

5. Gemをインストールする.

bundle install --path vendor/bundle

6. Railsプロジェクトを生成する。

$ bundle exec rails new . -d mysql --skip-test --webpack=vue

Overwrite /Users/koji/practice/vue_practice/Gemfile? (enter "h" for help) [Ynaqdhm] Y

おわりに

『もっと簡単にできる方法あるよーーー!』

『ここわかりにくいよーーー!』

『ここ間違っているよーーー!』

等あればコメントいただけるとめちゃくちゃ嬉しいです!!!

twiiter → https://twitter.com/jiko797torayo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Railsプロジェクト作成手順

環境

  • macOS Mojave 10.14.6
  • rbenv 1.1.2
  • Homebrew 2.2.10
  • ruby 2.7.0
  • Rails 6.0.2.2

方法

1. ディレクトリを作成する。

$ mkdir practice_project

2. 作ったディレクトリに移動する。

$ cd practice_project

3. Gemfileを生成する。

$ bundle init

4. Gemfileを編集する。

Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails" ←コメントアウトを外す

5. Gemをインストールする.

bundle install --path vendor/bundle

6. Railsプロジェクトを生成する。

$ bundle exec rails new . -d mysql --skip-test

Overwrite /Users/koji/practice/vue_practice/Gemfile? (enter "h" for help) [Ynaqdhm] Y

(Vueを使う場合)

$ bundle exec rails new . -d mysql --skip-test --webpack=vue

Overwrite /Users/koji/practice/vue_practice/Gemfile? (enter "h" for help) [Ynaqdhm] Y

おわりに

『もっと簡単にできる方法あるよーーー!』

『ここわかりにくいよーーー!』

『ここ間違っているよーーー!』

等あればコメントいただけるとめちゃくちゃ嬉しいです!!!

twiiter → https://twitter.com/jiko797torayo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む