Question

好吧，我有一个很大的问题，我有一个前端只响应发送请求到rails api上的ruby，我们使用redux，babel和webpack。我的问题是，我不能让这个反应项目在Heroku上工作。

这是来自heroku的503响应错误。

的package.json：

{
  "name": "real-networking-ui",
  "version": "1.0.0",
  "description": "Real Netoworking UI",
  "main": "index.js",
  "scripts": {
    "start": "node -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config ./webpack.config.dev.js --progress --profile --colors",
    "build": "node -r babel-register ./node_modules/webpack/bin/webpack --config ./webpack.config.prod --progress --profile --colors",
    "lint": "eslint app test *.js"
  },
  "engines": {
    "node": "6.6.0"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-core": "^6.10.4",
    "babel-eslint": "^6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-remove-console": "^6.8.0",
    "babel-plugin-transform-remove-debugger": "^6.8.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "classnames": "^2.2.5",
    "css-loader": "^0.23.1",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-import-resolver-webpack": "^0.3.2",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-import": "^1.10.0",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.21.0",
    "json-loader": "^0.5.4",
    "postcss-css-variables": "^0.5.1",
    "postcss-loader": "^0.9.1",
    "postcss-mixins": "^5.0.0",
    "postcss-nested": "^1.0.0",
    "postcss-partial-import": "^1.3.0",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.13.1",
    "svg-react": "^1.0.9",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "core-js": "^2.4.1",
    "css-loader": "^0.23.1",
    "lodash": "^4.17.2",
    "moment": "^2.17.1",
    "node-sass": "^3.13.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-maskedinput": "^3.3.1",
    "react-modal": "^1.6.4",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.5",
    "react-select": "^1.0.0-rc.2",
    "react-select-box": "^3.0.1",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "svg-react": "^1.0.9",
    "validator": "^6.2.0",
    "whatwg-fetch": "^2.0.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

webpack.config.base：

    import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  entry: './app/app.js',
  output: {
    path: './app/App/dist',
    filename: '/bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass'),

      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css!sass'),
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.svg$/,
        loader: 'babel?presets[]=es2015,presets[]=react!svg-react',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/App/index.html',
    }),
    new ExtractTextPlugin('/app/App/css/default.css', {
      allChunks: true,
    }),
  ],
};

webpack.config.dev：

    import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  debug: true,
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    ...baseConfig.plugins,
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    colors: true,
    historyApiFallback: true,
    inline: true,
    hot: true,
  },
};
export default config;

webpack.config.prod.js：

    import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  plugins: [
    ...baseConfig.plugins,
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        screw_ie8: true,
        warnings: false,
      },
    }),
  ],
};
export default config;

Procfile：

web: npm start

如果您需要更多相关信息，请告诉我我编辑它。

感谢您的帮助。

Answer 1

heroku默认配置是在node_modules中缓存依赖项并将生产环境设置为true。

缓存node_modules可防止安装其他模块。生产环境阻止安装devDependencies中的package.json。

Refer to this link to solve the above problems

另外，webpack-dev-server在Heroku中不起作用，所以最好创建一个小型Web服务器（我个人喜欢Express服务器）来提供dist文件夹，然后部署应用程序。

此外，如果您仍然遇到问题，请尝试运行heroku logs --tail并将日志粘贴到此处。

Answer 2

我的看法是devDependencies应该在依赖项下重新安装。在类似情况下，尝试在Heroku上进行部署时出现错误屏幕。 devDependencies会被忽略，并且只要您的代码要求使用HerDepend警报就将被忽略。

在heroku上部署React-Redux webpack

2 个答案: