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

Question

当我输入git push heroku main 时说webpack 编译成功，但是当我检查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 .

真的被这件事难住了。我的应用程序的链接是here。当我尝试在 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

Answer 1

我会推荐几件事：

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}!`);
});