Herokuでデプロイしてもアプリケーションエラーが発生した場合、Reactjsアプリケーションのビルドに成功しました

Question

私のReactアプリケーションを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

create-react-appコマンドで作成されたアプリケーション（Heroku上）を展開するには、標準のNode.jsではなくカスタムのビルドパックを使用する必要があります1。詳細については

は、以下を参照してください。

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ので、あなたのターミナルでこれを行う必要が見つけた後： - あなたのAPに

1. ゴーplicationファイルを開き、すでに存在するアプリケーションの場合はこのコマンドを実行してください： 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を押してください。あなたの答えのための
あなたはHerokuの中であなたのdynosを再起動する必要がその後
4. ので、あなたのターミナルで次のコマンドを実行し、その後heroku restartheroku open