20210219_アウトプット(AWSでJavaScriptの画像反映できた!!・README作成)

アウトプット画像

2/19行ったこと 3時間

  • やっとAWSJavaScript画像反映されない問題解決できた😭♡...2時間30分

  • READMEの作成... 30分 👉1割くらい進んだ。

  • デブサミ(別記事にする)



新しい発見

ついにできたAWSの画像エラー解消

teratail.com

上記内にも書いたが、以下の方法で解決できた!!

(1)JavaScriptで使う画像たちのみ、public配下へ移動  
(2)JavaScriptのファイルや、それを表示されているビューのパスを
   <img src="/sad.png" alt="落ち込んでいる画像">とパスを変更。
(3)AWSにおいて、bundle exec cap production deployだけだと上手くいかなかった
(4)EC2インスタンスに移動 ps aux | grep unicornを確認したら以前のプロセス立ち上がったままだったため全てkill
(5)EC2インスタンスのままエンジンエックスとマリアDBの再読み込み。

   [ec2-user@ip-111 ~]$ sudo systemctl restart mariadb  
   [ec2-user@ip-111 ~]$ sudo systemctl restart nginx  

嬉しい〜!!!(;ω;)

↓反映できた!!(アイコン映った!!!) 反映できた画像

そしてassets/imagespublic両方に画像を置く方法の「意味」がやっと理解できたのが大きい収穫だった!!!



それぞれの意味

●「assets/images」→アセットがプリコンパイルされてブラウザ上に反映される
●「public」→そのまま反映される
Railsでよく使うイメージタグは、Railsのヘルパーメソッドの力で上手く反映されていたこと
JavaScriptのファンクションにおいてはそれを変換させるまでの力はなく、今回エラーになってしまっていたこと

配下 起こること その影響
assets/images アセットパイプラインの配下となる 縮小して連結し再配置される仕組みなので、ブラウザへの速度が早まったり、バージョン対応がスムーズ
public アセットパイプラインの対象外 上記の恩恵は受けられない。同じ名前で違うデータに差し替えた際、キャッシュが残り古い画像データが表示される可能性があるので注意する



自分なりにそういう意味だったのか!と噛み砕いた意味

もし間違えていましたら、ご指摘いただけると嬉しいです。


アセットのプリコンパイルについて、イメージで言うと、引っ越し屋さんである。

荷物をそのまま運ぼうとすると、時間もかかるしトラックに入らなくなってしまうが、段ボールに梱包して、「引っ越し後すぐ使うもの!!」みたいにマーカー引くと優先順位がわかり、引っ越し先ですぐ使える&荷物も運べるようになるイメージ。
段ボールにコンパクトにきちんとまとめることによって、AとBの荷物うち、Aは北海道、Bは沖縄へ運んでくださいというような急な変更対応にも適用しやすくなる。

それに比べてパブリック配下は、剥き出しの椅子そのまま運ぶイメージ。

なお、上記らの「運ぶ」と言うイメージは、データを運ぶと言う意味でなく、ブラウザに描写するための作業のように捉えている。



配置先について、一般的には自分のアプリケーション上の画像などはassetsに配置し、なるべくコンパクトにさせる。
お客さんが入力するデータはpublic(AWSを使うと、それがS3に置き換わる)に置くのが一般的。

以上です。

これによってサインアウト後を設計できることを知った(devise)

github.com

感想

  • テラテイル、時間を割いて知恵をいただけることって本当にありがたい。

  • また自分が他の質問見ていて「これ一緒の悩み!」と思っても解決方法が結果わからず解決できないことがあった。なので最近教えてもらって解決できたときは、回答において解決できた方法を具体的に書くようにしている😂他の人もこの質疑応答のやりとりで、エラーの苦しみから解き放たれる人がいいなと思っている。

  • あとはリードミーとレスポンシブ対応だなあ。

  • デブサミ楽しかった。別記事、書き途中☺️

  • Notionで実現できることと、今作っているオリジナルアプリで実現しようとしていたことがとても似ていた😭💦

  • 他のツールで解決できたのかもしれないという思いもあるけれど、小さな習慣が大きな自己成長を遂げる本質的な部分を解決したいという思いがレイさんと一緒だったことが嬉しく思った。

  • 全然感想とは関係ないけれど、Official髭男dismのパラボラという曲が大好き。エンジニアになろうと決意したときの気持ちを思い出すため。今日のデブサミの話を聞いていて、知らず知らずのうちにエンジニアになりたいという”願い”が”決意”に変わった頃のことを思い出した。

  • 今日でやっと実現したかった基本実装のデプロイまでできたよー!!😭♡

  • 思いを形にできるって楽しい。プログラミングには仕組みで解決できる魅力に溢れていて、自己成長の可能性が無限大。エンジニアはやっぱり魅力的だなあと感じる。