Reactjs应用程序建立成功的Heroku与部署时，但仍然得到应用程序错误

Question

我有一点麻烦我的申请做出反应与成功运行的Heroku。 它正在成功构建，但在访问URL时即时通​​知Application Error。

我想知道你能有所帮助。我已经搜索了我的问题的答案，但没有运气。

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

我在我的电脑上运行的节点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 

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所以你必须要做到这一点在你的终端： -

1. 转到你的AP折叠文件并运行这个命令，如果你已经存在应用程序： heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git。
2. 然后提交你喜欢的东西：git commit -am "create-react-buildpack。
3. 然后推到你的Heroku回购git push heroku master。
4. 后，你需要重新启动DYNOS中的Heroku所以在你的终端heroku restart运行此命令，然后heroku open