인프런 커뮤니티 질문&답변

yuri lee님의 프로필 이미지

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

안녕하세요. heroku에 deploy를 하려고 하는데...주소를 어디다가 입력해야 할까요?ㅜㅜ

20.03.05 21:09 작성

·

751

0

mlab에 데이터베이스를 만들고 url을 형성하였습니다.

이 부분에 url을 삽입하면 되나요? ㅠㅠ mongoURI :"~~~~"

헷갈려서 질문드립니다...몽고디비는 로컬에서 연결하여 썼는데...

deploy하려면 prod에 이렇게 url을 넣는게 맞나요?...

항상 좋은 강의 들려주셔서 감사합니다...ㅠㅠ답변부탁드려요!

그리고 헤로쿠 연결을 할때 이런 H10오류코드가 발생하는데..

procfile파일을 따로 추가해줘야 하나요?

node server/index.js

답변 17

0

wxd8339님의 프로필 이미지

2022. 05. 11. 18:52

덕분에 저도 해결했어요 감사합니다ㅓ!~!~!

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 10. 23:08

와~선생님 이제야 제대로 작동하네요! https://agile-peak-59602.herokuapp.com/

너무 감사드려요 ㅠㅠㅠㅠ

사실 선생님께서 주신 파일 보고서도  계속 사투를 벌였거든요.  ffmpe 이게 되었다가 안되었다가 하는데,,,이건 패키지가 불안정해서 그런건가요? 썸네일 오류가 떠서 ,,화나서 잠깐 쉬고있었는데 좀 있다가 하니까 또 되고 그러더라구요 ㅠㅠㅠㅠ

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 09. 23:28

안녕하세요 선생님! 메일 드렸습니다! 확인 부탁드려요 ㅎㅎ...정말 감사합니다 ㅠㅠ

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

2020. 03. 09. 23:02

유리씨 안녕하세요 ! 

우선 제 파일을 드릴게요 ~! 

아 여기 파일은 첨부가 안되네요   혹시  제 메일로 메일 한통 주시면 제가 만든 제 파일을 드릴게요 

그게 더 나을것 같아서 

우선  중요한 부분만 사진을 찍었어요 

제가 Landing Page 쪽만 저렇게 분기 처리 해놨어요 ^^ 

저러한 부분들 다 바꾸셔서 해주시면 됩니다. 

제 컴퓨터에서는 됐는데 혹시 아직도 안되신다면   aws에 s3 나  cloudinary에 파일을 올려서

그곳에서 가져오게하는 방법도 좋은 방법입니다 ~!   

제 메일은 smileajw1004@gmail.com입니다.

안되면 다시 알려주세요 ~ ! 

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 09. 02:07

네! 당연하죠 :) 

봐주시고 답변 부탁드려요..ㅎㅎ!!

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

2020. 03. 08. 19:01

유리씨  제가 내일 저녁에 코드 다시 봐드려도 될까요 ~ ?   

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 07. 21:50

수정 전에는 push 는 되긴 했는데...

{ 헤로쿠에서 얻은 url }/uploads/thumbnails/thumbnail-1583544959911_F201308021823010_1.png

<img style={{ width: '100%' }} src={`https://agile-peak-59602.herokuapp.com/${video.thumbnail}`} alt="thumbnail" />

이런식으로 주소를 바꿨더니...ㅜㅜㅜ 

video 가 undefined되었다고 하네요ㅠㅠㅠ

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 07. 21:48

왜 git push heroku master이 과정이 안먹히는지...아예 push 자체도 실패한 상황이예요😅😅😅😅

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 07. 21:47

 선생님께서 좋은 강좌 올려주셔서..보고 따라할 뿐인데요 뭐 ㅎㅎㅎ

네네 ! 처음 쌤께서 말씀해주신 내용은 이미 다 완료한 상태입니다! 깃헙에도 있습니다 :)

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

2020. 03. 07. 21:40

토요일 인데도 굉장히 열심히 하시네요 ^^ 

우선  지금 아예 push 자체가 실패한 상황이신가요 ? 

혹시  procfile 이런식으로 올려주셨나요 ~~ ? 

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 07. 19:16

선생님!..로그를 자세히 보니까

<img src={`https://agile-peak-59602.herokuapp.com/${video.thumbnail}`} alt="haha" />

여기 때문에 에러가 발생한 것 같아요 ㅠㅠ

어떻게 해결해야 하나요?,,제가 경로를 잘못 넣은 건가요? ㅠㅠㅠㅠㅠㅠ

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 07. 19:04

안녕하세요. 선생님 ㅠㅠㅠㅠ

선생님이 알려주신 방법대로 그대로 진행했습니다. 

하지만 또 몇가지 문제로...제대로 작동하지 않습니다......한번 봐주실 수 있나요?

