heroku에 무료 배포하기 - Node.js(2)

⇩ 이전 게시물

heroku에 무료 배포하기 - Node.js(1)

에러 해결 후, 이전 게시물의 scripts 작성 부분을 수정하였습니다. 

에러 해결방법을 기억하기 위해 에러 해결 과정을 상세히 적었습니다만, 읽으시는 분의 에러 해결에는 그다지 도움이 되지 못할 수도 있습니다. 😀

---

 

에러를 살펴보니 code = h10이라고 되어있다.

router 에러

 

⇩파일을 수정한 다음에는 heroku에 push를 다시 해줘야 한다.

git add .

git commit -m "install heroku config"

git push heroku master

heroku restart

 

문제의 해결 ❶ - heroku-config 설치

 

.env가 제대로 처리되고 있지 않은 듯 하다.

PORT 정보가 .env에 담겨있는데 .env가 heroku에 push 되지 않아

router 문제가 발생하는 것이다.

.env와 같은 local 파일을 heroku에 보내기 위해서 heroku-config를 설치했다.

설치했으면 push도 해준다.

제대로 되고 있는 지 확인하려면 heroku config를 입력한다.

그러면 내 site의 url과 내 .env에 담긴 정보들이 주루룩 뜬다.

그럼에도 에러는 해결되지 않았다.

 

문제의 해결 ❷ - Googling

 전에도 이랬던 기억이 있는데

그때는 heroku-config를 설치한 후에

이렇게만 되있었던 PORT를 

이렇게 수정하니까 잘 작동했었다.

 

하지만 이미 두 조치를 모두 취했는데도

이번에는 에러가 시정되지 않았다.

 

그래서 error code를 바탕으로 구글링 하였다.

대부분의 사람들이 PORT와 관련된 문제로 같은 error를 가지고 있었다.

Stack Overflow에서 가장 많은 호응을 받은 응답은

1. PORT를 수정해보라는 의견

2. heroku restart를 해보라는 의견

이었는데, 두 방법 모두 나의 문제에는 통하지 않았다.

 

문제의 해결 ❸ - error messages 다시 읽기

.env file이나 local file의 push 등에 대해서는 아무 문제가 없어 보였기 때문에

뭔가 다른 문제가 발생해서 그 문제가 router에 까지 영향을 미치는 게 아닐까 생각이 들었다.

그래서 에러를 천천히 읽어보니

script의 명령 진행이 어떤 부분부터 끊겼다는 것을 발견하였다.

그래서 나는

어떤 부분에서 문제가 발생하는 지 알기 위해

위의 scripts를 각각 하나씩 실행시켜서 잘 되는 지를 관찰하였다.

모두 잘 실행이 되었는데도 build 폴더를 열어보니 폴더가 텅 비어있었다.

npm run build:server를 했을때 오류는 발생하지 않았지만 제대로 실행이 되고 있지 않았던 것이다.

--ignore 뒷 부분을 추가하기 전까지는 아무 문제가 없었기 때문에

--ignore 뒷 부분을 삭제하고 다시 실행을 시켜보니 정상적으로 작동했다.

강의에서는 위 script로 정상적으로 build를 해냈기 때문에 어떻게 고쳐야 할지 고민을 하다가

"dev:server" 에서 처럼 무시하고 싶은 항목마다  앞에 일일이 --ignore을 적어주었더니 정상적으로 작동하였다.

gulpfile.babel.js 와 assets 폴더, static 폴더를 제외한

src 폴더 안의 모든 파일이

old js로 번역(babel)되었다.

번역된 파일들은 build 폴더 안에 자리 잡았다.

 

다시 heroku에 push 하고 페이지를 열어보니 정상작동했다.

 

⇩ 배포 완료된 사이트

https://sheltered-taiga-41228.herokuapp.com/

Wheres Miranda? | Where's Miranda