Question

我使用 react webpack 将必要的文件解压到 dist 文件夹中。

我的文件目录

dist
    --index.js
    --index.html
src
..source files

当我将应用程序部署到 heroku 时，出现这样的错误

heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=beverlylaurel.herokuapp.com request_id=bfc941e7-4d93-446d-8edf-a723dddbe990 fwd="95.70.130.65" dyno= connect= service= status=503 bytes= protocol=https
    
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=beverlylaurel.herokuapp.com request_id=3d3e5881-4397-4c35-ab19-d5ff3534bcad fwd="95.70.130.65" dyno= connect= service= status=503 bytes= protocol=https

package.json

    {
  "name": "xapp",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "@ramonak/react-progress-bar": "^2.1.8",
    "@reduxjs/toolkit": "^1.5.0",
    "axios": "^0.21.1",
    "dotenv": "^8.2.0",
    "env-cmd": "^10.1.0",
    "express": "^4.17.1",
    "i18next": "^19.9.1",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.21",
    "pure-react-carousel": "^1.27.6",
    "react": "^17.0.1",
    "react-avatar": "^3.10.0",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.15.4",
    "react-i18next": "^11.8.8",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^4.3.0",
    "serve": "^11.3.2",
    "storage-helper": "^1.4.1",
    "web-vitals": "^1.1.0",
    "webpack": "^4.46.0"
  },
  "scripts": {
    "start": "webpack serve --mode=development --progress",
    "build": "webpack --mode=production --progress"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "@types/lodash": "^4.14.168",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^4.3.0",
    "dotenv-webpack": "^7.0.2",
    "file-loader": "^6.1.1",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^4.5.2",
    "node-sass": "^5.0.0",
    "path": "^0.12.7",
    "sass-loader": "^10.1.1",
    "style-loader": "^1.3.0",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.4",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "engines": {
    "node": "14.15.5",
    "npm": "7.6.3"
  }
}

webpack 配置文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const Dotenv = require("dotenv-webpack");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },
  module: {
    rules: [
      {
        test: [/.css$|.scss$|.sass$/],
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(j|t)sx?$|.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react", "@babel/typescript"],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,

        use: [
          {
            loader: "url-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
      filename: "index.html",
      favicon: path.resolve(__dirname, "public/favicon.png"),
      // publicPath: "/dist/",
    }),
    new webpack.ProvidePlugin({
      React: "react",
    }),
    new Dotenv(),
  ],
  resolve: {
    extensions: [".wasm", ".ts", ".tsx", ".mjs", ".cjs", ".js", ".json"],
    alias: {
      Features: path.resolve(__dirname, "src/js/features/"),
      Helpers: path.resolve(__dirname, "src/js/helpers/"),
      Routes: path.resolve(__dirname, "src/js/routes/"),
      Redux: path.resolve(__dirname, "src/js/redux/"),
      I18n: path.resolve(__dirname, "src/js/i18n/i18n.js"),
      Assets: path.resolve(__dirname, "src/assets/"),
      Components: path.resolve(__dirname, "src/js/components/"),
      Enum: path.resolve(__dirname, "src/js/enumerations/enums.tsx"),
      Services: path.resolve(__dirname, "src/js/services/"),
      Layout: path.resolve(__dirname, "src/js/layout/"),
    },
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback: true,
    port: 3000,
    open: true,
    hot: true,
  },
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from 'Redux/store';

//app
import App from './App';

//i18n
import 'I18n';

//assets
import 'Assets/css/base.css';
import 'Assets/css/elements.css';
import 'Assets/css/helpers.css';
import 'Assets/css/_normalize.css';

ReactDOM.render(
   <React.StrictMode>
      <Provider store={store}>
         <App />
      </Provider>
   </React.StrictMode>,
   document.getElementById('root')
);

使用 start 命令我在本地成功工作

我哪里做错了？我不会把 webpack 配置文件放在这里以避免拥挤，但如果你愿意，我可以。

我希望它在 Heroku 上的 dist 文件夹中工作

Answer 1

我遇到了同样的错误，就我而言，问题是 .gitignore 文件。它已指定忽略构建文件夹，这就是为什么我的 dist 没有被推送到 heroku。更改后，我只需要提交并推送丢失的文件，它就可以完美运行。

他们建议一个起始的 .gitignore 文件看起来像这样：

/node_modules
npm-debug.log
.DS_Store
/*.env

希望它可以帮助我看到问题没有解决的人:)

将 dist 文件夹部署到 heroku

1 个答案: