【发布时间】：2018-01-06 06:01:03
【问题描述】：
让我的 React 应用程序在 Heroku 上成功运行时遇到了一些麻烦。
它正在成功构建，但我在访问 URL 时收到Application Error 通知。
我想知道你能帮忙吗？我已经搜索了我的问题的答案，但没有运气。
以下是有关该应用程序的一些信息
我已经使用create-react-app 命令构建了一个应用程序。
我正在我的计算机上运行 Node v6.10.2。
为了部署应用程序，我从我的项目文件夹中输入了以下命令：
npm run build
（这创建了一个“构建”文件夹。）
然后我输入以下命令：
cd build
我创建了一个 package.json 文件（用于构建文件夹），因为没有。
{
"name": "alien_relatives",
"version": "0.1.0",
"private": true,
"dependencies": {
"classnames": "^2.2.5",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
在构建文件夹中，我运行了以下命令。
git init
git add .
git commit -m "all files"
heroku create alienrelatives
git push heroku master
以下输出到控制台：
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 6.x...
remote: Downloading and installing node 6.11.1...
remote: Using default npm version: 3.10.10
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (new-signature)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote: alien_relatives@0.1.0 /tmp/build_e0b8b2ea1ffb5d7006e8f910f2683e47
remote: +-- classnames@2.2.5
remote: +-- react@15.6.1
remote: ¦ +-- create-react-class@15.6.0
remote: ¦ +-- fbjs@0.8.14
remote: ¦ ¦ +-- core-js@1.2.7
remote: ¦ ¦ +-- isomorphic-fetch@2.2.1
remote: ¦ ¦ ¦ +-- node-fetch@1.7.1
remote: ¦ ¦ ¦ ¦ +-- encoding@0.1.12
remote: ¦ ¦ ¦ ¦ ¦ +-- iconv-lite@0.4.18
remote: ¦ ¦ ¦ ¦ +-- is-stream@1.1.0
remote: ¦ ¦ ¦ +-- whatwg-fetch@2.0.3
remote: ¦ ¦ +-- promise@7.3.1
remote: ¦ ¦ ¦ +-- asap@2.0.6
remote: ¦ ¦ +-- setimmediate@1.0.5
remote: ¦ ¦ +-- ua-parser-js@0.7.14
remote: ¦ +-- loose-envify@1.3.1
remote: ¦ ¦ +-- js-tokens@3.0.2
remote: ¦ +-- object-assign@4.1.1
remote: ¦ +-- prop-types@15.5.10
remote: +-- react-dom@15.6.1
remote:
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 16.7M
remote: -----> Launching...
remote: Released v4
remote: https://alienrelatives.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/alienrelatives.git
caf3245..11c44c2 master -> master
但是当我访问它时显示的 URL
Application error
An error occurred in the application and your page could not be served.
If you are the application owner, check your logs for details.
当我在浏览器中打开开发者工具时，我会在控制台中看到：
(unknown) Uncaught DOMException: Blocked a frame with origin "https://www.herokucdn.com" from accessing a cross-origin frame.
at <anonymous>:1:15
Failed to load resource: the server responded with a status of 503 (Service Unavailable) /favicon.ico
【问题讨论】：
标签： node.js reactjs heroku deployment package.json