将带有 React 组件的 Ruby on Rails 项目部署到 Heroku答案

【问题标题】：Deploying a Ruby on Rails project with React components to Heroku将带有 React 组件的 Ruby on Rails 项目部署到 Heroku
【发布时间】：2016-11-15 09:43:08
【问题描述】：

我正在尝试部署一个 Ruby on Rails 应用程序，将 Node.js 前端连接到 Heroku。我得到：

这是我的 Procfile：

web:bundle exec thin start -p $PORT

这是我的 package.json：

{
  "name": "collectize",
  "version": "1.0.0",
  "description": "[Heroku link][heroku]",
  "main": "index.js",
  "directories": {
    "doc": "docs",
    "test": "test"
  },
  "engines": {
    "node": "4.1.1",
    "npm": "2.1.x"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "./node_modules/.bin/webpack"
    "start": "node ./app/assets/javascripts/bundle.js"

  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/winterblack/Collectize.git"
    "start": "web:bundle exec thin start -p $PORT"

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/winterblack/Collectize/issues"
  },
  "homepage": "https://github.com/winterblack/Collectize#readme",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "flux": "^2.1.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.5.2",
    "webpack": "^1.13.1"
  },
  "devDependencies": {}
}

这是我的 Heroku 日志：

2016-07-13T05:29:29.266840+00:00 heroku[api]: Release v28 created by wylliamjudd@gmail.com
2016-07-13T05:29:29.266840+00:00 heroku[api]: Deploy 7d61777 by wylliamjudd@gmail.com
2016-07-13T05:29:29.456774+00:00 heroku[slug-compiler]: Slug compilation started
2016-07-13T05:29:29.517376+00:00 heroku[web.1]: Restarting
2016-07-13T05:29:29.518479+00:00 heroku[web.1]: State changed from up to starting
2016-07-13T05:29:32.421302+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2016-07-13T05:29:33.846617+00:00 heroku[web.1]: Process exited with status 143
2016-07-13T05:29:41.586027+00:00 heroku[web.1]: Starting process with command `npm start`
2016-07-13T05:29:43.343250+00:00 app[web.1]:
2016-07-13T05:29:43.343268+00:00 app[web.1]: > collectize@1.0.0 start /app
2016-07-13T05:29:43.343269+00:00 app[web.1]: > node ./app/assets/javascripts/bundle.js
2016-07-13T05:29:43.343269+00:00 app[web.1]:
2016-07-13T05:29:43.513547+00:00 app[web.1]:
2016-07-13T05:29:43.520060+00:00 app[web.1]:     at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:88:4)
2016-07-13T05:29:43.520063+00:00 app[web.1]:     at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:43:10)
2016-07-13T05:29:43.520063+00:00 app[web.1]:     at Module._compile (module.js:456:26)
2016-07-13T05:29:43.532480+00:00 app[web.1]: npm ERR! This is most likely a problem with the collectize package,
2016-07-13T05:29:43.535942+00:00 app[web.1]:
2016-07-13T05:29:44.242442+00:00 heroku[web.1]: Process exited with status 1
2016-07-13T05:29:44.280956+00:00 heroku[web.1]: State changed from starting to crashed
2016-07-13T05:29:44.282455+00:00 heroku[web.1]: State changed from crashed to starting
2016-07-13T05:29:57.352852+00:00 heroku[web.1]: Starting process with command `npm start`
2016-07-13T05:29:59.471893+00:00 app[web.1]:
2016-07-13T05:29:59.471938+00:00 app[web.1]: > collectize@1.0.0 start /app
2016-07-13T05:29:59.471940+00:00 app[web.1]: > node ./app/assets/javascripts/bundle.js
2016-07-13T05:29:59.471943+00:00 app[web.1]:
2016-07-13T05:29:59.650297+00:00 app[web.1]:
2016-07-13T05:29:59.654711+00:00 app[web.1]: /app/app/assets/javascripts/bundle.js:88
2016-07-13T05:29:59.655117+00:00 app[web.1]:     $(document).ready(function () {
2016-07-13T05:29:59.659133+00:00 app[web.1]:     at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:88:4)
2016-07-13T05:29:59.659135+00:00 app[web.1]:     at __webpack_require__ (/app/app/assets/javascripts/bundle.js:20:30)
2016-07-13T05:29:59.659138+00:00 app[web.1]:     at Module.load (module.js:356:32)
2016-07-13T05:29:59.659139+00:00 app[web.1]:     at Function.Module._load (module.js:312:12)
2016-07-13T05:29:59.659140+00:00 app[web.1]:     at Function.Module.runMain (module.js:497:10)
2016-07-13T05:29:59.659141+00:00 app[web.1]:     at startup (node.js:119:16)
2016-07-13T05:29:59.672227+00:00 app[web.1]: npm ERR! node v0.10.30
2016-07-13T05:29:59.672464+00:00 app[web.1]: npm ERR! npm  v2.1.18
2016-07-13T05:29:59.672884+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-07-13T05:29:59.673045+00:00 app[web.1]: npm ERR! collectize@1.0.0 start: `node ./app/assets/javascripts/bundle.js`
2016-07-13T05:29:59.673873+00:00 app[web.1]: npm ERR! This is most likely a problem with the collectize package,
2016-07-13T05:29:59.674006+00:00 app[web.1]: npm ERR! not with npm itself.
2016-07-13T05:29:59.674125+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2016-07-13T05:29:59.674412+00:00 app[web.1]: npm ERR! You can get their info via:
2016-07-13T05:29:59.674578+00:00 app[web.1]: npm ERR!     npm owner ls collectize
2016-07-13T05:29:59.674919+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2016-07-13T05:29:59.677307+00:00 app[web.1]:
2016-07-13T05:30:00.517992+00:00 heroku[web.1]: State changed from starting to crashed
2016-07-13T05:30:00.501781+00:00 heroku[web.1]: Process exited with status 1
2016-07-13T05:30:01.842475+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=collectize.herokuapp.com request_id=111967a3-b265-4447-8e7e-da8a723b5b48 fwd="24.176.249.167" dyno= connect= service= status=503 bytes=

我需要在本地机器上运行：

~$ bundle install
~$ npm install
~$ webpack
~$ thin start

我是否必须让 Heroku 运行 node bundle.js 才能获得我的 React 组件？如果是这样，为什么我不必在我的机器上这样做？ Heroku 上发生的事情与我的本地计算机上发生的事情之间的区别是我需要澄清的主要问题。

日志中的这一行似乎很重要：

/app/app/assets/javascripts/bundle.js:88
$(document).ready(function () {

我几乎从未使用 Node.js 运行过 JavaScript 文件（除了一些调试）；我几乎总是在 HTML 的 Web 应用程序中使用 JavaScript。我尝试在本地运行node bundle.js，并得到ReferenceError: $ is not defined。我尝试将其更改为 document.addEventListener("DOMContentLoaded", ...但后来我得到了同样的错误，即未定义文档。

老实说，我不知道从这里去哪里。我不明白为什么 Heroku 需要运行 node bundle.js，或者它是否需要。

我确实尝试删除 Procfile 并将 "bundle exec thin start -p $PORT" 作为我的启动脚本放在我的 package.json 中，这实际上让我的网站“启动”了，但没有 React 组件（因此完全空白）。

【问题讨论】：

nodejs前端是什么意思？ Heroku 允许一个服务器监听每个应用程序，因此您需要 2 个应用程序，一个用于 Rails，一个用于节点。
我的意思是我的项目使用了react。我认为javascript在浏览器的前端运行。显然，我不太了解这一点。
我明白了。我怀疑问题是 Heroku 检测到错误的 buildpack。你能运行heroku buildpacks 并告诉我输出吗？
heroku/ruby 和 heroku/nodejs。我自己安装了这两个。

标签： ruby-on-rails node.js heroku thin

【解决方案1】：

我发现对于 Heroku，您需要包含一个网站图标。否则应用会崩溃。

将此包含在您的<head>：

<link href="/images/favicon.png" rel="shortcut icon" type="image/png"/>

相应地调整路径、文件名和类型。

【讨论】：

添加了图标，但它并没有解决我的问题。感谢您的提示。

【解决方案2】：

问题是 Heroku 设置为服务于 Rails 后端或 Node.js 同构前端。您不能在同一个应用程序中同时执行这两项操作。

使用两个应用程序。 myapp-api.herokuapp.com 是 Rails，myapp-web.herokuapp.com 是 React 同构的。我个人在netlify.com 上托管 React 前端，这是一个静态托管服务。
在构建过程中使用 webpack 构建并提供来自 Rails 的静态文件。 webpack-rails 看起来很有希望。

删除 nodejs buildpack，并决定您希望如何为您的前端提供服务。单独的应用程序或静态构建。

【讨论】：

我确定这不是真的。我被 appAcademy 淘汰了，但仍然可以访问他们的课程。我可以在一个应用程序中看到数十个 Rails/React 项目部署到 Heroku。所以，我确定这不是解决办法，但不幸的是，我无法再从助教那里获得帮助，所以我不确定到底是什么问题。但我知道不是这个。
它刚刚开始工作。我从heroku中删除了nodejs buildpack并用索引1读取了它，显然这解决了问题。

【解决方案3】：

显然，我所要做的就是删除我的 nodejs buildpack 并使用索引 1 读取它。当我这样做时，我的网站立即开始工作。然后我从我的 package.json 中删除了启动脚本，网站仍然有效。然后我删除了我的 procfile，网站仍然有效。

所以，唯一的问题是构建包的顺序，不需要 procfile，不需要启动脚本。

【讨论】：