画像が表示されないからfogとかS3とか使う。
こんにちは、マリンです。
早速問題発生しました。
ポートフォリオの画像が、一瞬表示されるのに気づいたら消えてる！？
調べてみたら、Herokuは画像データを保存できないので、
クラウドストレージがマストだとのこと。
Rails Tutorialの13.4.4「本番環境での画像アップロード」ところです。
「上手くいかなかったらここ飛ばしちゃっていいよ〜👍」なんて書いてあったけど、
飛ばしたら全然ダメじゃん！！(えぇ。私は飛ばしましたとも。)
Heroku使って本番運用をお考えの方はサラッとでも見とくことをオススメします。
と言うことで、今更ながら13章を見直した話しです。
13.4.4 本番環境での画像アップロードです。 railstutorial.jp
fog
まずはfog gemから。Gemfileに追加して$bundle installです。
gem 'fog'
fogはRubyでクラウドサービスを使いやすくするためのGemです。
次に本番環境での画像ファイルの保存場所を変更します。
app/uploaders/○○_uploader.rbを変更します。
if Rails.env.production? storage :fog else storage :file end
論理値を返すproduction?メソッドで環境毎に保存先を変えられるようにします。
S3
S3はAWSのサービスの一つです。
＊長くなるのでセットアップについては別記事で書こうと思います。
S3のセットアップが終了してからの設定です。
1. config/initializersにcarrier_wave.rbファイルを作ります。
$touch config/initializers/carrier_wave.rb
2. CarrierWaveを通してS3を使う設定
if Rails.env.production? CarrierWave.configure do |config| config.fog_credentials = { # Amazon S3用の設定 :provider => 'AWS', :region => ENV['S3_REGION'], :aws_access_key_id => ENV['S3_ACCESS_KEY'], :aws_secret_access_key => ENV['S3_SECRET_KEY'] } config.fog_directory = ENV['S3_BUCKET'] end end
3. Herokuの環境変数を設定
AWSでIAMを作成した際のアクセスキー、シークレットキー、バケット名、レギオン(地域)を入力。
$ heroku config:set S3_ACCESS_KEY="Accessキーを入力" $ heroku config:set S3_SECRET_KEY="同様に、Secretキーを入力" $ heroku config:set S3_BUCKET="Bucketの名前を入力" $ heroku config:set S3_REGION="Regionの名前を入力"
4. .gitignoreを編集
ローカルの画像ファイルをGitの対象から外します。
. . . /public/uploads
5. デプロイします
$git add -A $git commit -m "hoge hoge" $git push $git push heroku $heroku run pg:reset DATABASE $heroku run rails db:migrate
データベースのリセットやサンプルデータがある場合などはご自身の環境に合わせて行ってください。
これで設定は完了です。
コケたところ
Herokuの環境変数についてよくわかっていなかったので、
REGIONの入力方法を間違えました。
さらにその間違えた変数を消去せずに正しいものを追加してしまったので、
ポートフォリオを全然追加できず、ハマってしまいました。
詳細
REGIONの値をS3の設定時に選択した「Asia pacific(Tokyo)」と入力。上記を削除することなく、追加で正規のリージョンを設定してしまう。
対処
1. 状況確認
まず全体的に意味がわからなかったので、とりあえず一覧表示させて状況を確認しました。
2. ダブり
上書きされてると勘違いしていたREGIONが正誤ダブっていることに気づいたので、
間違えた方を削除しました。
誤 -> Asia pacific(Tokyo)
正 -> ap-northeast-1
ちなみにS3でのRegionの表記についてはこちらに書かれています。
AWS のリージョンとエンドポイント - アマゾン ウェブ サービス
Herokuの環境変数について
- 環境変数の確認
一覧表示
$heroku config
変数名指定
$heroku config:get 環境変数名
- 環境変数の追加
$heroku config:set 環境変数名=値
- 環境変数の削除
$heroku config:unset 環境変数名
こちらのサイトを参考にさせていただきました。
まとめ
やはり一番大変だったのはAWS関係でした。
全く触ったことがない、名前しか知らないような状況でしたので・・・
今回行ったセットアップの方法については別記事で書こうと思います。
ここでは書かれていたことしかやっていないので氷山の一角だと思いますが、
かなり奥が深く、またとても便利なツールのようですね。
最近では結構必須な知識にもなっているようですし、
今までなんとなく避けていた分、これからきちんと勉強しようと思います。
追記
AWS系の方も記事書きましたのでよろしければどうぞ。
完成しました〜！！
いやぁ・・・長かったです。
たったこれだけのサイト作るのに1ヶ月かかってしまいましたorz
しかもほとんどtutorialパクっただけなのに・・・
しかし何はともあれ、無事完成し、デプロイも完了しました！
まだまだ改良の余地が満載なので、
今後少しずつでもよくしていこうと思います。
てか、仮でつけてた名前そのままであげちゃった・・・w
さて・・・次はアプリ作成に挑んでみようか？
挫折・・・
管理用サイトを作ってからず〜〜〜〜〜〜っとDBの共有化を試みておりましたが・・・
挫折しましたorz
とはいえ、せっかく調べたので、
その方法については記しておこうと思います。
その1：Githubとか使う。
こちらの回答に書かれていました。
途中まで試しましたが、「あれ？これってマイグレーションしないと反映されない？」と思ってやめました。
勘違いだったらすみません・・・
その2：Rails Engine
最初にその案を知ったのはこちらです。
「ちょ〜面白そう！！」と思って勉強しました。
勉強するなら公式サイトですよね！
すっごく面白かったです。というか興味深かったです。
しかし、付け焼き刃でできるような代物ではありませんでした・・・
ですがこれはとても楽しそうだったので、ひと段落ついたらきちんと勉強してみようと思います。
現状
ここまででだいぶ時間をかけてしまったので、今回はここで挫折し、
おとなしく閲覧用と管理用を一つにまとめました。
そして今。一応の完成を見たので、Herokuを使って本番環境にうp！！
できない！！なぜ！？
というところでコケてます・・・
なかなか思い通りにはいかないものですね。
でもコケた中でも色々学べてるので、またそれはおいおい書き綴っていこうと思います。
管理用サイト完成！
ちょっと空いてしまいましたが、
管理用サイトが完成しました。
構成
Log_in
Profiel
Work
- Index
- Show
- Edit
- Show
- Create
- Index
Contact
- Index
- Show
- Index
Log_out
最初はこんな感じ。
ログインをしたらメニューが表示される仕様です。
あ。ログインしたのにアイキャッチの画像変更するの忘れてました・・・
投稿フォームはこんな感じ。
自分しか使わないのでかなり雑です・・・
でも今後の技術向上も含めて少しずつ綺麗にしていければと思っています。
今後
この後はいよいよ閲覧用と管理用のデータベースを共有できるようにします。
ここから先は完全にチュートリアルになかったことなので、
ちゃんとできるかかなり不安ですが・・・
グーグル先生に助けてもらいながら一つずつやっていこうと思います。
テストはきちんと工程を考えましょう・・・
こんにちは、マリンです。
現在は管理用サイトのポートフォリオ編集機能を実装中です。
ここまででテストがいまいちうまくいかなくてハマりました。
ハマった点
ポートフォリオの投稿と編集をそれぞれ失敗ver.と成功ver.でテストするが、
データ送信後の画面遷移がうまくいかない。
原因
テストにログインの工程を入れていなかったことが原因でした。
テストの流れとしては
ログイン用のパスを開く
ログインする
ログイン中であることを確認
投稿用のパスを開く
データ送信
成功なら詳細ページにリダイレクト、失敗のときは投稿ページを再描画。
本当はもう少し細かいですが、ざっくりこの流れなのです。
しかし1〜3を書いていなかったのですね。
リダイレクトのときに出たメッセージで気づきました。
Expected response to be a redirect to <http://www.example.com/works/775365376> but was a redirect to <http://www.example.com/login>.
renderで再描画するだけだと
expecting <"works/edit"> but rendering with <[]>
と出てくるだけなので
「え？何？」と全く理解できなかったのですが、
URL出てきたおかげでやっと解決しました・・・
まとめ
ログインで使える機能をきちんと明示したりすればもっと
早く気づいたかもなんですが・・・
なんせずくなし（←長野の方言）なので
「ま、ログインしなきゃ何もかも見られないようにしちゃえばいいや！私しか使わないしw」
なんてログイン＝メニュー表示にしたせいで見落としたんですね・・・
テストを書くときにはきちんと一連の流れを考えて書かなきゃダメですね。
そしてコンピューターには1から10まで事細かに指示しなきゃいけない！
ってことも忘れてました・・・笑
Bootstrapで画像をレスポンシブ対応にする。
こんにちは、マリンです。
閲覧用サイトもそろそろ完成です。
今微調整を行っているところですが、
今回はBootstrapを使って詳細ページの画像を
レスポンシブ対応にしました。
やりたかったこと
画面を小さくしても画像がはみ出ないようにしたい。
現状ではその他の要素はレスポンシブに代わってくれていましたが、
画像だけがはみ出たままだったので、
画面サイズに合わせてきちんと全体が見えるようにしたかったのです。
方法
タイトルの通り、Bootstrapさんにチャチャっとやっていただきました。
Bootstrap
まずはアプリケーションでBootstrapが使えるようにします。
1.Gemインストール
gem 'bootstrap-sass'
Gemfileに上記を記入して$bundle installです。
2.スタイルシートにinclude
私はチュートリアルの時同様にcustom.scssを作ってそこに書きました。
@import "bootstrap-sprockets"; @import "bootstrap"; . . .
設定はここまで。あとは普通に使えます。
画像をレスポンシブにする
1.対象の画像にimg_responsive
<%= image_tag(@work.image.url, class: "img-responsive") %>
私の場合はポートフォリオの画像だったのでこのようになりました。
これで終わり。なんともお手軽です！
素晴らしすぎる！Bootstrap!!
gem 'rails-controller-testing'
こんにちは、マリンです。
Rails Tutorialの時こんなの入れたっけ？
と覚えがないのですが・・・
今回Contactページのintegration_testでひっかかったのでメモっときます。
ハマった点
問い合わせの内容に不備があった場合、
renderでもう一度投稿ページが表示されるか確認するテスト。
この実装に`assert_template'を使ったら、
NoMethodError: assert_template has been extracted to a gem. To continue using it,
add `gem 'rails-controller-testing'` to your Gemfile.
とエラーが出た。
対策
書かれてる通りですが、
gem 'rails-controller-testing'をインストールしました。
補足
Rails5から一部のメソッドを使うのに必要になったそうです。
どれに必要かは詳しく調べていませんが、
assert assert_not assert_select assert_response
なんかはなくても大丈夫でした。
今の所分かってるのは、
assert_template assigns
はないとダメみたいですね。
