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