Heroku rails 6 预编译资产失败

Question

我哪里出错了？即使在运行 $ npm install --save-dev webpack

之后，我也无法将我的应用程序部署到 heroku

当我尝试将我的应用部署到 heroku 时，我得到以下信息：

remote:        Compiling...
remote:        Compilation failed:
remote:        
remote:        webpack not installed
remote:        
remote:        Install webpack to start bundling: 
remote:          $ npm install --save-dev webpack
remote:        
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...

我已经运行了npm install --save-dev webpack，我也运行了bundle exec rails webpacker:install，但是当我部署到heroku时，我得到了同样的消息

这是我定义 webpack 的 application.js 文件：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("custom/alert")
var jQuery = require('jquery')

console.log("--- ALL JS FILES LOADED ---")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


//include jQuery in global and window scope (so it can be accessed globally)
global.$ = global.jQuery = jQuery;
window.$ = global.jQuery = jQuery;

//include moment in global and window scope (so it can be accessed globally)
global.moment = moment;
window.moment = moment;

这是我的 environment.js 文件

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = 环境

这是我的 production.js 文件

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

这是我的 package.json

{
  "name": "sample_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.6.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack": "^5.53.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Answer 1

如果你需要 nodejs（这是运行 wepacks 的运行时），你必须告诉 Heroku，否则它将只有 ruby​​ 运行时。

在 Heroku 中，这些运行时称为 buildpacks，只要有一个明确的赢家，它们通常会默认被检测到。例如，每当 Heroku 找到 Gemfile 时，它都会使用 ruby​​ buildpack。

需要添加nodejs buildpack，通过运行实现

heroku buildpacks:add --index 1 heroku/nodejs

一旦设置好，你就可以推送了，每个 buildpack 都会完成它的工作，首先nodejs 将安装在package.json 中声明的所有内容，然后ruby 将安装它自己的依赖项和最后编译并启动应用程序。