將React Starter Kit（由Kriasoft）部署到Heroku

Question

我一直在努力將https://github.com/kriasoft/react-starter-kit上的React Starter Kit的原始演示部署到Heroku，直到現在才取得成功。

我所做的只是克隆repo，然后使用heroku create然后git push heroku master進行部署。 但每次我打開現在由Heroku托管的應用程序時，它都會顯示應用程序錯誤。 我也嘗試過npm run deploy無濟於事。

然后我在這里找到了一個React Starter Kit buildpack： https://github.com/angelhive/react-starter-kit-buildpack ： https://github.com/angelhive/react-starter-kit-buildpack並使用它而不是官方的Node.js buildpack和BAM！ 有效！

我的問題是：這個自定義buildpack在GitHub上沒有零星，所以我認為使用React Starter Kit的大多數人都不使用它。

那么你如何部署到Heroku呢？

---

2016年10月24日更新：

這是我在沒有我提到的自定義buildpack的React Starter Kit應用程序上運行heroku logs后得到的錯誤日志。 NODE_ENV設置為production並且NODE_ENV正確運行web: npm start命令。

2016-10-24T16:58:59.080046+00:00 heroku[api]: Enable Logplex by XXXXXXXXXXX
2016-10-24T16:58:59.080092+00:00 heroku[api]: Release v2 created by XXXXXXXXXXX
2016-10-24T17:00:10.139875+00:00 heroku[api]: Set NODE_ENV config vars by XXXXXXXXXXX
2016-10-24T17:00:10.139974+00:00 heroku[api]: Release v3 created by XXXXXXXXXXX
2016-10-24T17:00:35.563970+00:00 heroku[api]: Scaled to web@1:Free by XXXXXXXXXXX
2016-10-24T17:00:35.567139+00:00 heroku[api]: Deploy 048e67f by XXXXXXXXXXX
2016-10-24T17:00:35.567139+00:00 heroku[api]: Release v4 created by XXXXXXXXXXX
2016-10-24T17:00:36.222028+00:00 heroku[slug-compiler]: Slug compilation started
2016-10-24T17:00:36.222047+00:00 heroku[slug-compiler]: Slug compilation finished
2016-10-24T17:00:38.552446+00:00 heroku[web.1]: Starting process with command `npm start`
2016-10-24T17:00:42.185504+00:00 app[web.1]: 
2016-10-24T17:00:42.185533+00:00 app[web.1]: > @ start /app
2016-10-24T17:00:42.185534+00:00 app[web.1]: > babel-node tools/run start
2016-10-24T17:00:42.185535+00:00 app[web.1]: 
2016-10-24T17:00:42.192826+00:00 app[web.1]: sh: 1: babel-node: not found
2016-10-24T17:00:42.200552+00:00 app[web.1]: 
2016-10-24T17:00:42.210421+00:00 app[web.1]: npm ERR! Linux 3.13.0-100-generic
2016-10-24T17:00:42.210728+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2016-10-24T17:00:42.210968+00:00 app[web.1]: npm ERR! node v5.11.1
2016-10-24T17:00:42.211330+00:00 app[web.1]: npm ERR! file sh
2016-10-24T17:00:42.211141+00:00 app[web.1]: npm ERR! npm  v3.10.9
2016-10-24T17:00:42.211525+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-10-24T17:00:42.211735+00:00 app[web.1]: npm ERR! errno ENOENT
2016-10-24T17:00:42.212382+00:00 app[web.1]: npm ERR! syscall spawn
2016-10-24T17:00:42.212551+00:00 app[web.1]: npm ERR! @ start: `babel-node tools/run start`
2016-10-24T17:00:42.212706+00:00 app[web.1]: npm ERR! spawn ENOENT
2016-10-24T17:00:42.212849+00:00 app[web.1]: npm ERR! 
2016-10-24T17:00:42.212995+00:00 app[web.1]: npm ERR! Failed at the @ start script 'babel-node tools/run start'.
2016-10-24T17:00:42.213144+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2016-10-24T17:00:42.213569+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2016-10-24T17:00:42.213288+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the  package,
2016-10-24T17:00:42.213424+00:00 app[web.1]: npm ERR! not with npm itself.
2016-10-24T17:00:42.213724+00:00 app[web.1]: npm ERR!     babel-node tools/run start
2016-10-24T17:00:42.213831+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2016-10-24T17:00:42.214003+00:00 app[web.1]: npm ERR!     npm bugs 
2016-10-24T17:00:42.214094+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2016-10-24T17:00:42.214241+00:00 app[web.1]: npm ERR!     npm owner ls 
2016-10-24T17:00:42.214386+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2016-10-24T17:00:42.220413+00:00 app[web.1]: 
2016-10-24T17:00:42.220613+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2016-10-24T17:00:42.220727+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2016-10-24T17:00:42.305908+00:00 heroku[web.1]: State changed from starting to crashed
2016-10-24T17:00:42.306806+00:00 heroku[web.1]: State changed from crashed to starting
2016-10-24T17:00:42.287610+00:00 heroku[web.1]: Process exited with status 1
2016-10-24T17:00:44.933721+00:00 heroku[web.1]: Starting process with command `npm start`
2016-10-24T17:00:49.345711+00:00 app[web.1]: 
2016-10-24T17:00:49.345725+00:00 app[web.1]: > @ start /app
2016-10-24T17:00:49.345726+00:00 app[web.1]: > babel-node tools/run start
2016-10-24T17:00:49.345726+00:00 app[web.1]: 
2016-10-24T17:00:49.354255+00:00 app[web.1]: sh: 1: babel-node: not found
2016-10-24T17:00:49.361940+00:00 app[web.1]: 
2016-10-24T17:00:49.372282+00:00 app[web.1]: npm ERR! Linux 3.13.0-100-generic
2016-10-24T17:00:49.372554+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2016-10-24T17:00:49.372733+00:00 app[web.1]: npm ERR! node v5.11.1
2016-10-24T17:00:49.372926+00:00 app[web.1]: npm ERR! npm  v3.10.9
2016-10-24T17:00:49.373115+00:00 app[web.1]: npm ERR! file sh
2016-10-24T17:00:49.373304+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-10-24T17:00:49.373492+00:00 app[web.1]: npm ERR! errno ENOENT
2016-10-24T17:00:49.373868+00:00 app[web.1]: npm ERR! @ start: `babel-node tools/run start`
2016-10-24T17:00:49.373697+00:00 app[web.1]: npm ERR! syscall spawn
2016-10-24T17:00:49.374022+00:00 app[web.1]: npm ERR! spawn ENOENT
2016-10-24T17:00:49.374201+00:00 app[web.1]: npm ERR! 
2016-10-24T17:00:49.374376+00:00 app[web.1]: npm ERR! Failed at the @ start script 'babel-node tools/run start'.
2016-10-24T17:00:49.374678+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the  package,
2016-10-24T17:00:49.374528+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2016-10-24T17:00:49.374822+00:00 app[web.1]: npm ERR! not with npm itself.
2016-10-24T17:00:49.374977+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2016-10-24T17:00:49.375126+00:00 app[web.1]: npm ERR!     babel-node tools/run start
2016-10-24T17:00:49.375284+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2016-10-24T17:00:49.375746+00:00 app[web.1]: npm ERR!     npm owner ls 
2016-10-24T17:00:49.375448+00:00 app[web.1]: npm ERR!     npm bugs 
2016-10-24T17:00:49.375600+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2016-10-24T17:00:49.381159+00:00 app[web.1]: 
2016-10-24T17:00:49.375892+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2016-10-24T17:00:49.381402+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2016-10-24T17:00:49.381546+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2016-10-24T17:00:49.475744+00:00 heroku[web.1]: Process exited with status 1
2016-10-24T17:00:49.480202+00:00 heroku[web.1]: State changed from starting to crashed
2016-10-24T17:00:49.926683+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=heroku-dev-antony.herokuapp.com request_id=4610f6f7-68bc-4cbc-94c2-bdaf052f1dce fwd="86.132.224.74" dyno= connect= service= status=503 bytes=
2016-10-24T17:00:50.897033+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=heroku-dev-antony.herokuapp.com request_id=55c2a40c-6baa-4315-8b3e-2dc9d01c469c fwd="86.132.224.74" dyno= connect= service= status=503 bytes=

