部署Ruby on Rails全栈应用到Heroku后前端空白求助

问题描述 #

将基于Ruby on Rails、Node.js、React Redux的全栈应用部署到Heroku，部署流程完成且应用成功上线，但前端显示空白。本地曾出现过类似问题，原因是未运行webpack，但Heroku上webpack似乎运行正常。

package.json 配置 #

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "webpack": "webpack --watch",
  "start": "rails server",
  "postinstall": "webpack -p"
},

访问空白页面时的日志信息 #

2024-03-12T03:31:36.570040+00:00 app[web.1]: I, [2024-03-12T03:31:36.569942 #25]  INFO -- : [a108b8e4-c844-43c3-bc59-9805eff1a374] Started GET \"/\" for 174.116.115.144 at 2024-03-12 03:31:36 +0000
2024-03-12T03:31:36.570923+00:00 app[web.1]: I, [2024-03-12T03:31:36.570848 #25]  INFO -- : [a108b8e4-c844-43c3-bc59-9805eff1a374] Processing by StaticPagesController#root as HTML 
2024-03-12T03:31:36.571272+00:00 app[web.1]: D, [2024-03-12T03:31:36.571237 #25] DEBUG -- : [a108b8e4-c844-43c3-bc59-9805eff1a374]   Rendering layout layouts/application.html.erb 
2024-03-12T03:31:36.571315+00:00 app[web.1]: D, [2024-03-12T03:31:36.571297 #25] DEBUG -- : [a108b8e4-c844-43c3-bc59-9805eff1a374]   Rendering static_pages/root.html.erb within layouts/application 
2024-03-12T03:31:36.572873+00:00 app[web.1]: D, [2024-03-12T03:31:36.572816 #25] DEBUG -- : [a108b8e4-c844-43c3-bc59-9805eff1a374]   User Load (0.3ms)  SELECT \"users\".* FROM \"users\" WHERE \"users\".\"session_token\" IS NULL LIMIT $1  [[\"LIMIT\", 1]] 
2024-03-12T03:31:36.572977+00:00 app[web.1]: I, [2024-03-12T03:31:36.572955 #25]  INFO -- : [a108b8e4-c844-43c3-bc59-9805eff1a374]   Rendered static_pages/root.html.erb within layouts/application (Duration: 1.6ms | Allocations: 384) 
2024-03-12T03:31:36.573402+00:00 app[web.1]: I, [2024-03-12T03:31:36.573370 #25]  INFO -- : [a108b8e4-c844-43c3-bc59-9805eff1a374]   Rendered layout layouts/application.html.erb (Duration: 2.1ms | Allocations: 629) 
2024-03-12T03:31:36.573520+00:00 app[web.1]: I, [2024-03-12T03:31:36.573500 #25]  INFO -- : [a108b8e4-c844-43c3-bc59-9805eff1a374] Completed 200 OK in 3ms (Views: 2.0ms | ActiveRecord: 0.3ms | Allocations: 827) 
2024-03-12T03:31:36.574661+00:00 heroku[router]: at=info method=GET path=\"/\" host=app-5dfac8c6817e.herokuapp.com request_id=a108b8e4-c844-43c3-bc59-9805eff1a374 fwd=\"174.116.115.144\" dyno=web.1 connect=0ms service=5ms status=200 bytes=1855 protocol=https 
2024-03-12T03:31:36.658456+00:00 heroku[router]: at=info method=GET path=\"/favicon.ico\" host=app-5dfac8c6817

排查方案 #

• 验证webpack构建产物：通过heroku run bash登录Heroku容器，检查public/packs目录下是否存在编译后的JS和CSS文件。如果为空，手动执行webpack -p查看是否有编译错误，确认postinstall脚本是否正常执行。
• 检查Rails视图资源引入：确认layouts/application.html.erb中是否正确使用javascript_pack_tag和stylesheet_pack_tag加载webpack打包的入口文件，例如<%= javascript_pack_tag 'application' %>和<%= stylesheet_pack_tag 'application' %>。
• 查看浏览器控制台错误：打开浏览器开发者工具，检查Console标签是否有JS执行错误，Network标签是否存在资源加载404或失败的情况，这可能是打包路径配置错误导致的。
• 确认生产环境配置：检查webpack的生产环境配置，确保输出目录为public/packs，且publicPath设置正确，适配Heroku的部署路径。同时确认Heroku的NODE_ENV环境变量为production。
• 查看部署日志中的postinstall输出：在Heroku部署日志中搜索postinstall相关内容，确认webpack -p命令是否成功完成，是否有编译异常被忽略。

内容的提问来源于stack exchange，提问作者Raynor