Question

我制作了 React 应用程序并使用 Heroku 进行了部署，但是当我单击应用程序链接时，它显示应用程序错误。

我所做的，我使 Procfile 正常工作，在 engine : node version 中添加 package.json 这不起作用。

我想 NPM_CONFIG_LOGLEVEL = error 这可以解决问题，但我不知道该怎么做。

我没有使用 express.. 只是纯粹的、简单的 React 应用程序。

这是构建日志

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 14.x...
       Downloading and installing node 14.17.3...
       Using default npm version: 6.14.13
       
-----> Restoring cache
       - node_modules
       
-----> Installing dependencies
       Installing node modules (package.json)
       audited 2311 packages in 16.151s
       
       158 packages are looking for funding
         run `npm fund` for details
       
       found 3 moderate severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details
       
-----> Build
       Running build
       
       > my-cv@0.1.0 build /tmp/build_2c7b70c1
       > react-scripts build
       
       Creating an optimized production build...
       Compiled successfully.
       
       File sizes after gzip:
       
         478.37 KB  build/static/js/2.80a0e7e2.chunk.js
         29.13 KB   build/static/css/2.b6d59024.chunk.css
         3.59 KB    build/static/js/main.6015e25f.chunk.js
         773 B      build/static/js/runtime-main.cd2e31bd.js
         316 B      build/static/css/main.59a22ca6.chunk.css
       
       The project was built assuming it is hosted at /.
       You can control this with the homepage field in your package.json.
       
       The build folder is ready to be deployed.
       You may serve it with a static server:
       
         npm install -g serve
         serve -s build
       
       Find out more about deployment here:
       
         https://cra.link/deployment
       
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       audited 2311 packages in 16.924s
       
       158 packages are looking for funding
         run `npm fund` for details
       
       found 3 moderate severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details
       
-----> Build succeeded!
-----> Discovering process types
       Default types for buildpack -> web
-----> Compressing...
       Done: 146.6M
-----> Launching...
       Released v5

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^4.6.0",
    "flag-icon-css": "^3.5.0",
    "i18next": "^20.3.2",
    "i18next-browser-languagedetector": "^6.1.2",
    "i18next-http-backend": "^1.2.6",
    "jquery": "^3.6.0",
    "js-cookie": "^2.2.1",
    "plotly.js": "^2.2.1",
    "plotly.js-basic-dist": "^2.2.1",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.11.1",
    "react-icons": "^4.2.0",
    "react-plotly.js": "^2.5.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

Answer 1

您需要编写 NPM 和 NODE 版本作为引擎。

以下是您需要添加的内容：

"engines": {
        "node": "14.x",
        "npm": "6.x"
    }

您的 package.json 代码应如下所示：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
 "engines": {
            "node": "14.x",
            "npm": "6.x"
        },
  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^4.6.0",
    "flag-icon-css": "^3.5.0",
    "i18next": "^20.3.2",
    "i18next-browser-languagedetector": "^6.1.2",
    "i18next-http-backend": "^1.2.6",
    "jquery": "^3.6.0",
    "js-cookie": "^2.2.1",
    "plotly.js": "^2.2.1",
    "plotly.js-basic-dist": "^2.2.1",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.11.1",
    "react-icons": "^4.2.0",
    "react-plotly.js": "^2.5.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

注意：

node 和 npm 版本在您的情况下可能不同。您应该编写 npm --version 以获取 npm 的版本，同样键入 node --version 以获取节点的版本。然后在这里添加，你可能只写14.x 不需要写14.2.2（只是一个例子）

不要忘记关闭您的代码 IDE，然后重新启动所有内容。创建一个新版本，然后上传。

大部分 procfile 看起来像：web:node server.js

这里的 server.js 是启动服务器的文件。

Heroku 已部署，应用程序错误“engines.node (package.json): unspecified”

1 个答案:

注意：