Question

我在使用Heroku成功运行React应用程序时遇到了一些麻烦。它正在成功构建，但在访问URL时我会收到Application Error通知。

我想知道你可以帮忙吗？我已经找到了问题的答案，但没有运气。

以下是有关该应用程序的一些信息我使用create-react-app命令构建了一个应用程序。

我在计算机上运行Node v6.10.2。

要部署应用程序，我从项目文件夹中输入了以下命令：

npm run build

（这创建了一个＆＃34; build＆＃34;文件夹。）

然后我输入了以下命令：

cd build

我创建了一个package.json文件（对于build文件夹），因为没有。

{
  "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

但是，当我访问网址时，它说

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

Answer 1

我联系了Heroku的支持，我把它分类了，所以这里的答案是：

要部署使用create-react-app命令创建的应用程序（在Heroku上），您需要使用自定义buildpack，而不是标准的Node.js。

有关详细信息，请参阅：https://github.com/mars/create-react-app-buildpack#quick-start

所以我需要运行以下命令（在我的项目文件夹中）以设置新的buildpack，然后再次将我的项目推送到heroku：

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git

git push heroku master

Answer 2

在我找了一天搜索这个之后，所以我终于找到了这个create-react-app-buildpack，所以你必须在你的终端做到这一点： -

如果您已有应用程序，请转到您的应用程序文件并运行此命令： heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git。
然后提交你喜欢的内容：git commit -am "create-react-buildpack。
然后推送到您的Heroku仓库git push heroku master。
之后您需要在heroku中重新启动dynos，因此请在终端heroku restart然后heroku open

Answer 3

清晰简洁的 video 解释，使用 Heroku 的“设置”下的 Builpack 功能完美解决您的问题。

https://www.youtube.com/watch?v=tA4Fl1dZgjc

在使用Heroku进行部署但仍然获得应用程序错误时，Reactjs应用程序构建成功

3 个答案: