AWSにデプロイしたがJSが効かない問題解決！
１、環境
- Ruby 2.3.8
- Rails 5.2.2
- Mysql 5.7
AWSの環境
となっています。
２、前提
ローカル環境では今回デプロイしたアプリが問題なく動きます。本番環境でのみ不具合が生じています。
なお、コードは見易さの点からローカル環境のコードを表示していますが、本番環境のコードと同じです。
実行したコマンド
・Rubyをインストール
- sudo yum remove –y ruby*
- sudo yum install –y ruby23 ruby23–devel
・Rails、bundleのインストール
- sudo yum –y install gcc–c++ patch openssl–devel readline readline–devel libyaml–devel zlib zlib–devel libffi–devel make bzip2 autoconf automake libtool bison iconv–devel ImageMagick ImageMagick–devel libcurl–devel httpd–devel apr–devel apr–util–devel git sqlite–devel mysql–deve
- curl —silent —location https://rpm.nodesource.com/setup_6.x | sudo bash –
- sudo yum install –y nodejs
- sudo gem install bundler
- sudo gem install rails
・Passengerを設定
- sudo gem install –v 5.1.12 passenger
- sudo /usr/local/bin/passenger–install–apache2–module
次に、/etc/httpd/conf/httpd.confを編集する
- LoadModule passenger_module /usr/local/share/ruby/gems/2.3/gems/passenger–5.1.12/buildout/apache2/mod_passenger.so
- <IfModule mod_passenger.c>
- PassengerRoot /usr/local/share/ruby/gems/2.3/gems/passenger–5.1.12
- PassengerDefaultRuby /usr/bin/ruby2.3
- </IfModule>
以上の５行を追加する。
sudo service httpd restart
３、エラーの特定
本番環境でデプロイしたものは削除機能、ログアウトが出来ないと状態です。
削除をクリックすると、詳細画面に遷移し、ログアウトをクリックすると以下の画面に遷移し、エラーと表示されます。
ここで、ログを確認したところ、
No route matches[Get] “session”と出たので、とりあえず、config/routes.rbを確認するが問題ないと思われる。
以上のように定義しています。
ここで、routes.rbは関係ないと考え、別の可能性を検討する。
No route matches[Get] “session”をキーワードに検索すると、以下の可能性が出てきた。
https://qiita.com/hiroki5123/items/f5df892ff85afea51b8c
https://stackoverflow.com/questions/23368994/no-route-matches-get-logout-rails
簡単に要約すると、RailsでGET以外のHTTPメソッドを指定しているのにGETになってしまう辺りではないかと辺りをつける。
コラム（PUT/DELETEメソッドについて）
html5では、PUT/DELETEメソッドを採用していない。そのため、JavaScriptなどを使わずにブラウザからこれらのメソッドでアクセスすることができないケースが多々あるそうです。
（『パーフェクトRuby on Rails』 41ページ参照 ）
どうやら、ルートの設定の問題ではなく、jquery辺りがおかしいことが判明、この不具合とは別に、以下の部分にturbolinksを使っている部分なのに反映されていないことから結論づけました。
コードは以下の通りです。
どう問題なのかを調べると、以下の記事に行き着く。
これも簡単に要約すると、developmentとproductionで環境が違うということでした。それはなんとなくわかってはいたのですが、具体的に理解できました。
ただ、どう解決していいのかがわからず、現在に至っています。
・やった事
https://qiita.com/keiy121/items/d1880ff2d0de444458c7
上記のURLの内容を参考に、順番を変えてみたりしたのですが、上手くいかず…
その他、Railsのバージョンが違うものなども色々と試してみた事がどれも的が外れている気がするので割愛しています。
検証ツールで見ると、この部分がエラーとのこと…
JSの問題なら、app/views/layous/application.html.erbだと思い、コードを見るも何がおかしいのやら…
ただ、トップページとそれ以外のページで表示したい内容を分けるため、app/views/layous/second_layout.html.erbにも同様の記述をしているせいなのか…
４、追記
わからないなりに、ヒントを頂けたので、再度挑戦するも失敗する。
まず、アセットパイプラインの仕組みがわかっていなかったので、以下の記事で勉強する。
これで、デプロイする際の注意点がわかり修正する。
config/enviroments/production.rbを修正する
変えた点は以下の通り
①config.assets.js_compressor = :uglifier
⬇︎
config.assets.js_compressor = Uglifier.new(harmony: true)
上記に変更した理由は、bundle exec rake assets:precompile RAILS_ENV=productionを実行した結果
rails aborted!
Uglifier::Error: Unexpected token: keyword (const). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true)がと表示があったためです。
②config.assets.compile = false
⬇︎
config.assets.compile = true
①、②を元に
bundle exec rake assets:precompile RAILS_ENV=production
実行すると、以下のようなエラーが生じる
一体、どこのことを指しているのかがわからない状態に…
とりあえず、エラー文言：Uglifier::Error: Unexpected token: eof (undefined)を検索するも答えが見つからず、ここで停滞中…
5、解決策
無事に解決しました。結論を簡単に言うと、エラー文の『 eof 』意味がわかっていなかったと言うことでした。『eof』= End Of Fileの略だそうです。
つまり、コンピュータでファイルの終端を示す特殊なデータのこと。
そこで、JavaScriptの関連ファイルを一つづつ見ていくと、「})」が抜けている箇所が発見される！
ローカル環境では抜けていても問題なく動いていたので、全く検討していませんでした。また、すでに使っていないファイルでもあったため、全く見ていませんでした。
間違っているコード
正しいコード
この部分を修正して、bundle exec rake assets:precompile RAILS_ENV=productionをすると無事に解決しました！
６、なぜこのような失敗をしたか
①『eof』が略称であり、コンピュータでファイルの終端を示す特殊なデータのことを知らなかったこと。
②使用していないファイルを消すのを忘れていたこと。
③ローカルではJSファイルをまとめて圧縮する作業がないため、エラーになるはずのファイルを使っていなければ、読み込まれず、エラーにならないため、本番環境でのみ発覚する。
以上が根本的な原因でした。
７、今後の対策
①まず、エラー文言の略語が何を指し、どんな意味となるのかを吟味する。
➡︎Web系の語彙を理解する
②コードやファイルはしっかりリファクタリングする
➡︎可読性の高いコード、不要なファイルを消すといった作業を必ずやる。
③どのような仕組みで、デプロイやWebが行われているのかを知る。
➡︎今回なら、compileの仕組み。
コメントを残す