如何使用express对heroku进行部署

Question

我从头开始设置reactjs并表达环境。我放弃了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": {
    "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.js

module.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']
     }
}

服务器

app.get('/', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
})

文件夹结构

-dist
 - bundle.js
 - index.html
-node_modules
-server
 -server.js
-src
 -index.js
 -App.js

Answer 1

我也是Heroku的新手，
  我花了两天时间阅读并试图部署一个全栈应用程序   ＆＃39; reacjs + expressjs + nodejs + mongodb＆＃39;。   我看到你也使用expressjs，所以你以后可能也需要一个db。 ：）

事情并不复杂，因为许多工具需要同步才能工作   一起来。

快速回答：

Heroku有详细但长篇的文档，并提供了一个示例     节点应用程序，准备在本地下载，检查代码并进行部署     它到了Heroku，并且看到了它。

  

此处（https://elements.heroku.com/buttons/mongolab/hello-mongoose）

我如何处理所有堆栈生命周期。

以下我的步骤关于我如何成功 Heroku部署（从后端获取一些数据到客户端）。

链接＆＃39; /＆＃39;：https://damp-brook-72767.herokuapp.com/
  链接＆＃39; /用户＆＃39;：https://damp-brook-72767.herokuapp.com/users
  链接＆＃39; / products＆＃39;：https://damp-brook-72767.herokuapp.com/products

1. 使用'express-generator'创建快速骨架 $ express shop。创建一个简单的expressjs应用程序 快递里面我创造了一些路线。

2. 使用'create-react-app'创建reactjs应用 $ create-react-app client。我将此命令运行到/ shop文件夹中 $ npm run eject。弹出隐藏的文件夹＆＃39;脚本＆＃39; ＆安培; ＆＃39;配置＆＃39;

3. 使用Heroku CLI或Heroku.com

创建Heroku应用程序

4. 在mlab.com上创建一个免费帐户 一旦我们创建了一个新的数据库，我们就会获得连接字符串， 例如mongodb://<dbuser>:<dbpassword>@ds133630.mlab.com:33630/db

5. 不要在本地运行$ npm run start，因为会有 服务器'https://damp-brook-72767.herokuapp.com'.的CORS问题 我还没解决。

6. 因为一切都已到位。

   1. 执行'$ npm run build'时，先检查 NOT 是否有任何错误 本地。
   2. 将任何更改提交给＆＃39; master＆＃39;分支
   3. 推送给Heroku大师
   4. 用手指打开Heroku上的网页。

7. 那就是它，除非我忘了什么。我也有我的测试项目，在github上。

  

此处（https://github.com/tornado1979/fullstack-shop）

希望这会有所帮助，祝你好运。