deploy 1 heroku

이제 서버를 배포해보자.

먼저 해야할 것이 있다. 그 동안 우리는 babel-node를 nodemon으로 실행해왔다.

babel이 알아서 node를 실행시켜온건데 이제 babel-node가 아닌 그냥 node를 사용해야한다.

따라서 우리가 ES6로 만들어온 코드를 Babel을 사용하여 바꿔주어야한다.

 

package.json의 script에 "build:server" : "babel src/init -d build" 를 해주어보자

-d옵션을 주면 그 위에 오는 dir의 이름속에 babel되어진 파일이 들어가게된다.

이렇게만 해주면 init.js만 babel처리가 되고 나머지는 그대로다. 우리가 전에 babel-node src/init.js를 하였는데 이건 node라서 가능했던 것이다. 따라서 "build:server" : "babel src -d build" src폴더 전체를 babel해주자.

 

그럼 우리가 지금까지 작성했던 파일 폴더 전부 build라는 폴더안에 bable 되어있는 것을 확인할 수 있다.

단, pug가 들어있는 views폴더만빼고

 

그리고 "start":"node build/init.js" 를만들어서 init을 node로 실행해보자!!!

 

근데 이러한 오류가떠버렸다..

 

근데 regeneratorRuntime 오류는 전에 본 적이있는데..? 

front에서 async await를 사용하려고 했을 때 났던 오류이다. 이때 우리가

import "regenerator-runtime";를 main.js에 해주고 main.js를 base.pug에서 불러옴으로 인해서 모든 front에서 async와 await을 사용할 수 있도록 해준 적이 있었다. 

 

근데 왜 또 뜬거지? ㅠㅠ 

니꼬쌤 말로는 back에도 한번 더 import "regenerator-runtime";를 해주면 된다고 한다.

init.js맨 위에 해주면  오류가 나지 않고 잘 실행이 된다. 아마 babel-node가 아니고 일반 node라서 그런걸까..? 정확한 이유는 잘 모르겠다.

 

이제 babel이 우리서버에서 실행되지 않고 node가 우리서버에서 실행이 된다!!! 이제 babel의 도움이 필요 없다 왜냐면 node.js가 다 이해하고 있다는 뜻이니까

 

다시 돌아와서 아까 views폴더 빼고 다 잘된 것을 볼 수 있는데 이 이유는

우리가 server.js에서 설정해둔 것 때문에 그렇다.

 

views폴더는 현재 working directory에서(package.json을 갖고 있는 폴더를 의미) src/views를 추가해줬기 때문에

build의 server.js가 알아서 직접 src/views로 이동했기 때문에 정상작동이 잘 된것이다.

 

이제 client도 손을 봐야한다. 우리는 전에 development로 해주었지만 이제는 production을 해줌으로써 압축해주어야한다. webpack.config.json파일에서 전에 적어둔 mode를 지우고 명령어에 적어줌으로 해결해보자

"build:assets":"webpack --mode=production"으로 해주고 

"dev:assets":"webpack --mode=development"로 바꿔준뒤 실행해보자

 

npm run dev:assets

 

npm run build:assets

record.js를 production옵션을 준 것인데 이렇게 바뀐 것을 볼 수 있다. 

그리고 우리가 watch모드도 준 적이 있는데 이건 development모드에서만 watch모드를 true해주어야 한다.

그리고 watch를 명령어 모드에 주자. -w만 붙여주면 된다.

"dev:assets":"webpack --mode=development -w"

 

한번에 babel과 webpack을 해주는 명령어를 만들어 주었다. 이제 heroku를 통해 배포를 해보자!!

https://www.heroku.com

Cloud Application Platform | Heroku

 

여기에 들어가 ID를 만든 뒤 Create app을 해주자.

이제 heroku에 백엔드 서버를 업로드하는 두 가지 방법이 있다.

하나는 Github

다른 하나는 Heroku Git이다. 두 방법을 다 사용해 볼 것이다.

먼저 Heroku git을 사용해보자. heroku를 다운로드하고 터미널에서 heroku login을 적어보자

q이외의 아무키나 누르라고 하는데 아무키나 누르면

브라우저가 열리면서 로그인하라고 한다.

로그인 버튼을 누르면 위와 같은 화면으로 바뀌고 터미널에

로그인 되었다고 표시가 된다.

 

위에 적힌대로 heroku git:remote -a recaptaehyeki를 해주면 연동이 된다.

heroku는 오직 우리의 git history만 본다. 만약 코드를 바꾸고 commit을 안하면 heroku가 우리의 코드를 볼 수가 없다.

따라서 매번 코드를 바꾸면 항상 commit을 해야한다. commit을 하면 heroku가 우리의 코드를 볼 수 있다. 

오직 git이 볼 수 있는 코드만 heroku가 업로드를 한다. (.gitignore은 못읽음)

 

git add 와 commit 그리고 push 를 해주면 되는데 이 때 다른 터미널에 heroku logs --tail을 해주면

현재 진행상황을 로그로 나타내준다.  

오류가 발생하는 것을 확인할 수 있는데 첫 번째로 npm start명령어가 실행되는게 보인다.

heroku는 기본적으로 npm start를 실행한다.

mongodb에 관련해서 오류가 났는데 이 이유는 우리가 DB의 url은 process.env.DB_URL을 사용한다. 하지만

우리는 이걸 .gitignore에 올려두어서 인식을 못한다.

 

우리는 process.env.DB_URL을 설정하는 더 좋은 방법이 있을 것이다.

 

일단 heroku에 우리 서버를 업로드 했다.

git에 add한 것 중 package.json이 있으니 node.js 프로젝트라는 걸 안다. dependency와 devDependency에 있는 모든 걸 설치한다.

그리고 heroku가 build명령어를 자동으로 실행한다. (서버를 빌드하고 assets를 빌드했다.)

그다음 heroku가 npm start도 자동으로 실행한다. 

하지만 우리는 DB.URL이없다. 이 문제를 다음 글에서 해결하려고한다.