如何部署反应与快递给Herku

本文介绍了如何部署反应与快递给Herku的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我从头开始设置reactjs和express环境。我抛弃了webpack-dev-server，只用 webpack --watch 作为 npm start 它工作正常变化。我可以将我的反应数据无误地接收到我的快递服务器。但我如何将这部署到heroku？我是新来的后端，这是我第一次使用反应与后端。我希望你能帮助我，谢谢你。 package.json name：react-scratch，version：1.0.0，description：，main： index.js，scripts：{start：webpack --watch}，keywords：[]， author：，license：ISC，babel：{预设值：[react， es2015}，dependencies：{axios：^ 0.18.0，body-parser：^ 1.18 .2，express：^ 4.16.2，mongodb：^ 3.0.4，react：^ 16.2.0，react-dom：^ 16.2.0，react-router-dom：^ 4.2.2}，devDependencies：{babel-cli：^ 6.26.0，babel-core：^ 6.26.0，babel-loader：^ 7.1.4， babel-plugin-transform-class-properties：^ 6.24.1，babel-preset-es2015：^ 6.24.1，babel-preset -react：^ 6.24.1，nodemon： ^ 1.17.1，path：^ 0.12.7，webpack：^ 4.1.1，webpack-cli：^ 2.0 .11，webpack-dev-server：^ 3.1.1} } webpack.config.js module.exports = {条目：['./src/index.js']，输出：{路径：__dirname +'/ dist'， publicPath：'/' ，文件名：'bundle.js'}， devServer：{ contentBase：'./dist'}， module：{规则：[ { test：/\.(js|jsx)$/， exclude：/ node_modules /， use：['babel-loader '] } ] }，解析：{ extensions：['*'，'.js'，'.jsx'] } } 服务器 app.get（'/'，（req，res）=> ; { res.sendFile（path.resolve（__ dirname，'dist'，'index.html'））; $） $ / code> 文件夹结构 -dist - bundle.js - index.html - node_modules - server --server.js -src -index.js -App.js 解决方案 Hi im new Heroku也是， i花了两天的时间阅读并试图部署一个完整的应用程序，其中包含$ > reacjs + expressjs + nodejs + mongodb '。 我看到你也使用 expressjs ，所以你以后可能还需要一个db。 ：） 事情并不复杂，因为许多工具需要同步才能同时​​工作。 快速回答： Heroku有一个详细但很长的文档，还提供了一个示例 Node应用程序，准备在本地下载它，检查代码，然后将部署到Heroku，并实时查看。 我如何处理所有堆栈生命周期。 以下是关于我如何成功 Heroku部署（从后端向客户端获取一些数据）的我的步骤。 link'/'： https://damp-brook-72767.herokuapp.com/ link'/ users'： https://damp-brook-72767.herokuapp.com/users link' / products'： https://damp-brook-72767.herokuapp.com/products 使用'express-generator' > $ express shop 。创建一个简单的expressjs应用程序。 在express中创建一些路线。 使用'create-react-app'创建reactjs应用程序 $ create-react-app client 。我运行这个命令到/ shop文件夹 $ npm run eject 。弹出隐藏文件夹的脚本& 'config'使用 Heroku CLI 或从创建Heroku应用程序， Heroku.com 在 mlab.com 上创建一个免费账户。 一旦我们创建了一个新的数据库，我们就得到了连接字符串 eg mongodb：//< dbuser>：< dbpassword> @ ds133630.mlab.com：33630 / db > 不要在本地运行， $ npm run start ，因为服务器'https：//会出现a CORS问题damp-brook-72767.herokuapp.com'。 我还没有解决这个问题。 因为一切都在地点。 执行'$ npm run build时，首先检查 NOT 是否有任何错误' 本地。 将任何更改提交到'master'分支 li> 横过我们的手指并在Heroku上打开网页。 我忘了一些东西。我的测试项目也在github上。 希望这会有所帮助，祝你好运。 I setup a reactjs and express environment from scratch. I ditched the webpack-dev-server and just use webpack --watch for the npm start it's working fine it reads the changes. I can receive my react data to my express server without errors. But how would i deploy this to heroku? I am new to back-end and this is my first time using react with a backend. I hope you can help me thank you..package.json{ "name": "react-scratch", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack --watch" }, "keywords": [], "author": "", "license": "ISC", "babel": { "presets": [ "react", "es2015" ] }, "dependencies": { "axios": "^0.18.0", "body-parser": "^1.18.2", "express": "^4.16.2", "mongodb": "^3.0.4", "react": "^16.2.0", "react-dom": "^16.2.0", "react-router-dom": "^4.2.2" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-plugin-transform-class-properties": "^6.24.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "nodemon": "^1.17.1", "path": "^0.12.7", "webpack": "^4.1.1", "webpack-cli": "^2.0.11", "webpack-dev-server": "^3.1.1" }}webpack.config.jsmodule.exports = { entry: [ './src/index.js' ], output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] }}Serverapp.get('/', (req, res) => { res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));})Folder Structure-dist - bundle.js - index.html-node_modules-server -server.js-src -index.js -App.js 解决方案 Hi i m new to Heroku too, i spent two days reading and trying to deploy a full-stack application, consisting of 'reacjs + expressjs + nodejs + mongodb'. I see that you also use expressjs, so you might later need a db also. :)Things are little complicated as many tools need to be sync in order to work all together.Quick answer: Heroku has a detailed but long documentation about that and also provides an example Node application, ready to download it locally, check the code, and deploy it to Heroku, and see it live.How i deal with all the full-stack lifecycle. Below are my steps on how i succeeded Heroku deploy(fetch some data from backend to the client). link '/': https://damp-brook-72767.herokuapp.com/ link '/users': https://damp-brook-72767.herokuapp.com/users link '/products': https://damp-brook-72767.herokuapp.com/products Create express skeleton with 'express-generator'$ express shop. Creates a simple expressjs app.Inside the express i create some routes. Create the reactjs app with 'create-react-app'$ create-react-app client. I run this command into the /shop folder$ npm run eject. Eject the hidden folders 'scripts' & 'config' Create the Heroku application either with Heroku CLI or from Heroku.comCreate a free account on mlab.com.As soon we create a new db, we get the connection string,e.g. mongodb://<dbuser>:<dbpassword>@ds133630.mlab.com:33630/dbDont run locally, $ npm run start, because there will be a CORS issue with the server 'https://damp-brook-72767.herokuapp.com'.I havent solve that yet.Since everything is in place. Check first NOT to be any errors, when execute '$ npm run build'locally.Commit any changes to 'master' branchPush to Heroku masterCross our fingers and open the webpage on Heroku.That's it, except if i forgot something. I have my test project, also, on github.Hope this helps, good luck. 这篇关于如何部署反应与快递给Herku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！