---

2016年10月25日更新

好的，事實證明這是一個簡單的初學者的錯誤。 我基本上將整個工具包（包括./src和./test ）部署到Heroku，而不是僅部署./build文件夾。

以下是將生產React Starter Kit應用程序部署到Heroku的步驟：

要求：

• 有一個Heroku帳戶
• 請按照此處列出的步驟操作： https ： //devcenter.heroku.com/articles/heroku-command-line

腳步：

1. 使用npm run build -- --release構建生產就緒的應用npm run build -- --release
2. cd build
3. 使用git init初始化git repo
4. 使用git add .添加所有內容git add .
5. 使用git commit -m "Commit message"提交更改
6. 使用heroku create my-apps-name-goes-here創建一個Heroku應用程序heroku create my-apps-name-goes-here
7. 推送到Heroku git push heroku master

瞧！

Answer 1

似乎反應入門工具包默認情況下不會作為生產運行，並且buildpack 將環境設置為生產環境 。 我相信你可以在項目中添加一個Procfile ，告訴它作為生產開始，或者只是將Heroku環境設置為開發 。 如果您在錯誤時發布Heroku日志，我們可以看到它的更多細節。

Answer 2

關於你的編輯 - 如果你想從整個回購部署，這是這樣做的方法：

你必須在你的package.json中添加一個postinstall腳本來構建項目（如果你在你的Procfile中放置npm build -- --release ，它將被限制為30s，之后Heroku會終止它 - 作為安裝后它有腳本，IIRC，15分鍾執行）。

然后，在web: node ./build/server.js中只放置web: node ./build/server.js ./build/server.js。

還要確保在Heroku設置中將NPM_CONFIG_PRODUCTION設置為false，以便下載devDependencies。

這是安裝后腳本的示例：

import run from './run';

async function deployOnHeroku() {
  if (process.env.NODE_ENV == 'production') {
    process.argv.push('--release');
    await run(require('./build')); 
  }
}

export default deployOnHeroku;