일단 캡쳐를 했는데, 깃허브에도 올렸으니..봐주세요! ㅠㅠㅠㅠㅠ수고스럽게 만들어 정말 죄송하네요 :-(

우선 git rm yarn.lock , git rm package-lock.json  삭제하고 web: node server/index.js  추가하였습니다. 

보시다시피 잘 들어갔습니다...

또한 여기 보면 알맞게 세팅이 되었습니다.

git push heroku master   과정에 에러를 확인하였는데

이렇게 뜨더라구요. 그래서 help doc에 들어가 확인 후 

그래서 제 해당 npm version npm version 을

같게 넣어주었는데..

계속 똑같은 에러가 발생합니다...

이제 push가 아예 안되니까...들어가지질 않네용 ㅠㅠurl도

그리고 현재 이런식의 리엑트 방식의 코딩인데

로컬 개발 시 넣는 주소와, 배포 주소시 넣는 주소를 함께 넣고 싶거든요 ㅠㅠ

그래야 비교하면서 편할 것 같아서요. 그래서 이 방법을 사용하려 했는데

먹히지가 않네요 ㅠㅠㅠ이부분은 어떤식으로 해야할까요? 

답변 부탁드립니다! ㅠㅠㅠㅠ

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

2020. 03. 07. 10:43

아 그리고  만약에   썸네일이 생성이 되면 

localhost:5000/uploads/thumbnails/thumbnail-1583544959911_F201308021823010_1.png

이런식으로 가는게 아니구요   

헤로쿠 서버로 이미지가 올라가기에 

{ 헤로쿠에서 얻은 url }/uploads/thumbnails/thumbnail-1583544959911_F201308021823010_1.png

이런식으로 경로를 찾아주셔야 되요 ! 

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

2020. 03. 07. 10:40

우선   현재  mongodb 는    Atlas  Cloud를 쓰고 있기 때문에  Deploy 이후에도  같은 DB를 갖고 있습니다  .

그래서 지워지거나 이런것은 없구요..  

아마 지금 Heroku를 통할때  비디오를 업로드 하지 못하는 이유는   ffmpeg가   heroku 서버에 다운받아져있지 않아서 입니다.

저도 좀 시간이 걸려서 해봤는데요. 원래 항상 AWS를 이용해서 하다보니 ....

순서를 알려드릴게요 !  

1.     git rm yarn.lock

git rm package-lock.json

이 명령어 들을 치셔서   우선은  yarn 파일은 지워주세요 ~ 

2. 그리고 혹시나      heroku logs --tail 했는데   서버가 죽어있으면   heroku restart를 해주시고요  

3. Procfile   이라는 파일을 root directory에  만드세요     그리고    그 파일안에   

  web: node server/index.js

    이거를 붙여 넣기 해주세요 

4. 

heroku buildpacks:add https://github.com/jonathanong/heroku-buildpack-ffmpeg-latest.git

이 커맨드를 치셔서  ffmpeg 를   헤로쿠 서버에 적용을 시키시고 

5.  다시   heroku를  deploy 하셔야 해요 

git add .

git commit -am " redeploy" 

git push heroku master 

이거 한다음에 하시면 됩니다 .

막히는건 다시 질문 주세요 ~ ! 

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 06. 18:22

로컬에서는 이렇게 잘 작동합니다..ㅠㅠ

0

yuri lee님의 프로필 이미지
yuri lee
질문자

2020. 03. 06. 03:57

아..정말 감사합니다 :)

해당 유튜브 영상 보고 따라해서 다행스럽게

헤로쿠에 deploy하였습니다. 

근데 몽고디비에 있던 비디오 데이터들이 리프레쉬 되는 건가요?

로컬 테스트 시 2개의 비디오를 올렸었는데

헤로쿠로 들어가면 다 없어지더라구요 ㅠㅠ

그리고 헤로쿠 첫 화면이 로그인된 화면으로 나오네요...비디오 업로드도 안되구요..ㅠㅠㅠㅠ아예 작동이 안되요...

로컬에서 테스트할 때는 잘 되었는데... 헤로쿠 연결 후에 먹통이 됬네요ㅠㅠㅠ 왜 그런지 잘 모르겠어서 댓글 답니다...바쁘실텐데 죄송해요 :-(

꼭 답변 부탁드립니다 ㅠㅠ

소스코드는 여기 있습니다

https://github.com/leyuri/youtube

0

John Ahn님의 프로필 이미지
John Ahn
지식공유자

2020. 03. 05. 23:06

안녕하세요 ^^   503 에러가 뜨는거 보니깐  서버가 연결이 안된것 같네요 ^^     

우선  제가 Heroku로  Deploy 하는거 

영상 찍어 둔게 있거든요  ~ 

https://www.youtube.com/watch?v=qdoiwouykAg

이거 한번 보시면 좋을것 같아요 ^^   
mongoDB 연결하려면   그  Heroku 사이트에서 Settings 부분에 가면  정보 넣는곳이 있어요 ~ 
이 영상에 다 나온거 따라하시면 돼요 ~  따라 하시다가 안되는 부분 다시 한번 질문 주시면 감사하겠습니다 ^^!! 

yuri lee님의 프로필 이미지

작성한 질문수

질문하기