2017-11-24 3 views
0

서버 측에서 Node + Express를 사용하고 클라이언트 측에서 각도 4를 사용하여 웹 앱을 만들었습니다.Heroku에서 Angular 4 앱을 제작하는 동안 자산이 포함되지 않음

저는 각도 -cli (ng 빌드 --aot -prod)를 사용하여이 응용 프로그램을 로컬로 빌드 할 수 있습니다. 모든 것이 잘 작동합니다. dist 폴더는 모든 css/jss 번들, index.html, favicon.ico 및 assets 폴더가이 dist 폴더에 복사됩니다. 이제

, 나는 자식 푸시를 사용하여 Heroku가에이 응용 프로그램을 호스트하기 위해 노력하고 package.json에 NPM의 설치 스크립트를 사용하여 Heroku가에 직접 짓고 있어요 :

... 
    "scripts": { 
    ... 
    "postinstall": "ng build --aot -prod" 
    }, 
... 

모든 것이 잘 작동하는 것, 그리고 빌드 프로세스가 성공하지만 자산 폴더는 dist 폴더에 복사되지 않으므로 내 앱에서 사용할 수있는 애셋이 없습니다. 즉 앱에 이미지가 제공되거나 표시되지 않습니다. 내가 사용

폴더 구조 :

node_modules 
server 
dist // created on build process 
src 
-- app 
-- assets 
-- favicon.ico 
-- index.html 
-- styles.css 
server.js 
.angular-cli.json 
package.json 
package-lock.json 
+0

앱 서비스 방법에 대해 궁금한 점이 있으십니까? 프론트 엔드와 백엔드를 가리키는 두 개의 도메인이 있습니까? –

+0

서버 측에서 노드 + 표현과 함께 하나의 도메인을 사용하고 있습니다. 정적으로 dist 폴더를 제공하고 있습니다 :'app.use (express.static (path.join (__ dirname, 'dist'))); ' – GCSDC

+0

귀하의 폴더 구조? –

답변

0

몇 시간 동안 주위에 어려움을 겪고 후, 나는 마침내이 문제를 해결하고, 다른 사람을 도울 수 있도록 그래서 내가 여기를 게시하도록하겠습니다.

어리석은 실수였습니다. 오랜 시간이 걸렸습니다.

문제점은 개발을 시작한 이래로 주요 git repo (.gitignore 파일 사용)에서 이미지를 제거했다는 것이 었습니다. 많은 자산으로 이동하고 추적하고 싶지 않았기 때문입니다 git에서 그들 중.

이렇게하면 git을 사용하여 heroku로 파일을 푸시 할 때 repo에 포함되지 않았으므로 복사되지 않았습니다. 거기에는 자산 폴더가 있었지만 비어있었습니다.

그래서 지금은 이미지를 repo에 포함 시켰습니다. (.gitignore에서 규칙을 삭제했습니다.) 이제 모든 것이 올바르게 작동합니다.

관련 문제