Railsチュートリアル（第4版）に取り組む際に発生したエラーについての備忘録。 ログから発見した内容 Couldn't find Active Storage configuration in /app/config/storage.yml (RuntimeError) と出てきた。 ディレクトリを見ても、/app/config/storage.ymlなんてファイルは存在しないので困ってしまった。 Railsのバージョンがおかしかった→バージョンを5.1.6に直して解決 調べてみると、storage.ymlというものはactivestorageなるものを利用するときに必要なものらしい？ activestorageはRailsチュートリアル第4版では利用していないのでここでエラーが起こっているようだ。 railsのバージョンを見てみると、5.1.6ではなかった。 $ rails --version Rails 6.1.3 Gemfileのバージョンしてが悪そうだったので、 Gemfile(before) gem 'rails', '>=5.1.6' Gemfile(after) gem 'rails', '5.1.6' こうした。この後、bundle update bundle installして、コミット後にHerokuにプッシュしたところ上手くいった。 結論：チュートリアルのバージョンと手元のバージョンが違うとおかしくなることがある バージョン管理の必要性を感じた、、、 おまけ　ちょっと役にたったこと $ heroku run rails console と実行すると、本番環境でrails consoleが見れる。 しかも、バグっているときはバグった際のエラーコードを表示してくれた（初学者のため正式な動作は把握していません）。 heroku logs --tailsやるよりも見やすいかもしれない。

はじめに 通常、ログイン・アカウント作成をしたら、トップページが表示されます。 これは、Deviseの仕様でデフォルトでは、root_pathに遷移します。 今回は、ログイン・アカウント作成したら、サンプルページに遷移するようにしていきます。 ログイン後の遷移先を変更 1. sessionsコントローラーを作成 以下のコマンドを実行して下さい。 touch app/controllers/sessions_controller.rb 2. 作成後、サンプルページに遷移されるコードを記述 以下のコードを記述して下さい。 sessions_controller.rb class SessionsController < Devise::SessionsController protected def after_sign_in_path_for(resource) sample_path end end 【 解説 】 after_sign_in_path_forメソッドの中で、サンプルページのルーティングであるsample_pathを指定することで、ログイン後にサンプルページに遷移するようにしています。 3. ルーティングを編集 sessionsコントローラーを読み込むためにルーティングを以下のように編集して下さい。 routes.rb # sessions: :sessions を追加 devise_for :users, controllers: { sessions: :sessions } アカウント作成後の遷移先を変更 1. registrationsコントローラーを作成 以下のコマンドを実行して下さい。 touch app/controllers/registrations_controller.rb 2. 作成後、サンプルページに遷移されるコードを記述 以下のコードを記述して下さい。 registrations_controller.rb class RegistrationsController < Devise::RegistrationsController protected def after_sign_up_path_for(resource) sample_path end end 【 解説 】 after_sign_up_path_forメソッドの中で、サンプルページのルーティングであるsample_pathを指定することで、アカウント作成後にサンプルページに遷移するようにしています。 3. ルーティングを編集 registrationsコントローラーを読み込むためにルーティングを以下のように編集して下さい。 routes.rb # registrations: 'registrations', を追加 devise_for :users, controllers: { registrations: 'registrations', sessions: :sessions } 参考記事 https://www.rubydoc.info/github/plataformatec/devise/Devise%2FControllers%2FHelpers:after_sign_in_path_for https://www.rubydoc.info/github/plataformatec/devise/Devise%2FRegistrationsController:after_sign_up_path_for

