Q&A
本番環境のJavaScriptはどのようにデプロイしていますか？
実現したいこと
AWS本番環境でTOPページのloginリンクを開けるようにしたい。
前提
ローカル環境はamazonCloud９で、本番環境はEC2でWEBアプリを作っています。
Ruby on Rails チュートリアル(Rails5第4版)の第8章終わりまで来てデプロイしたところこのような状況になってしまいました。
https://railstutorial.jp/chapters/basic_login?version=5.1#cha-basic_login
チュートリアルもGitHubも初めての操作のため諸々理解が浅いです。
アドバイス頂ければ幸いです。
発生している問題・エラーメッセージ
ローカル環境ではTOPページのヘッダーにある「Log in」リンクをクリックすると/Loginページが開きますが、本番環境へデプロイするとページ遷移せずTOPページのまま動きません。
「Login」リンクの上にマウスオーバーすると、開発環境では「xxxxx.com/login」とリンク先がブラウザ左隅に表示され、クリックすると「xxxxx.com/login」というURLのページが開きますが、本番環境のLoginリンク上でマウスオーバーすると「xxxxx.com/#」となっていて、クリックするとＵＲＬはIPアドレス/#となります。
アドレスバーで直接「#」の部分を「login」に変えて開くとURLは/loginになりますがページ内容は下記に記載しますがエラー表記が出ます。
本番環境の/loginページ
Routing Error No route matches [GET] "/login" ------------------------------------ Routes Routes match in priority from top to bottom Helper HTTP Verb Path Controller#Action Path / Url Path Match root_path GET / static_pages#home help_path GET /help(.:format) static_pages#help about_path GET /about(.:format) static_pages#about contact_path GET /contact(.:format) static_pages#contact signup_path GET /signup(.:format) users#new POST /signup(.:format) users#create users_path GET /users(.:format) users#index POST /users(.:format) users#create new_user_path GET /users/new(.:format) users#new edit_user_path GET /users/:id/edit(.:format) users#edit user_path GET /users/:id(.:format) users#show PATCH /users/:id(.:format) users#update PUT /users/:id(.:format) users#update DELETE /users/:id(.:format) users#destroy
上記ページ内エラー内容を見ると下記3行が含まれていないように見えます。
そこでconfig/routes.rbファイルが更新されていないかと思いましたが、本番環境でも下記ルートは含まれていました。
該当のソースコード
login GET /login(.:format) sessions#new POST /login(.:format) sessions#create logout DELETE /logout(.:format) sessions#destroy
＜本番環境/config/routes.rb＞
Rails.application.routes.draw do root 'static_pages#home' get '/help', to: 'static_pages#help' get '/about', to: 'static_pages#about' get '/contact', to: 'static_pages#contact' get '/signup', to: 'users#new' get '/login', to: 'sessions#new' post '/login', to: 'sessions#create' delete '/logout', to: 'sessions#destroy' #memo resources :users end
ビューのファイルもローカルの内容が本番環境でも同じ内容でした。
＜/app/views/layouts/_header.html.erb＞ <header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <%= link_to "sample app", root_path, id: "logo" %> <nav> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", root_path %></li> <li><%= link_to "Help", help_path %></li> <% if logged_in? %> <li><%= link_to "Users", '#' %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><%= link_to "Profile", current_user %></li> <li><%= link_to "Settings", '#' %></li> <li class="divider"></li> <li> <%= link_to "Log out", logout_path, method: :delete %> </li> </ul> </li> <% else %> <li><%= link_to "Log in", login_path %></li> #memo <% end %> </ul> </nav> </div> </header>
試したこと
「rails routes」コマンドをローカル、本番で試しましたが同じ結果でした。
[ec2-user@ip-xxx-xx-x-xxx sample_app]$ rails routes Prefix Verb URI Pattern Controller#Action root GET / static_pages#home help GET /help(.:format) static_pages#help about GET /about(.:format) static_pages#about contact GET /contact(.:format) static_pages#contact signup GET /signup(.:format) users#new login GET /login(.:format) sessions#new POST /login(.:format) sessions#create logout DELETE /logout(.:format) sessions#destroy users GET /users(.:format) users#index POST /users(.:format) users#create new_user GET /users/new(.:format) users#new edit_user GET /users/:id/edit(.:format) users#edit user GET /users/:id(.:format) users#show PATCH /users/:id(.:format) users#update PUT /users/:id(.:format) users#update DELETE /users/:id(.:format) users#destroy
本番環境にファイルが更新されていないかと思い、関係ありそうなファイル内に「#memo」と入れてみたところ更新されていましたのでローカルから本番へ更新はされているようです。
補足情報（FW/ツールのバージョンなど）
＜開発環境＞
Chrome
＜本番環境＞
Chrome
Teraterm4.1
WinCSP
以上、よろしくお願い致します。
回答2件
0
文字数がオーバーして書ききれませんでしたが、javascriptと関係ありそうな
nodejs.x86_64 2:14.21.3-1nodesource @nodesource
というものはありました。
投稿2023/05/22 07:40
総合スコア0
0
ご回答頂きありがとうございます。
javascriptは意識していなかったのですが本番環境でインストールが必要ということでしょうか？
調べてみるとインストールの状況が確認できるコマンドがあったので掲載します。
よろしくお願い致します。
[ec2-user@ipxxx-2-31-4-114 sample_app]$ yum list installed Loaded plugins: extras_suggestions, langpacks, priorities, update-motd 56 packages excluded due to repository priority protections Installed Packages GeoIP.x86_64 1.5.0-11.amzn2.0.2 installed ImageMagick.x86_64 6.9.10.97-1.amzn2.0.1 @amzn2-core ImageMagick-devel.x86_64 6.9.10.97-1.amzn2.0.1 @amzn2-core LibRaw.x86_64 0.14.8-5.amzn2.20120830git98d925.1 @amzn2-core OpenEXR-libs.x86_64 1.7.1-8.amzn2.0.1 @amzn2-core PyYAML.x86_64 3.10-11.amzn2.0.2 installed acl.x86_64 2.2.51-14.amzn2 installed acpid.x86_64 2.0.19-9.amzn2.0.1 installed adobe-mappings-cmap.noarch 20171205-3.amzn2 @amzn2-core adobe-mappings-cmap-deprecated.noarch 20171205-3.amzn2 @amzn2-core adobe-mappings-pdf.noarch 20180407-1.amzn2 @amzn2-core amazon-linux-extras.noarch 2.0.1-1.amzn2 installed amazon-linux-extras-yum-plugin.noarch 2.0.1-1.amzn2 installed
投稿2023/05/22 07:38
総合スコア0
> javascriptは意識していなかったのですが本番環境でインストールが必要ということでしょうか？
サーバにインストールするか、あるいはプリコンパイルしてJavaScriptファイルを生成しておく（こちらがおすすめ）必要があります。
ご回答ありがとうございます。
本番環境にNode.jsのv16.20.0をインストールし、javascriptが実行できることを確認しました。
ですがやはりURLはxxxxx/#となっていてLoginリンクが開けない状態です。
＜参考にしたサイト＞
https://ymiyashitablog.com/aws-node-install/
https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/setting-up-node-on-ec2-instance.html
おすすめしていただいた「プリコンパイルしてJavaScriptファイルを生成しておく」をやってみたいのですが調べてみても手順をつかめていません。
どんな方法で進めれば良いか教えて頂けますでしょうか？
あなたの回答
tips
プレビュー
