时间戳

首页 > 解决方案 > 无法让 Heroku App 运行，但我可以让它在本地运行

reactjs - 无法让 Heroku App 运行，但我可以让它在本地运行

问题描述

说当我进入时 webpack 编译成功，git push heroku main但是当我检查heroku logs --tail它显示我的构建失败并且指向我的应用程序的链接转到默认的初始 heroku 页面。

我尝试通过添加来更新我的 webpack.config.js

  resolve: {
    extensions: ['.js', '.jsx'],
  },

然后像这样删除我在实际 React 组件上的所有扩展

Before:
import SearchContainer from './SearchContainer.jsx';
import Promoted from './Promoted.jsx';
import Products from './Products.jsx';
After:
import SearchContainer from './SearchContainer';
import Promoted from './Promoted';
import Products from './Products';

我还多次仔细检查了我的文件是否区分大小写，确保使用以下命令在 git 上重新添加文件并检查所有内容是否匹配：

git rm -rf --cached .
git add .

真的被这件事难住了。我的应用程序的链接在这里。当我尝试在 Netlify 上进行部署时，也发生了类似的事情。一切都在本地运行，然后在站点上运行时崩溃。在尝试调试 Netlfiy 一天的大部分时间后，我切换到了 Heroku。如果有人有任何解决方案，我将不胜感激。下面是我从 Netlify 收到的错误消息，这可能有助于调试 Heroku 发生的事情，因为 Heroku 在其构建失败输出中没有描述性。

7:14:01 PM: ERROR in main
7:14:01 PM: Module not found: Error: Can't resolve 'babel-loader' in '/opt/build/repo'
resolve 'babel-loader' in '/opt/build/repo'
7:14:01 PM:   Parsed request is a module
7:14:01 PM:   using description file: /package.json (relative path: .opt/build/repo)
7:14:01 PM:     resolve as module
7:14:01 PM:       /opt/build/repo/node_modules doesn't exist or is not a directory
      /opt/build/node_modules doesn't exist or is not a directory
      /opt/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
7:14:01 PM: webpack 5.30.0 compiled with 1 error in 54 ms
7:14:01 PM: assets by status 670 bytes [cached] 1 asset
7:14:01 PM: ERROR in main
7:14:01 PM: Module not found: Error: Can't resolve './client/src/index' in '/opt/build/repo'
resolve './client/src/index' in '/opt/build/repo'
7:14:01 PM:   using description file: /package.json (relative path: .opt/build/repo)
7:14:01 PM:     Field 'browser' doesn't contain a valid alias configuration
    using description file: /package.json (relative path: .opt/build/repo/client/src/index)
7:14:01 PM:       no extension
7:14:01 PM:         Field 'browser' doesn't contain a valid alias configuration
        /opt/build/repo/client/src/index doesn't exist
      .js
7:14:01 PM:         Field 'browser' doesn't contain a valid alias configuration
        /opt/build/repo/client/src/index.js doesn't exist
      .jsx
7:14:01 PM:         Field 'browser' doesn't contain a valid alias configuration
        /opt/build/repo/client/src/index.jsx doesn't exist
      as directory
7:14:01 PM:         /opt/build/repo/client/src/index doesn't exist
7:14:01 PM: webpack 5.30.0 compiled with 1 error in 11 ms
7:14:06 PM: Build exceeded maximum allowed runtime

标签： reactjsherokuwebpacknetlify

解决方案

我会推荐几件事：

  1. build命令有一个--watch选项。您的本地开发可能需要观察者，但它不在服务器上。它只是挂在构建管道中并可能使构建超时。有两个webpack配置（来自一个常见的配置）；一个用于开发，一个用于生产（服务器）：

webpack.common.config.js：

const path = require('path');

module.exports = {
  entry: './client/src/index',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './client/dist'),
    publicPath: '/'
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

webpack.development.config.js：

const CommonWebpack = require('./webpack.common.config');

module.exports = {
  ...CommonWebpack,
  watch: true,
  mode: 'development',
  devtool:'inline-source-map'
};

webpack.production.config.js：

const CommonWebpack = require('./webpack.common.config');

module.exports = {
  ...CommonWebpack,
  watch: false,
  mode: 'production',
  devtool: false,
};

有一个单独的命令用于本地开发。例如：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "nodemon server",
  "build": "webpack --config webpack.production.config.js",
  "client-development": "webpack --config webpack.development.config.js"
}
  1. 不需要nodemon在服务器上，改变你Procfile的
web: node server/index.js
  1. express 应用程序的硬编码端口为3000. Heroku 根据自己的内部系统为每个应用程序分配一个端口（通过运行环境）。改听：
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`listening on port ${PORT}!`);
});

推荐阅读