はじめに Railsにてポートフォリオ作成中に、 jQueryが機能しないことがあり苦戦した為、まとめます。 実装した機能(一部紹介) ・slick(スライド機能) ・jp_prefecture(住所自動入力機能) ・iTyped(タイピングアニメーション) ・ScrollTop(ページトップにスクロールするボタン) ・ScrollReveal(要素のアニメーション表示) 　など 開発環境 ・ruby: 2.6.3 ・rails: 5.2.5 ・OS: macOS Catalina ver10.15.7 ・Cloud9 前提条件 ・jQueryのコードはしっかり書いている(間違いなし) 【ここが１番ポイントかも】 ・ページをリロードした時はちゃんと動く ・別ページからリンクで飛んでくると動かない 原因 Rails4以降に導入されたTurbolinksが原因だった。 これが原因でjQueryのreadyイベントが着火しないらしい。 Turbolinksとは 簡単に言うと、ページ遷移を高速化させる仕組み ※公式より Turbolinksを用いた画面遷移の順番 1:リンクのクリックイベントが発火する 2:画面遷移を阻害し、非同期でリクエストを送る 3:レスポンスとしてHTMLを返す 4:headタグに含まれているJSとCSSが、現在のページと一致しているかチェック 解決方法 解決方法は２つ 1:turbolinks: loadを使ってjsファイルを書きかえる 2:Turbolinksを機能として停止させる turbolinks: loadを使ってjsファイルを書きかえる方法 $(function () { 〜の部分を $(document).on('turbolinks:load', function() { 〜に書きかえる jsファイル. /* 変更前 */ $(function () { // 処理 }); /* 変更後 */ $(document).on('turbolinks:load', function() { // 処理 }); これだけ！簡単！ Turbolinksを機能として停止させる方法 1:Gemfileの以下の記述をコメントアウトする Gemfile. gem ‘turbolinks’, ‘~> 5’ 2:読み込み ターミナル. bundle install 3:app/javascript/packs/application.jsの該当箇所をコメントアウトする application.js require('turbolinks').start() 4:app/views/application.html.erbの該当箇所を消す(headタグ内) application.html.erb <!--変更前--> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!--変更後--> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application' %> <!--javascript~の部分の消した箇所はここ！--> 'data-turbolinks-track': 'reload' これで解決！ 僕は1の方法が早くて楽だったので1で解決しました！ さいごに コードは合っているはずなのになぜ動かない・・・ そんなこんなで１時間ほど時間を無駄にしてしまいました。 今後、私のようにこの問題にぶち当たった人が、 この記事見つけ、早めに問題を解決してくれたら幸いです。 ポートフォリオ作りながら、Qiita発信両立するのは難易度高い...。 誤字、誤った記述等ありましたら、コメントよろしくお願いします。

wantedlyで応募した企業とのカジュアル面談をしてきました。 まだ受けたことのない方は、カジュアル面談がどんな感じなのか気になる方いらっしゃると思うので参考までに内容まとめてみます！ 聞かれた質問↓ ・簡単な自己紹介 ・なぜwebエンジニアなのか →かなり深掘りされました ・勉強会には参加しているか ・企業選びで重視してる点 ・スクールの形態について →結構色々聞かれました ・チーム開発をやってみてどうだったか ・チーム開発と個人開発のどちらが面白かったか ・スペシャリストかジェネラリストか ・どのような働き方がよいか(リモートか出社か) ・会社の雰囲気はワイワイしてる方が良いか、みんなもくもくと集中して取り組む方がよいか ・逆に質問はあるか 感想 カジュアル面談といっても、普通に面接のような雰囲気でした。 そして、今回初めてカジュアル面談やってみたのですが、結構深掘りされてしまったうえに、あまり本格的な練習をせずにやってしまったので、ちょっとした矛盾点も見逃さず深掘りされてしまい…と言ったようなこともありました? それと、今回面談した企業は、想像以上に技術重視<ポテンシャル重視でした。 逆に質問はないかと聞かれたので、ポートフォリオで重視する点はありますか？と聞いたところ、「ポートフォリオはあまり重視していない、みんな綺麗なソースコード使ってるだろうし…。うちはポテンシャル重視でやってるから、基本的な技術はしっかりとみんな身についている前提のうえで、人柄で決めている」 と回答でした。 今回の企業はかなりのポテンシャル採用だったため、本当に面接対策など大事だなと思いました。 反対に、ポートフォリオ重視の企業はあるという話も聞いてますので、どちらも万全にするべきだったなというのが僕の感想です…。 注意しなければいけないと感じたこと 面談を受ける前に「今回のカジュアル面談では詳しい募集内容や業務内容についてお話できればと思います。」 と事前に言われれてましたが、募集内容や業務内容というよりは、ほとんど私に対する質問でして、更に少しでも矛盾点があればすぐ深掘りされました。 最初になんと言われようと、カジュアル面談だと甘く見ずに、本当にもう面接に挑む気持ちで準備をしっかりするべきだとも、改めて思いました。 以上、参考にして頂ければ幸いです。

本記事の内容 本記事はraiilsにおける画像の配置場所とその違いについてまとめた記事です。間違い等ございましたら、お手数ですがご指摘いただけますと幸いです。 画像の配置場所 下記の２箇所が画像データの配置場所となります。 app/assets/imagesディレクトリ public/imagesディレクトリ 違いは？(パスの記述) 画像を読み込む際のパスが異なります。 具体的には以下の様な違いがある。 app/assets/imagesディレクトリ <%= image_tag('hoge.png')> public/imagesディレクトリ <%= image_tag('/hoge.png')> アセットパイプライン Ruby on Railsのアプリケーション内で使用したいJavaScriptやCSS、画像ファイルを「開発作業がしやすいようにファイルを分割してコーディングができるようにしつつ、最終的に一つのファイルに連結・圧縮する」仕組みのこと。だそうです。 webブラウザは一つのwebページを表示するために複数のファイルを結合する機能が備わっていないため、開発環境において複数のディレクトリに跨って開発されたものを本来１ページとして表示できない。 これを解決するのがアセットパイラインである。 まとめ ざっくりと概要を掴む感じで書いてみました。 まだまだ知識不足ですので、色々記事を読みながら学習していきます。 参考にした記事

概要 下記の条件下でのtailwindcss導入 rails6 docker tailwindcss2 手順 いくつか方法があって gemのtailwindcss-railsを使う yarn経由でinstallする 「RailsでTailwind CSSを使用する」 https://qiita.com/tabakazu/items/4c152de6e9a2c293d1f2 今回は前者で行う gemのinstall gem 'tailwindcss-rails' bundle install rails tailwindcss:instal

概要 最近Railsを初めて触ったので、Railsコマンドを忘れないようにメモします。 コマンド API作成 rails new sample --api Webサーバー起動 rails server コントローラ作成 rails g controller sample モデル作成 rails g model sample コントローラ削除 rails destroy sample ルーティング表示 rails routes DB 作成 rails db:create マイグレーション rails db:migrate ロールバック rails db:rollback gemのインストール bundle install テスト実行(RSpec) bundle exec rspec 参考文献 Railsで超簡単API 【Rails】Rails6でAPIモードの環境構築をしっかりやる

前提 ■あくまで個人の備忘録。見やすは非重視 ■データベースは以下の設定にて記述 ・開発環境/テスト環境：SQLite3　　・本番環境：PostgreSQL ■Heroku CLI、Gitへの会員登録が完了している ※完了していない場合は以下サイトで登録する Heroku CLI、Git ■Ruby、Railsがインストールがされている ※されていない場合はコチラでインストール Gitインストール こちらのサイトで順を従ってインストールを行う ※本記事ではWindows10の64bitなのでそれに応じたインストーラーを使用 Herokuインストール こちらのサイトで順を従ってインストールを行う ※本記事ではWindows10の64bitなのでそれに応じたインストーラーを使用 使用するデータベースをインストール それぞれ、下記サイトにてインストーラーをダウンロードし、順に従ってインストールを行う 開発、テスト環境：SQLite3 本番環境：PostgreSQL Railsアプリの作成 アプリ作成 Railsアプリを新規作成します。 ※データベースはデフォルトのSQLite3で作成するが、任意で変更 コマンドプロンプト $ rails new (アプリケーション名) 作成後アプリケーションディレクトリへ移動しておく Gemfile設定変更 開発環境・テスト環境・本番環境で分けて使用できるようにGemfileを以下のように変更 Gemfile ....(省略) ## コメントアウト # Use sqlite3 as the database for Active Record # gem 'sqlite3', '~> 1.4' ....(省略) group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] ## 追加 gem 'sqlite3' end ## 追加 group development do gem 'pg' end ....(省略) 変更したGemfileを反映するため以下のコードを実行 コマンドプロンプト $ bundle install database.ymlの設定変更 database.yml ....(省略) production: <<: *default adapter: postgresql encoding: unicode pool: 5 Gitの設定 以下を最初の1度のみ実行 コマンドプロンプト $git init 以下で保存ファイルを選択(今回は全てを保存するコマンドを使用) コマンドプロンプト $git add -A 以下でコミット コマンドプロンプト $git commit -m "ログに記載する説明をここに記載" ※最初のコミット時にはGitのアカウント情報を求められるが 登録、または登録予定があれば以下で設定してからコミット、そうでないなら無視でOK コマンドプロンプト $git config --global user.email #Gitのメールアドレス $git config --global user.name #Gitのユーザ名 Heroku Herokuの設定 以下でパッチ設定を行う コマンドプロンプト $echo 'PATH="/user/local/heroku/bin:$PATH"' >> ~/.profile 以下でHerokuのパッチが通っているか確認 コマンドプロンプト $heroku -v バージョンが出てくればOk Herokuへログイン コマンドプロンプト $heroku login 以下のようにHeroku CLIのアカウント情報を求められるので該当の情報を入力 ※最初の一度だけ求められる Enter your Heroku credentials: Email:○○○○○○＠○○○○○○ Password:************* Login in as ○○○○○○＠○○○○○○ 2度目以降は以下が表示される $heroku login heroku: Press any key to open up the browser to login or q to exit: この場合は、[Enter]キー押下でブラウザーが開き、[q]キーでキャンセル [Enter]キーを押下した場合は以下のようなページに遷移されるので、[Log In]を押下でログインされる。 Heroku アプリの作成 $heroku create (アプリ名) アプリ名の指定条件は以下となる。 ・半角英数字のみ ・記号は「-」のみ Herokuへデプロイ 以下のコマンドでデプロイする $git push heroku master ※上記のみでは完了していないので注意 デプロイの確定をするには以下のコマンドを実行 $heroku run rails db:migrate デプロイコマンド実行した際に、最後に表示された以下のようなアドレスが、アプリURLとなる。 https://○○○○○○○○.herokuapp.com/ 上記URLでサイトにアクセスしデプロイが完了しているのを確認する 補足 アプリの更新時は以下を行う コマンドプロンプト $git add -A(または指定のファイル) $git commit -m "メッセージを記入" $git push heroku master $heroku run rails db:migrate #テーブルの更新があった場合のみ スペック情報 OS：Windows10Pro 64bit IDE：Visual Studio Code Ruby：2.7.2ｐ137 Heroku：7.51.0 git：2.30.1 SQLite3：3.34.1 PostgreSQL：13.0

概要 RailsはRubyで最もメジャーなフレームワークでRubyによるWebアプリ開発に 特化した言語である。 Railsには理念が二つの理念が存在する。 一つはDRY（Don't Repeat Yourself)。 直訳すると「同じことを繰り返すな」で（自分なりに）意訳すると 「いろいろなところに同じコードを書かず共通となるコードは流用しろ」となる。 Rubyは少ない記述で様々な機能を実現できる特徴があるので、 このDRYの理念に沿っていると言える。 もう一つはCOC（Convention Over Configuration） 直訳は「設定より規約を優先しろ」。 RailsはWebアプリを開発するに際して必要だが、手間となる初期作業（DB設定,etc）などを 予め規約として定義しているため、そういった手間を省くことでより効率的に Webアプリ開発を行うことができる。 考え方 MVCモデルを採用している。それぞれざっくり解説していく。 * Model（モデル） RailsにおけるDB（データベース）へのアクセスといった情報のやり取りを司っている。 そのためモデルがないとテーブルをRailsで管理できない。 １テーブルに対してテーブルを管理するために１モデルが存在する。（１：１の関係） View（ビュー） Railsがブラウザに対してユーザーにレスポンスするページを指す。 貴方が今ブラウザで見ているページがRailsにおけるビューとなる。 Controler（コントローラー） Rails ⇔ ユーザー間のリクエスト・レスポンスを司っている。 「あれやって、これやって」と指示している上司のようなイメージ。 コントローラーにはRailsにおけるデータの表示や保存、削除といった処理を 行う「７つのアクション」というものが存在する。 最後に 今回、初めてQiitaに投稿しましたが正直にいって自分がQiitaのような不特定多数が 閲覧できる場に記事を投稿するなんて想像していませんでした。 極力、簡素に分かりやすく書いているつもりですがこうして人に見せる記事を書いていくことで 自分の中にある知識などをより上手く言語化できるようになれたらと思います。 数年後の自分がこの記事を読み返したら「下手だったな〜」と笑えるくらい成長できるように 精進していきたいと思います。

作成経緯 RailsAPIモード使い方をまとめたかったので作成してます。備忘録なので所々違うかもしれません。 もっといい方法があればぜひ参考にしたいと考えています。今回はローカルで動くようにしていますので 本番環境では動きません。 RaislAPI作成 $ rails new アプリ名 --api Gemfile gem 'rack-cors' #コメントアウトを外してbundle installする config/initializers/cors.rb #コメントアウトを外す Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do origins 'http://localhost:3001' #変更します。 #origins 'example.com' #'http://localhost:3001'許可する resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] end end モデル作成 $ rails g migration モデル名 $ bundle exec rails db:migrate 普段と変わらないのでいつも通り作成してください。 ルーティング作成 config/routes.rb Rails.application.routes.draw do #----------ここから---------------- namespace :api do namespace :v1 do resources :todos, only: %i[index show create update destroy] end end #----------ここまで追加------------- end バージョン管理する時にnamespaceを使うと便利なので分けています。 コントローラ作成 app/controllers/api/v1/todos_controller.rb class Api::V1::TodosController < ApplicationController def index todos = Todo.order(updated_at: :desc) render json: todos end def show todo = Todo.find(params[:id]) render json: todo end def create todo = Todo.new(todo_params) if todo.save render json: todo else render json: todo.errors, status: 422 end end def update todo = Todo.find(params[:id]) if todo.update(todo_params) render json: todo else render json: todo.errors, status: 422 end end def destroy if Todo.destroy(params[:id]) head :no_content else render json: { error: "Failed to destroy" }, status: 422 end end private def todo_params params.require(:todo).permit(:name, :is_completed) end end 今回はJSON形式でデータを返すだけです。 destroyは返すデータがないためheadを使っています。 headについてはRailsガイド確認 controllerの書き方Part2 app/controllers/api/v1/todos_controller.rb module Api module V1 class TodosController < ApplicationController def index todos = Todo.all render json: { todos: todos }, status: :ok end end end end module ディレクトリ〜end囲んでもnamespace使うことが出来ます。 React作成 アプリの直下でReactのアプリ作成する。 $ npx create-react-app front $ cd front $ npm install react-router-dom $ npm install axios $ npm start Reactの初期画面が出ていることを確認します。 $ mkdir src/urls $ touch src/urls/index.js src/urls/index.js const DEFAULT_API_LOCALHOST = 'http://localhost:3000/api/v1' export const todosIndex = `${DEFAULT_API_LOCALHOST}/todos` axiosで通信するものを定数で定義します。 src/apis/todos.js import axios from 'axios'; import { todosIndex } from '../urls/index' export const fetchTodos =() => { return axios.get(todosIndex) .then(res => { return res.data //通信成功 }) .catch((e) => console.error(e)) //通信失敗 } axios.getでHTTPリクエストをしています。 通信に成功した場合は.then()なり、通信に失敗・例外の場合は.catch()になります。 作成した関数fetchTodos()呼び出したら'http://localhost:3000/api/v1/todosを呼び出し、JSON形式でデータが返って来ます。 .then(res => { return res.data //通信成功 }) resの中にデータが入り、returnでres.dataデータだけ返しています。 import React, { Fragment, useEffect } from 'react'; import { fetchTodos } from '../apis/todos'; export const Todos = () => { useEffect(() => { fetchTodos() .then((data) => console.log(data) ) }, []) return ( <Fragment> Todo一覧 </Fragment> ) } rails側でrails sをし、localhost:3000立ち上げ、 front側でnpm startします。localhost:3000はrailsで使用しているためlocalhost:3001で立ち上げます。 これで環境構築は完成していると思います。 毎回、railsとreactを両方立ち上げるのがめんどくさいので 今後の目標はDockerで環境構築したいと考えています。

Rubocopの導入について Rubocop（ルボコップ）はRubyの静的コード解析ツール。 「インデントが揃っていない」「余分な改行やスペースがある」などの指摘をRubyStyleGuideに基づいて行ってくれる。 Rubocopを導入することにより、レビューにかかる時間を減らし、コードの品質を担保できるようになる。 ターミナル上で、 ターミナル #Rubocopを実行 % bundle exec rubocop と実行するだけで、ターミナル上に吐き出してくれる。 Rubocopの導入 まずは、Gemfileに以下を追記。 Gemfile group :development do gem 'rubocop', require: false end 次に「bundle install」を実行 ターミナル % bundle install すると、以下のファイルが作成される .rubocop.yml 次にRubocopの設定を記述するファイルを新規作成する。 ターミナル % touch .rubocop.yml 次にRubocopの設定を行う。 .rubocop.yml AllCops: # 除外するディレクトリ（自動生成されたファイル） # デフォルト設定にある"vendor/**/*"が無効化されないように記述 Exclude: - "vendor/**/*" # rubocop config/default.yml - "db/**/*" - "config/**/*" - "bin/*" - "node_modules/**/*" - "Gemfile" # 1行あたりの文字数をチェックする Layout/LineLength: Max: 130 # 下記ファイルはチェックの対象から外す Exclude: - "Rakefile" - "spec/rails_helper.rb" - "spec/spec_helper.rb" # RSpecは1つのブロックあたりの行数が多くなるため、チェックの除外から外す # ブロック内の行数をチェックする Metrics/BlockLength: Exclude: - "spec/**/*" # Assignment: 変数への代入 # Branch: メソッド呼び出し # Condition: 条件文 # 上記項目をRubocopが計算して基準値を超えると警告を出す（上記頭文字をとって'Abc'） Metrics/AbcSize: Max: 50 # メソッドの中身が複雑になっていないか、Rubocopが計算して基準値を超えると警告を出す Metrics/PerceivedComplexity: Max: 8 # 循環的複雑度が高すぎないかをチェック（ifやforなどを1メソッド内で使いすぎている） Metrics/CyclomaticComplexity: Max: 10 # メソッドの行数が多すぎないかをチェック Metrics/MethodLength: Max: 30 # ネストが深すぎないかをチェック（if文のネストもチェック） Metrics/BlockNesting: Max: 5 # クラスの行数をチェック（無効） Metrics/ClassLength: Enabled: false # 空メソッドの場合に、1行のスタイルにしない　NG例：def style1; end Style/EmptyMethod: EnforcedStyle: expanded # クラス内にクラスが定義されていないかチェック（無効） Style/ClassAndModuleChildren: Enabled: false # 日本語でのコメントを許可 Style/AsciiComments: Enabled: false # クラスやモジュール定義前に、それらの説明書きがあるかをチェック（無効） Style/Documentation: Enabled: false # ％i（）構文を使用していないシンボルで構成される配列リテラルをチェック（無効） Style/SymbolArray: Enabled: false # 文字列に値が代入されて変わっていないかチェック（無効） Style/FrozenStringLiteralComment: Enabled: false # メソッドパラメータ名の最小文字数を設定 Naming/MethodParameterName: MinNameLength: 1

DBを変更するとheroku上にデプロイできない 画像投稿アプリケーションを作成していた時に画像を１枚しか投稿できないことが不便だと感じ、複数枚投稿できるシステムに変更した。 その際にモデルでアソシエーション変更 tweet.rb has_one_attached :image １枚のみでの前提だった上記のコードを以下のように変更 tweet.rb had_many_attached :images viewファイルやその他、複数枚での機能のため記述を変更。（ここではエラーに関係ないので割愛） ローカル環境では問題なく実装が完了！ その後いつものデプロイの手順でgit push heroku masterを ターミナル上のアプリのディレクトリで入力。 ところが、いざheroku上で確認したらエラーが出てしまった? heroku上だと『あなたがオーナーならログでもっと情報を確認しましょう』的な意味合いの文が表示されている。 エラーログを確認しようとターミナルで以下のコマンドを入力 heroku logs --tail --app アプリ名 すると以下のエラーログを発見することができた！ ActionView::Template::Error (Nil location provided. Can't build URI.) このエラー文の後にはviewファイルの画像を表示させるコードが並んでいた。推測するに画像のURIがないですよ。と言われているのだろう。ローカル環境では問題なく実装できていたためコードに誤りがあるとは考えにくい。ここで画像のデータベースの関係性の記述を変更したことを思い出す。heroku上でのデータベースリセットを行えば解決できそうだと推測できる。 ターミナル上でデータベースをリセットするコマンドを入力 heroku run rails db:drop db:create db:migrate すると上手くデータベースをリセットできていない? ターミナル上のログを確認すると以下のログを発見！ If you are sure you want to continue, run the same command with the environment variable: DISABLE_DATABASE_ENVIRONMENT_CHECK=1 ログの記載は『もしこのコマンドを行いたいなら、DISABLE_DATABASE_ENVIRONMENT_CHECK=1　をつけてね』 と解釈できる。上記のログを検索すると使用方法が１発で分かった heroku run DISABLE_DATABASE_ENVIRONMENT_CHECK=1 rails db:drop db:create db:migrate heroku run の後に先程のコードを入れて再度実行！ するとheroku上でも問題なく実行された? これから 今回初めてQiitaを使用したが、タイピングの遅さに加えて可読性のある解説を意識したら３０分近く時間がかかった? エラー解決よりQiitaに記述する方が時間がかかるではないか！これじゃ作業が進まん！と思ったりもしたが同じエラーが起こった際に絶対に効率よく解決するために、アウトプットしていこうと思う。ログを文と書いてしまう等、プログラミング用語を上手く使用できない課題もあるが、アウトプットの数をこなして自身の課題解決に向けて頑張ろう！ あとタイピングの練習にもなると思うのでこれからマイペースに時間のかかったエラーは投稿するぞーーーー?

Migrationファイルに変更、修正が必要になった際に気をつけなければならないことについて、 備忘録に残しておきます。 結論：rails db:rollbackコマンドを実行することでupをdownに変更してから、Migrationファイルを変更、修正する。 流れとしては、 まず以下コマンドで現在のMigrationファイルの状態を調べる。 ターミナル $ rails db:migrate:status するとこのように表示される。 ターミナル database: my_portfolio3_development Status Migration ID Migration Name -------------------------------------------------- up 20210404083931 Devise create users up 20210404090003 Create articles up 20210404093852 Create comments もしカラムを間違えて作成してしまったり、カラムの追加が必要なときに、 upになっているMigrationファイルを単に編集してrails db:migrateをしただけでは、 正しく読み込まれない。 さらに、Migrationファイルの中身とデータベースの中身に差異が生じる危険もあるため、 やってはならない。 ではどういう流れでMigrationファイル変更すればいいのかと言いますと・・・、 「まず$ rails db:rollbackを実行してから」というのが答えになります！ ターミナル $ rails db:rollback ターミナル == 20210404093852 CreateComments: reverting =================================== -- drop_table(:comments) -> 0.0481s == 20210404093852 CreateComments: reverted (0.0550s) ========================== 実行後、現在のMigrationファイルの状態を以下コマンドで調べてみると・・・ ターミナル $ rails db:migrate:status ターミナル database: my_portfolio3_development Status Migration ID Migration Name -------------------------------------------------- up 20210404083931 Devise create users up 20210404090003 Create articles down 20210404093852 Create comments １個、downになっていますね！ このようにして、１個ずつrollbackしていきます。 私の場合、編集したかったのは「Create articles」だったのであと一回rollback。 ターミナル $ rails db:rollback ターミナル == 20210404090003 CreateArticles: reverting =================================== -- drop_table(:articles) -> 0.0373s == 20210404090003 CreateArticles: reverted (0.0417s) ========================== 実行後、現在のMigrationファイルの状態を以下コマンドで調べてみると・・・ ターミナル $ rails db:migrate:status ターミナル database: my_portfolio3_development Status Migration ID Migration Name -------------------------------------------------- up 20210404083931 Devise create users down 20210404090003 Create articles down 20210404093852 Create comments 「Create articles」もdownになりました！ あとは、単純にMigrationファイルを編集して、そのあとrails db:migrateを実行する。 実行までしたあと、念の為以下コマンドで確認してみると、 ターミナル $ rails db:migrate:status ターミナル database: my_portfolio3_development Status Migration ID Migration Name -------------------------------------------------- up 20210404083931 Devise create users up 20210404090003 Create articles up 20210404093852 Create comments ちゃんとまたupの状態に戻っていますね！ これで編集完了です！ rails sでサーバーを立ち上げてみると、ちゃんとエラーが解消されていました^^ 【参考記事】 https://pikawaka.com/rails/migration

結論 routes.rbでasオプションを使う。 get '/users/mypage', to: "users#show", as: :user_mypage #RESTではないがdevise_auth_tokenを用いる設計でidを使用せずuidを使用する関係でパスを独自に設定 こんな感じでasオプションを使うと api_v1_user_mypage GET /api/v1/users/mypage(.:format) api/v1/users#show のようにprefixが設定される。 今回のケースだとasオプションがない場合 api_v1_users_mypage GET /api/v1/users/mypage(.:format) api/v1/users#show のようにパスが設定されてしまっていた。 ※user_mypageがusers_mypageになってしまい、RESTな設計をした際のshowアクションのprefixと合わない。通常showアクションはURLは複数形、prefixは単数形になる。 どんないいことがあるの？ RESTじゃない設計を意図的にしたい場合などに使える。 もちろんRESTな設計にするに越したことはないけど。 今回React × Rails SPAを作成するにあたり、uidというdevise_auth_token専用の識別子を使っている。 理由はidだとただの数字なのでセキュリティ的に問題がありそう、という懸念から。 RESTな設計をする場合マイページのURLはuser/:idのようになるはずだけどこのidをフロントエンドで扱うのが ちょっとめんどくさかった。そして当然ながらuidをURLに含めるのは難しいので、 どうしてもusers/mypageみたいなパスにせざるを得なかった。 なので独自にルーティングを組んだんだけど、prefixがわがままでshowアクションなのにusers_mypage_pathと複数形になったので変えたくなった。 そもそもRESTな設計にしていればこんなことにはならなかったはず…なんですが いざというときにはこういうこともできるので知っといてよかったと思う。

はじめに

タイトルの通り、CircleCIでデプロイまでしようとしたところ、SSH周りのエラーに苦戦しました。
その前段である自動テストまではスムーズだったのですが。。
調べてもなかなか同様のケースが見つからなかったため、記事として残しておきたいと思います。

なお、基本的な導入手順については、下記の記事を参考にさせていただきました。

環境

・macOS Catalina
・Ruby:2.6.5
・Rails:6.0.3
・MySQL:5.6

エラー内容

前述の記事を参考にサクサク実装を進めていたところ、Capistrano deployの箇所で

CicleCIコンソール

SSHKit::Runner::ExecuteError: Exception while executing as ********@************
Caused by:
Net::SSH::AuthenticationFailed: Authentication failed for user ********@************

というエラーが出ました。
内容からしてSSH接続がうまく行っていないのだろうということがわかりました。

確認したこと（仮説）

1.CircleCIに追加するSSHに誤りがある？

ローカルで下記コマンドを叩くと正常にデプロイできるため、CircleCI側の設定が怪しい。

% bundle exec cap production deploy

→間違いは見当たらず。

2.Return job with SSH

Return job with SSHでCircleCIに入り、設定されている鍵を確認しました。
→'~/.ssh/id_rsa_fingerprintの値'となっている。

deployに使用する鍵はpemファイルを指定していたため、ここが怪しいかもと思いました。

なので、

deploy.rb

set :ssh_options, auth_methods: ['publickey'],
                              keys: ['~/.ssh/****.pem'] 

これを

deploy.rb

set :ssh_options, auth_methods: ['publickey'],
                              keys: ['~/.ssh/id_rsa_fingerprintの値'] 

こうしてみました。
そして、再度CircleCIを動かしたところ、無事にデプロイが成功しました！

エラー内容（第二弾）

上記で解決したと思い喜んでいたのですが、今度はローカルからのデプロイができなくなりました。

SSHKit::Runner::ExecuteError: Exception while executing as ec2-user@**.***.**.**: Authentication failed for user ec2-user@**.***.**.**
Caused by:
Net::SSH::AuthenticationFailed: Authentication failed for user ec2-user@**.***.**.**

ここで数日間悩みました。

結論

deploy.rbファイルの

set :ssh_options, auth_methods: ['publickey'],
                              keys: ['~/.ssh/〜〜']

の箇所を削除し、configファイルに記載することで解決しました。

Host **.***.**.**
    User ec2-user
    IdentityFile ~/.ssh/***.pem
    TCPKeepAlive yes
    IdentitiesOnly yes

参考

・【circleCI】rails5.2/Capistrano/CICD環境によるAWSへの自動デプロイ
・CircleCI に SSH 鍵を登録する
・.ssh/configファイルでSSH接続を管理する

はじめに

タイトルの通り、CircleCIでデプロイまでしようとしたところ、SSH周りのエラーに苦戦しました。
その前段である自動テストまではスムーズだったのですが。。
調べてもなかなか同様のケースが見つからなかったため、記事として残しておきたいと思います。

なお、基本的な導入手順については、下記の記事を参考にさせていただきました。

環境

・macOS Catalina
・Ruby:2.6.5
・Rails:6.0.3
・MySQL:5.6

エラー内容

前述の記事を参考にサクサク実装を進めていたところ、Capistrano deployの箇所で

CicleCIコンソール

SSHKit::Runner::ExecuteError: Exception while executing as ********@************
Caused by:
Net::SSH::AuthenticationFailed: Authentication failed for user ********@************

というエラーが出ました。
内容からしてSSH接続がうまくいっていないのだろうということがわかりました。

確認したこと（仮説）

1.CircleCIに追加するSSHに誤りがある？

ローカルで、

% bundle exec cap production deploy

上記コマンドを叩くと正常にデプロイできるため、CircleCI側の設定が怪しいなと思いました。

→間違いは見当たらず。

2.Return job with SSH

Return job with SSHでCircleCIに入り、設定されている鍵を確認しました。
→'~/.ssh/id_rsa_fingerprintの値'となっている。

deployに使用する鍵はpemファイルを指定していたため、ここが怪しいかもと思いました。

なので、

deploy.rb

set :ssh_options, auth_methods: ['publickey'],
                              keys: ['~/.ssh/****.pem'] 

これを

deploy.rb

set :ssh_options, auth_methods: ['publickey'],
                              keys: ['~/.ssh/id_rsa_fingerprintの値'] 

こうしてみました。
そして、再度CircleCIを動かしたところ、無事にデプロイが成功しました！

エラー内容（第二弾）

上記で解決したと思い喜んでいたのですが、今度はローカルからのデプロイができなくなりました。

SSHKit::Runner::ExecuteError: Exception while executing as ec2-user@**.***.**.**: Authentication failed for user ec2-user@**.***.**.**
Caused by:
Net::SSH::AuthenticationFailed: Authentication failed for user ec2-user@**.***.**.**

ここで数日間悩みました。

結論

deploy.rbファイルの

deploy.rb

set :ssh_options, auth_methods: ['publickey'],
                              keys: ['~/.ssh/〜〜']

の箇所を削除し、configファイルに記載することで解決しました。

.ssh/config

Host **.***.**.**
    User ec2-user
    IdentityFile ~/.ssh/***.pem
    TCPKeepAlive yes
    IdentitiesOnly yes

参考

・【circleCI】rails5.2/Capistrano/CICD環境によるAWSへの自動デプロイ
・CircleCI に SSH 鍵を登録する
・.ssh/configファイルでSSH接続を管理する

エラー名とエラーメッセージとバックトレースをしっかりと読む

1なんのエラーか？(エラー名確認）
2なぜこのエラーでたか(エラーメッセージ確認）
3バックトレース読む(どこで起きたのかを確認)

ex)
NameError (uninitialized constant UsersController::Use)
app/controllers/users_controller.rb:16:in 'new'
1) name error
2 )uninitialized constant UsersController::Use
3) app/controllers/users_controller.rb:16:in 'new'

原因を細かく特定

前提：
バックトレースのみでは特定できない場合。エラーは出てないが期待通り動作してない場合。が必ず存在する。

姿勢:
原因を突き止めるために、プログラムの実行される順番や変数の中身を細かく見て、どこまで期待通りに動いているかを確認する。

方法:
1)byebugを入れて　require 'byebug';byebug　で特定する
2)putsやコメントアウトでどこが原因かを特定する

その他の方法

１:公式ドキュメントを読む
自分の使い方が間違っている場合がある

２issueを検索する
注意点として
・意味を理解して使う
・自分の状況で行っても問題ないか確かめて使う

NoMethodError

意味:
存在しないメソッドを呼び出している。

原因：
1)呼び出し時、定義時のメソッド打ち間違え。そもそも定義されていない
2)レシーバー（メソッドを呼び出したオブジェクト)がnil。（変数名のうち間違えでもおこる）

ArgumentError

意味:
argument(引数）にエラーがある

原因:
渡した引数がnilである。

　　

なぜローカル化する必要があるのか

従来のやり方: capistrano-rails

capistrano公式が公開しているcapistrano-rails (gem)にはassets:precompileを各Webサーバーで実行するタスクが備わっている。gemを入れた後でCapfile内でrequire 'capistrano/rails'もしくはrequire 'capistrano/rails/assets'とすると、deploy:assets:precompileというタスクが生えてきてこの機能が使える。
しかし各Webサーバでコンパイルを実行するということは、Webサーバーにコンパイル処理を行うだけのスペックが求められることを意味する。

webpacker (webpack) メモリ食い過ぎ問題

Rails 6からはwebpackerが同梱されている。Rails 5以前からアップデートを行っている方々の中にはsprocketsとwebpackerを共存させている方もいるだろう。共存させている場合、生のwebpackではなくgemのwebpackerを利用しているのであれば、assets:precompileでsprocketsとwebpacker両方のビルドが実行されるはずである。

そのwebpackerが内部で使用するwebpackは、場合によってはべらぼうにメモリを食う。リッチなフロントエンドを実現するためのJSが増えれば増えるほど、使用メモリは増大する。さらにRollbarやbugsnagのようなエラー検知サービスなどで、圧縮(minify)済みのJSのコードから「どこでJSのエラーが発生したのか」を検知するためにはsource mapをアップロードする必要に迫られることもある。そのためにsource mapを出力しようとするとwebpackは更にメモリを食う。

Webサーバーの増強をすることでメモリ足りない問題は一応回避可能であるが、その分だけお金がかかる。普段のアクセス負荷はそこまででもないのにデプロイの時のためだけにサーバースペックを大幅に上げざるを得ないのはあまりに勿体ないので、assets:precompileをWebサーバー外で行うことで、この問題を回避できる。

もちろんwebpackerのビルドでメモリを軽減するためにSplitChunksPluginを有効化したりTree Shakingが効いているかを確認したりしてwebpackのビルド負荷そのものを下げる対策も必要であるが、この記事ではそこには触れない。

バージョン

• capistrano (3.15.0)

この記事の前提

• sprocketsとwebpackerが共存しており、assets:precompileを実行すると両方のビルドが走る環境である
• sprocketはpublic/assetsにファイルを書き出す
• webpackerはpublic/packsにファイルを書き出す
• capistranoを実行するマシンでtarコマンドが使える（大抵使えるはず）

手順

Capfileの編集

もし、Capfileにcapistrano/railsがあったら、まずは3つのタスクに分解する

Capfile

- require 'capistrano/rails'
+ require 'capistrano/bundler'
+ require 'capistrano/rails/assets'
+ require 'capistrano/rails/migrations'

deploy:assets:precompileを実現しているのは、capistrano/rails/assetsなので、これを消す。

Capfile

  require 'capistrano/bundler'
- require 'capistrano/rails/assets'
  require 'capistrano/rails/migrations'

タスクの定義

config/deploy.rbに追記する。大切なのはrun_locallyとon roles(:web)を適宜使い分けること。

config/deploy.rb

namespace :deploy do
  # ......
  # ...

  # 1. capistranoを実行したマシン側でコンパイルする
  task :compile_assets_locally do
    run_locally do
      with rails_env: fetch(:stage) do
        execute 'bundle exec rails assets:precompile'
      end
    end
  end

  # 2. webpackerとsprocketsで生成したファイルをそれぞれzipする
  task :zip_assets_locally do
    run_locally do
      execute 'tar -zcvf ./tmp/assets.tar.gz ./public/assets 1> /dev/null'
      execute 'tar -zcvf ./tmp/packs.tar.gz ./public/packs 1> /dev/null'
    end
  end

  # 3. zip後のファイルをupload!でWebサーバーに送り込む。
  task :send_assets_zip do
    on roles(:web) do |_host|
      upload!('./tmp/assets.tar.gz', "#{release_path}/public/")
      upload!('./tmp/packs.tar.gz', "#{release_path}/public/")
    end
  end

  # 4. Webサーバー内でunzipする
  task :unzip_assets do
    on roles(:web) do |_host|
      execute "cd #{release_path}; tar -zxvf #{release_path}/public/assets.tar.gz 1> /dev/null"
      execute "cd #{release_path}; tar -zxvf #{release_path}/public/packs.tar.gz 1> /dev/null"
    end
  end

  # ...
  # ......
end

# どのタイミングでタスクが呼ばれるのかを記述する。
before 'deploy:updated', 'deploy:compile_assets_locally'
before 'deploy:updated', 'deploy:zip_assets_locally'
before 'deploy:updated', 'deploy:send_assets_zip'
before 'deploy:updated', 'deploy:unzip_assets'

参考

• https://github.com/capistrano/rails
• https://qiita.com/ymiyamae/items/17035ffe9d3f5cf20ef0

こんばんは。

プログラミング初学者です。
現在、Ruby on Rails + Docker + MySQLでアプリの開発をしています。
そこであるエラーにハマり、数日奮闘した結果ようやく解消できたのでそのことをまとめました。

発生したエラー

バイクのレビュー投稿アプリ（名前はBIKKE）を作成しており、そのレビューの投稿画面実装のためコントローラーを下記のように記載

bikkes_controller.rb

class BikkesController < ApplicationController
  def index
    @user = User.new
  end

  def new
    @bikke = Bikke.new
  end
end

そして新規投稿画面に遷移すると、

NoMethodError!!!!!!しかもnewメソッドが！！？？

なぜ！？モデルやマイグレーションファイルの記載に間違いはなし。

まさかnewメソッドがエラーとして返されるとは、その時想像もしておりませんでした。

解消

エラー画面を見てみると、下記文面が記載されています。

undefined method 'new' for Bikke:Module

このModuleがミソですね。

つまり、このBikkeというオブジェクトがクラスではなくメソッドとして認識されている、ということを表しています。
どこかにmodule Bikkeやclass Bikke::Somethingと定義されていないか確認を行いました。
※この解はTeratailにて先人エンジニアさんに教えていただきました。本当に感謝です。

module Bikkeで検索をかけると、ありました。

config/application.rb

module Bikke
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.1

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")

    # Don't generate system test files.
    config.generators.system_tests = nil
  end
end

つまり、railsはrails newを行った時に、このapplication.rbでアプリ名をモジュールとして定義する仕様のようですね。

そうです。私はアプリ名とコントローラー・モデル名を同じ名前にしてしまったのです。

コントローラーやモデル名の再構築、その他ファイルの修正を行い、再度新規投稿画面に移行すると無事遷移することができました。

学び

本件では、Module Bikkeと認識されていたため、newメソッドを使えるclass Bikkeが見えなくなっていたことがエラーの原因であることがわかりました。

そもそもnewメソッドとは何か？
→ActiveRecordメソッドの一つ
→ActiveRecordメソッドとはモデルがテーブル操作に関して使用できるメソッドの総称である。

ここで、上記のコントローラーやモデルをReviewに変更したとしましょう。
rails cでコンソールを開き、下記コマンドを打ちます。

[1] pry(main)> Review.superclass
=> ApplicationRecord(abstract)

このReviewはApplicationRecordを継承していることがわかります。
さらに下記コマンドを打ち込みます。

[2] pry(main)> ApplicationRecord.superclass
=> ActiveRecord::Base

つまりReviewはしっかりActiveRecord::Baseを継承しているからnewメソッド、そしてallメソッドやfindメソッド,saveメソッドなどが使えるのですね。

ちなみに

[3] pry(main)> Bikke.superclass
NoMethodError: undefined method `superclass' for Bikke:Module

アプリ名はしっかりモジュールと定義されているため、superclassメソッドも使えないのですね。
そして、

[4] pry(main)> Module.superclass
=> Object

モジュールはオブジェクトを継承している・・・っ！

では、モジュールとクラスの違いは何なのでしょうか？

端的にいうと、

クラスはインスタンスの生成ができるのに対し、モジュールではできない。そしてクラスは継承していけるが、モジュールでは継承ができない。

厳密にはMix-inによってモジュールの機能をクラスに提供、いわば継承のようなことはできるようですが・・・。

ふんわりとした表現ですが、本件ではモジュールとクラスで継承しているものが独立しているため、使えるメソッドの違いがあり、エラーの発生に繋がったのだと考えます。
この辺はRubyの真髄でもあるのでより深ぼって理解を深めたいところですね。

兎にも角にも一度作ったコントローラーやモデルの再構築は、ER図やREADMEの変更、その他ビューファイルの調整などあらゆる部分の編集に手間がかかって疲れた・・・。
しかし、非常に良い学びとなりました。

ここまでご覧いただきありがとうございました。

Webpackerでの画像表示ができない 開発環境は * Rails 6.0.3 * Ruby 2.7 * Webpacker 4.0 RailsのCSS,Javascript管理について Railsはバージョン5以前はSprocketsライブラリを使ってアセットパイプラインで(app/assetsフォルダで)CSSやJavascript、Imageを管理していたがバージョン6以後はWebpackerで(app/javascriptフォルダで)管理するようになった。 Rails newをした後、デフォルトでWebpackerが搭載されていてyarnでjqueryやbootstrapをインストールし、environment.jsにも設定を書いていざ画像を読み込む際にエラーがいくつも出てきてしまったのでここに殴り書きする。 エラー①CSS（bootstrap）が読み込めない 上記の手順ではまだbootstrapは読み込まない。webpackerを利用する際はbin/webpck-dev-serverコマンドを実行する必要がある。これはwebpackerでcssやjavascriptファイルのコンパイルを行いサーバーを起動するというもの。このコマンドとrails sの両方を実行する必要がある。 エラー②画像が読み込めない rails6ではデフォルトでwebpackerの利用を推奨しているが、画像の読み込みをする際はapp/javascript/packsフォルダにあるapplication.js内のconst images = ....の部分のコメントアウトを外さなければならない。