Question

我正在尝试在Heroku上运行我的简单节点应用程序这是我的 server.js （起点）：

require('babel-register')

const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const StaticRouter = ReactRouter.StaticRouter
const _ = require('lodash')
const fs = require('fs')
const PORT = process.env.PORT || 8080
const baseTemplate = fs.readFileSync('./index.html')
const template = _.template(baseTemplate)
const App = require('./js/App').default

const server = express()
server.use('/_public', express.static('./_public'))

server.use((req, res) => {
  const context = {}
  const body = ReactDOMServer.renderToString(
    React.createElement(StaticRouter, {location: req.url,
      context: context},
    React.createElement(App))
  )

  res.write(template({body: body}))
  res.end()
})

console.log('listening on port', PORT)

这是 package.json ：

{
  "name": "medium",
  "version": "1.0.0",
  "description": "SSR react static website",
  "main": "server.js",
  "scripts": {
    "build": "node_modules/.bin/webpack",
    "dev": "node_modules/.bin/webpack-dev-server",
    "lint": "eslint js/**/*.js server.js",
    "watch": "node_modules/.bin/webpack --watch"
  },
  "engines": {
    "node": "6.10.3"
  },
  },
  "keywords": [
    "react"
  ],
  "dependencies": {
    "axios": "^0.16.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.24.1",
    "express": "^4.15.3",
    "history": "^4.6.1",
    "lodash": "^4.17.4",
    "react": "^15.5.4",
    "react-disqus-thread": "^0.4.0",
    "react-dom": "^15.5.4",
    "react-google-maps": "^7.0.0",
    "react-icons": "^2.2.5",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-transition-group": "^1.1.3",
    "reactstrap": "^4.6.2",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "shortid": "^2.2.8"
...
}

在控制台中打印应用程序从xxxx端口开始。但随后应用程序崩溃并显示以下消息

2017-05-29T10:15:13.241869+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=medium-if-ua.herokuapp.com request_id=bc8294c4-4754-4875-8cdb-d6921212f7bb fwd="178.136.244.44" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

您可以通过将呈现包装在try/catch块中并使用堆栈跟踪发送错误来调试此问题：

server.use((req, res) => {
  try {
    const context = {}
    const body = ReactDOMServer.renderToString(
      React.createElement(StaticRouter, 
        {location: req.url, context: context},
        React.createElement(App)
      )
    )

    res.write(template({body: body}))
    res.end()
  } catch (error) {
    const result = [error.message, error.stack].join('\r\n')
    res.send(result)
  }
})

Answer 2

我在 server.js 中做出的小改动：
1. server.listen(PORT) - 被偶然删除，这就是节点服务器一直退出的原因。
2.为babel-register包添加预设：

毕竟一切正常）

Heroku App（Express React SSR）崩溃了

2 个答案: