Javascript 本地运行React服务器端渲染与在真实NodeJS服务器(ibmbluemix)上运行React服务器端渲染有什么区别
我创建了一个简单的react应用程序,在服务器端使用workshop git进行渲染,并做了一些小改动。 因此,当我在本地运行NODE_ENV=server NODE server.js时,它工作得很好。但我尝试在Bluemix Nodejs服务器的试用版上部署此应用程序失败。这是一份日志: 以下是我的server.js代码:Javascript 本地运行React服务器端渲染与在真实NodeJS服务器(ibmbluemix)上运行React服务器端渲染有什么区别,javascript,node.js,reactjs,ibm-cloud,cloud-foundry,Javascript,Node.js,Reactjs,Ibm Cloud,Cloud Foundry,我创建了一个简单的react应用程序,在服务器端使用workshop git进行渲染,并做了一些小改动。 因此,当我在本地运行NODE_ENV=server NODE server.js时,它工作得很好。但我尝试在Bluemix Nodejs服务器的试用版上部署此应用程序失败。这是一份日志: 以下是我的server.js代码: require('babel-register') const express = require('express') const React = require('
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 = 5050
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)
server.listen(PORT)
p.S.很明显,它不理解js/App.js中的ES6语法,但在我的本地服务器上它可以工作。
默认情况下,NODE\u ENV=production
,但根据Bluemix,我在.profile.d目录中创建了一个文件
节点_env.sh代码:
export NODE_ENV=server;
但我不确定此文件是否会更改node_env。我希望比我更了解情况的人能够提供更好的解决方案,但以下是我为使您的应用程序正常工作所做的工作。也许有更好的答案 假设您不想在生产模式下运行 1) server.js:侦听端口环境变量中设置的端口。
server.listen(process.env.PORT | | PORT)
2) package.json:在脚本中添加start
命令
“开始”:“babel node server.js——预设es2015,第2阶段”
3) 获取巴贝尔cli
npm安装--保存dev babel cli
npm安装——保存dev babel-preset-es2015 babel-preset-stage-2
4) 创建manifest.yml以设置CF属性
applications:
- name: rvennam-node-react
memory: 1G
disk_quota: 2G
env:
NPM_CONFIG_PRODUCTION: false
NODE_ENV: dev
5) 从package.json中的devdependences中删除eslint依赖项(存在不匹配)
同样,这是假设您希望在开发模式下在Bluemix上运行。如果您想在Bluemix上进行生产,我认为您应该使用webpack在本地构建,然后推送并提供您的dist目录。您能够将完整的源代码签入github repo吗?@RamVennam我的代码在本地机器上运行良好,是的,它也位于