将带有 React 组件的 Rails 项目上的 Ruby 部署到 Heroku

Question

我正在尝试在 Rails 应用程序上部署一个 Ruby，其中有一个 Node.js front end to 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 () {

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

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

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

Answer 1

我发现使用 Heroku 时，您需要包含一个网站图标。否则应用程序将崩溃。

将此添加到您的 <head>:

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

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

Answer 2

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

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

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

Answer 3

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

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

将带有 React 组件的 Rails 项目上的 Ruby 部署到 Heroku

Deploying a Ruby on Rails project with React components to Heroku

ruby-on-rails

node.js

heroku

thin