Heroku 上全新 Rails 5.2.1 应用程序中的 Javascript 无法正常工作

Question

我认为在 Heroku 的生产环境中 Rails 5 应用程序中的 JavaScript 文件存在很大问题。但它在本地工作

我的配置：

Windows:   10 Education
Rails:     5.2.1
Ruby:      2.4.4p296
Heroku:    heroku/7.7.7 win32-x64 node-v10.7.0
postgres:  postgres (PostgreSQL) 10.3

我现在将向您展示我所做的步骤，以确认它不起作用，您可以自己尝试。最后，您将获得一个指向 bitbucket 存储库和 Heroku 上的应用程序的链接。

第 1 步：创建一个新的 Rails 5 应用并切换到根文件夹

> rails new my_app --database=postgresql
> cd my_app

第 2 步：生成控制器

> rails generate controller static_pages

第 3 步：编辑 /app/controllers/static_pages_controller 文件

class StaticPagesController < ApplicationController
  def show
  end

  def destroy
  end
end

第 4 步：创建视图以显示操作

/app/views/static_pages/show.html.erb：

this is the show view

here is a link to the delete action:

<%= link_to t('logout'), logout_path, method: :delete %>

/app/views/static_pages/destroy.html.erb：

this is the destroy view which is called with a link_to method: :delete

第 5 步：编辑 /config/routes.rb 文件

Rails.application.routes.draw do
  root 'static_pages#show'
  get 'static_pages/show'
  delete '/logout', to: 'static_pages#destroy'
end

第 6 步：检查路线

> rails routes
                   Prefix Verb   URI Pattern                                                                              Controller#Action
                     root GET    /                                                                                        staticpages#show
         staticpages_show GET    /staticpages/show(.:format)                                                              staticpages#show
                   logout DELETE /logout(.:format)                                                                        staticpages#destroy
       rails_service_blob GET    /rails/active_storage/blobs/:signed_id/*filename(.:format)                               active_storage/blobs#show
rails_blob_representation GET    /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
       rails_disk_service GET    /rails/active_storage/disk/:encoded_key/*filename(.:format)                              active_storage/disk#show
update_rails_disk_service PUT    /rails/active_storage/disk/:encoded_token(.:format)                                      active_storage/disk#update
     rails_direct_uploads POST   /rails/active_storage/direct_uploads(.:format)                                           active_storage/direct_uploads#create

第 7 步：创建数据库并迁移

> rails db:create
Created database 'my_app_development'
Created database 'my_app_test'

> rails db:migrate

第 8 步：启动服务器

> rails server

第 9 步：转到 localhost:3000/ 并单击显示的链接。该链接有效并向服务器发送删除操作

Started GET "/" for 127.0.0.1 at 2018-09-03 18:43:52 +0200
Processing by StaticPagesController#show as HTML
  Rendering static_pages/show.html.erb within layouts/application
  Rendered static_pages/show.html.erb within layouts/application (12.2ms)
Completed 200 OK in 504ms (Views: 486.7ms | ActiveRecord: 0.0ms)


Started DELETE "/logout" for 127.0.0.1 at 2018-09-03 18:43:57 +0200
Processing by StaticPagesController#destroy as HTML
  Parameters: {"authenticity_token"=>"10NHmV8N4tF3O0r/YYtKtKmHm3xthGjPAE51osb7L9skCM5ZoM2RoiCtZD4Crh9d69ndTOeNRMmIW28ipI/z9A=="}
  Rendering static_pages/destroy.html.erb within layouts/application
  Rendered static_pages/destroy.html.erb within layouts/application (0.0ms)
Completed 200 OK in 90ms (Views: 73.0ms | ActiveRecord: 0.0ms)

第 10 步：创建 heroku 应用（您必须在系统上登录 heroku）

> heroku create

第 11 步：将您的工作推送到 Heroku

> git add -A
> git commit -m "init"
> git push --set-upstream heroku master

第 12 步：打开您的 Heroku 应用并按照第 9 步执行操作，但由于 JavaScript 似乎无法正常工作而失败

(...) Started GET "/" for 84.147.254.28 at 2018-09-03 16:47:44 +0000
(...) Processing by StaticPagesController#show as HTML
(...)   Rendering static_pages/show.html.erb within layouts/application
(...)   Rendered static_pages/show.html.erb within layouts/application (9.2ms)
(...) Completed 200 OK in 27ms (Views: 13.7ms)
.
.
. 
(...) Started GET "/logout" for 84.147.254.28 at 2018-09-03 16:48:05 +0000
(...) ActionController::RoutingError (No route matches [GET] "/logout"):

这要么是 Rails 上的明显错误，要么是 Heroku 方面的一个明显错误，正如你所看到的，我所做的只是创建一个全新的 rails 应用程序并更改路由，生成一个控制器并为控制器操作创建 2 个视图。

如果您想查看应用程序的所有源以及部署到 heroku 的应用程序，请点击以下链接。

你可以在这里查看源代码：BitBucket Repo

这里的应用程序：Heroku app

有没有其他人在使用 Rails 和 Heroku 时遇到过这种困难，或者我可以做些什么来让它发挥作用？

编辑：通过删除不必要的日志信息和时间戳，使第 12 步的输出更加清晰

Answer 1

我解决了我的问题：是 uglifier gem 导致了问题，因为它无法正常工作。我只是一个初学者，回顾这个​​ gem 应该是我需要检查的第一件事，因为它是 JS 压缩。

现在 JS 运行良好。这是我在GemFile 中所做的更改以使其正常工作：

来自

gem 'uglifier', '>= 1.3.0'

到

gem 'uglifier', '~> 3.0.4'

uglifier gem 版本是4.1.18，导致生产环境出现这个 JS 错误。

希望这有助于其他人确定 Heroku 上的 JS 错误

Answer 2

问题在于duktape gem。这是一个在 Rails 世界中没有广泛使用的 Javascript 引擎，但默认包含在新的 Windows rails 安装中，因为它是在 Windows 中实际工作的唯一引擎之一。 （如果您现在还没有弄清楚，那么 Rails windows 开发人员并不多 :)）。

我不认为 Heroku 对它有很好的支持，所以当它使用那个引擎时，JS 会默默地编译失败​​。如果你查看生产环境中的application.js 文件，你会看到一堆NaN: "select[data-remote], input[data-remote], textarea[data-remote]", at the top, when you should see things like inputChangeSelector: "select[data-remote], input[data-remote], textarea[data-remote]"`。

如果您想让事情正常运行，请将 Duktape gem 从其当前位置移到 Gemfile 的 development 部分，捆绑并重新部署（您现在可以避免在主 Gemfile 中使用 JS 编译器。

我也会用 Heroku 开一张票。通常，它们会警告您此类常见配置问题，但是当我尝试部署您的应用程序时，我没有收到此类警告。我想只是还没有出现很多用户。