AWSでCSSが反映されなくなった!
連休中ほとんど勉強してなかったですが、気を取り直して就活と勉強を再開しました。
オリジナルアプリの本番環境ではまだ何もアップしていなくてまっさらな状態だったのでログインして作品登録しようと思ったら、あれ?ログインボタンがない
VS Codeを確認。問題はなさそう。renderを確認。
あ!テーブル要素を追加してフォームを表形式に変更したところからずっとデプロイを失敗してる!!
なんてっこった…
改善するために参考にFurimaを見に行くと…あれ!?画像がリンク切れになってる!と思ったらよく見たらcssが反映されてない!
なぜだー!!ローカル環境で確認するとローカルは正常通りok
Chat-GPTに聞いてみると、
いくつか教えてくれてまずパスの確認する。いろいろパスや書き方を試したがダメ。webでも検索して似た状況のブログを発見。同じように確認するもダメ。
そして思い出した。
デプロイした当初はちゃんとcssも反映されてた。ということはおそらくコードやデプロイの仕方は問題ないかと。
そしてChat-GPTの質問の仕方を変えてみる。
①キャッシュの削除、②cssのURLが変更された、③awsのWEBサーバー上でcssが削除された可能性
との事。まず①キャッシュの削除をするがダメ。②はローカルでは正常に表示できているので良いはず。③はイジってないはずなんだけど…
そこでまたWEBで検索。先ほどとは別のブログを参考に確認してみる。
検証ツールで見てみるとほとんどのcssが出てきていない。実際のビューと同じ感じ。
でもdisply: blockとかtext-alignとかは出てきてる。全くcssが効いてないわけじゃない様子。
結局、今日は解決ならず…
あとオリアプのデプロイも…。
最終課題LGTMいただきました!!
メルカリのようなフリマアプリを作る最終課題が無事に終わり要件定義書と説明文提出して、とりあえずTECH CAMP 卒業確定しました!
発展の実装課題からメンターさんへの質問はあまりできなくなったけどそれでも最終課題を終えられたのはチームメイトのみなさんのおかげです!ありがとうございました!!
そして、さあオリジナルアプリ!と、なる前に難関だと噂のAWSがあります💦
フリマアプリをAWSにデプロイしなければいけません
とりあえずS3は終わって、今はAWSにデプロイする準備をしている所なのですがこのエラーで止まってます。
はて、どうすればいいか。エラー文から察するにダブってるよ!と言っているのかな。でもカリキュラムにはこう入力するように書いてあるんですが...
違うところで言うと上の2つが元々あってその下に2つ追加したことくらいか。
今日は土曜日でチームメイトは勉強してないのか聞けないし、メンターさんは14時まで使えないしとりあえずオリジナルアプリのエンティティーやER図を考えようかな
テストコード2回目
今日はテストコードの復習です。
そして今日もエラーが
エラー①binding.pryをコードの中に入れると処理が止まってターミナル上でコンソール が起動されると思うのですが起動されずこのエラー
カリキュラムを見直したりwebで検索して試行錯誤するものの解決せず。
午前中でメンターさん使えない時間だったので飛ばして進めていたらそのうちまた違うエラーが出ました
user_spec.rb:48: syntax errorとなっているのでまたendの数があってないとかかな?とuser_specの48行目を確認するが問題ないよう
メンターさん使える時間になったので早速質問。
まずエラー①binding.pryはGemをインストールしましたか?と聞かれ、、うーん危うい。
テストコード2回目なので途中から始めたせいで導入が虫食いのようになってるのでしょうか?
メンターさんの予想通りGemがありませんでした
binding.pryを使いたい時はGemfileに gem 'pry-rails' と記述すること これ大事
そしてエラー②
user_specの48行目は問題ありませんでした。問題があったのは28行目。endの消し忘れであろう余分なendが一つありました
エラー文のDo you mean? ○○とか今回のuser_spec.rb:48: syntax errorこのあたり大丈夫?とかこのヒントすごくありがたい。これで解決できることもいっぱいあるけどちょっと誤差あったりすることもあるし信じすぎちゃいけないな。これで解決できなければ幅広く見なきゃいけないな。と思いました笑
発展カリキュラム JavaScriptに突入しました
無事に応用カリキュラムが終わり発展カリキュラムに入りました!
そしてJavaScript登場です!新しい言語なのでどんどん新しいことが出てきていて頭に入ってきにくいものもたくさんありますが、より普段触れているWebアプリに近づいているので難しいながらも何をやろうとしているのかがわかるのでその点は面白いなと思います
それから先日のプロトレでアプリの装飾をしようというところに入りその時にちょっとワクワクしました!あと、JavaScript特徴なんかを学んだ時もワクワクしました!
そして…もしかして装飾とか好きなのかな?フロントエンジニアがいいのかな?なんてふと思いました
プログラミングノートを作る
テックキャンプのプロトレ応用でrailsでのアプリ作成のプログラミングノートを作りましょうというプロトレがありました
そこで早速ノートを作ってそれを元にアプリを作っていったのですがこのエラーが↓
そこで見本のコードをコピペしたり色々して解決したけどまた他のエラーが出たりでもうどこを直せばいいのか訳が分からなくなってしまい、また一から作り直してもやはりこのエラーが…。ということを午前のプロトレの時間は3日くらい悶々と考え、ルーティング、モデル、コントローラー、ビューと全部見本のコードと見比べていたのですがふと、HTMLの基礎の時にたまに使っていたクリップボードで比較をしてみたらコントローラーの@postsのsが抜けていて@postになっていました!!
クリップボード大事だなぁと改めて実感しました
その後無事に作ったプログラミングノートをもとにアプリが作れました
作ったプログラミングノートはこちらです。