React 구성 요소가있는 루비 온 레일스 프로젝트를 Heroku에 배치

Question

Node.js 프런트 엔드를 Heroku으로 사용하여 Ruby on Rails 애플리케이션을 배포하려고합니다. 나는 점점 해요 :

여기 내 Procfile입니다 :

2016-07-13T05:29:29.266840+00:00 heroku[api]: Release v28 created by wylliamjudd@gmail.com 
2016-07-13T05:29:29.266840+00:00 heroku[api]: Deploy 7d61777 by wylliamjudd@gmail.com 
2016-07-13T05:29:29.456774+00:00 heroku[slug-compiler]: Slug compilation started 
2016-07-13T05:29:29.517376+00:00 heroku[web.1]: Restarting 
2016-07-13T05:29:29.518479+00:00 heroku[web.1]: State changed from up to starting 
2016-07-13T05:29:32.421302+00:00 heroku[web.1]: Stopping all processes with SIGTERM 
2016-07-13T05:29:33.846617+00:00 heroku[web.1]: Process exited with status 143 
2016-07-13T05:29:41.586027+00:00 heroku[web.1]: Starting process with command `npm start` 
2016-07-13T05:29:43.343250+00:00 app[web.1]: 
2016-07-13T05:29:43.343268+00:00 app[web.1]: > collectize@1.0.0 start /app 
2016-07-13T05:29:43.343269+00:00 app[web.1]: > node ./app/assets/javascripts/bundle.js 
2016-07-13T05:29:43.343269+00:00 app[web.1]: 
2016-07-13T05:29:43.513547+00:00 app[web.1]: 
2016-07-13T05:29:43.520060+00:00 app[web.1]:  at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:88:4) 
2016-07-13T05:29:43.520063+00:00 app[web.1]:  at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:43:10) 
2016-07-13T05:29:43.520063+00:00 app[web.1]:  at Module._compile (module.js:456:26) 
2016-07-13T05:29:43.532480+00:00 app[web.1]: npm ERR! This is most likely a problem with the collectize package, 
2016-07-13T05:29:43.535942+00:00 app[web.1]: 
2016-07-13T05:29:44.242442+00:00 heroku[web.1]: Process exited with status 1 
2016-07-13T05:29:44.280956+00:00 heroku[web.1]: State changed from starting to crashed 
2016-07-13T05:29:44.282455+00:00 heroku[web.1]: State changed from crashed to starting 
2016-07-13T05:29:57.352852+00:00 heroku[web.1]: Starting process with command `npm start` 
2016-07-13T05:29:59.471893+00:00 app[web.1]: 
2016-07-13T05:29:59.471938+00:00 app[web.1]: > collectize@1.0.0 start /app 
2016-07-13T05:29:59.471940+00:00 app[web.1]: > node ./app/assets/javascripts/bundle.js 
2016-07-13T05:29:59.471943+00:00 app[web.1]: 
2016-07-13T05:29:59.650297+00:00 app[web.1]: 
2016-07-13T05:29:59.654711+00:00 app[web.1]: /app/app/assets/javascripts/bundle.js:88 
2016-07-13T05:29:59.655117+00:00 app[web.1]:  $(document).ready(function() { 
2016-07-13T05:29:59.659133+00:00 app[web.1]:  at Object.<anonymous> (/app/app/assets/javascripts/bundle.js:88:4) 
2016-07-13T05:29:59.659135+00:00 app[web.1]:  at __webpack_require__ (/app/app/assets/javascripts/bundle.js:20:30) 
2016-07-13T05:29:59.659138+00:00 app[web.1]:  at Module.load (module.js:356:32) 
2016-07-13T05:29:59.659139+00:00 app[web.1]:  at Function.Module._load (module.js:312:12) 
2016-07-13T05:29:59.659140+00:00 app[web.1]:  at Function.Module.runMain (module.js:497:10) 
2016-07-13T05:29:59.659141+00:00 app[web.1]:  at startup (node.js:119:16) 
2016-07-13T05:29:59.672227+00:00 app[web.1]: npm ERR! node v0.10.30 
2016-07-13T05:29:59.672464+00:00 app[web.1]: npm ERR! npm v2.1.18 
2016-07-13T05:29:59.672884+00:00 app[web.1]: npm ERR! code ELIFECYCLE 
2016-07-13T05:29:59.673045+00:00 app[web.1]: npm ERR! collectize@1.0.0 start: `node ./app/assets/javascripts/bundle.js` 
2016-07-13T05:29:59.673873+00:00 app[web.1]: npm ERR! This is most likely a problem with the collectize package, 
2016-07-13T05:29:59.674006+00:00 app[web.1]: npm ERR! not with npm itself. 
2016-07-13T05:29:59.674125+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system: 
2016-07-13T05:29:59.674412+00:00 app[web.1]: npm ERR! You can get their info via: 
2016-07-13T05:29:59.674578+00:00 app[web.1]: npm ERR!  npm owner ls collectize 
2016-07-13T05:29:59.674919+00:00 app[web.1]: npm ERR! There is likely additional logging output above. 
2016-07-13T05:29:59.677307+00:00 app[web.1]: 
2016-07-13T05:30:00.517992+00:00 heroku[web.1]: State changed from starting to crashed 
2016-07-13T05:30:00.501781+00:00 heroku[web.1]: Process exited with status 1 
2016-07-13T05:30:01.842475+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=collectize.herokuapp.com request_id=111967a3-b265-4447-8e7e-da8a723b5b48 fwd="24.176.249.167" dyno= connect= service= status=503 bytes= 

:

가 여기 내 Heroku가 로그의

{ 
    "name": "collectize", 
    "version": "1.0.0", 
    "description": "[Heroku link][heroku]", 
    "main": "index.js", 
    "directories": { 
    "doc": "docs", 
    "test": "test" 
    }, 
    "engines": { 
    "node": "4.1.1", 
    "npm": "2.1.x" 
    }, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "postinstall": "./node_modules/.bin/webpack" 
    "start": "node ./app/assets/javascripts/bundle.js" 

    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/winterblack/Collectize.git" 
    "start": "web:bundle exec thin start -p $PORT" 

    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "bugs": { 
    "url": "https://github.com/winterblack/Collectize/issues" 
    }, 
    "homepage": "https://github.com/winterblack/Collectize#readme", 
    "dependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "flux": "^2.1.1", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "react-router": "^2.5.2", 
    "webpack": "^1.13.1" 
    }, 
    "devDependencies": {} 
} 

:

여기

web:bundle exec thin start -p $PORT 

내 package.json의 m y를 로컬 컴퓨터 나 실행해야합니다

~$ bundle install 
~$ npm install 
~$ webpack 
~$ thin start 

내가 Heroku가 내 React 구성 요소를 얻을하기 위해 node bundle.js를 실행해야해야합니까? 그렇다면 왜 내 컴퓨터에서 그렇게해야합니까? Heroku에서 일어나는 일과 내 로컬 컴퓨터에서 일어나는 일과의 차이점에 대한 설명이 필요합니다.

로그에이 줄 중요한 것 같다

/app/app/assets/javascripts/bundle.js:88 
$(document).ready(function() { 

나는 자바 스크립트 (따로 디버깅에서) Node.js를 가진 파일을 실행하지 거의 없어요; 나는 거의 항상 HTML의 웹 애플리케이션에서 JavaScript를 사용한다. 로컬에서 node bundle.js을 실행하고 ReferenceError: $ is not defined을 얻었습니다. 나는 그것을 document.addEventListener("DOMContentLoaded",으로 바꾸려고 시도했다. 그러나 그 다음 나는 문서에 대한 동일한 오류가 정의되지 않았다.

나는 정직하게 여기에서 어디로 가야할지 모른다. Heroku가 node bundle.js를 실행해야하는 이유 또는 이해 여부를 이해할 수 없습니다.

나는 Procfile을 삭제하고 내 package.json에 시작 스크립트로 "bundle exec thin start -p $PORT"을 넣으려고했는데 실제로는 내 웹 사이트를 "위"로 만들었지 만 React 구성 요소는 없었기 때문에 완전히 비어있었습니다.

Answer 1

분명히해야 할 일은 내 nodejs buildpack을 삭제하고 색인 1로 readd를하는 것뿐이었습니다. 제가했을 때 제 웹 사이트가 즉시 작동하기 시작했습니다. 그럼 내 package.json에서 시작 스크립트를 삭제하고 웹 사이트가 여전히 작동합니다. 그럼 내 procfile을 삭제하고 웹 사이트는 여전히 작동합니다.

유일한 문제는 빌드 팩의 순서이며 procfile은 필요하지 않으며 시작 스크립트가 필요하지 않습니다.

Answer 2

나는 Heroku를 통해 favicon을 포함해야한다는 것을 알았습니다. 그렇지 않으면 응용 프로그램이 중단됩니다.

은 <head>이 포함 :

<link href="/images/favicon.png" rel="shortcut icon" type="image/png"/> 

경로, 파일 이름을 조정하고 그에 따라 입력합니다.

Answer 3

Heroku는 Rails 백엔드 또는 Node.js 동형 프론트 엔드를 제공하도록 설정되었습니다. 같은 앱에서 둘 다 할 수는 없습니다.

1. 두 개의 앱을 사용하십시오. myapp-api.herokuapp.com은 Rails이고 myapp-web.herokuapp.com은 React isomorphic입니다. 나는 개인적으로 정적 호스트 서비스 인 netlify.com에있는 React 프론트 엔드를 호스팅하고 있습니다.

2. 빌드 중에 webpack을 사용하여 빌드하고 Rails에서 정적 파일을 제공하십시오. webpack-rails는 유망 해 보인다.

nodejs buildpack을 제거하고 프론트 엔드 서비스 방법을 결정하십시오. 별도의 앱 또는 정적 빌드.