Youtube Clone Coding (15. DEPLOYMENT)
- babel node를 사용하여 서버에올리면 느려서 퍼포먼스에 문제가 생길 수 있음 그러므로 babel node대신 babel cil을 써야함
- npm install --save-dev @babel/core @babel/cli
- "build:server": "babel src -d build"
- -d로 특정 directory를 지정 할 수 있다.
- npm run build:server를 해주면 build라는 폴더가 생기고 src에 있던 폴더들을 예전의 자바스크립트 코드로 변경 후 build폴더안에 저장한다.
- 문제점
- src코드를 빌드할때 client 부분 코드도 같이 빌드됨
- 백엔드 부분만 babel로 바꾸는 거니깐 client 코드를 빌드하면 안됨.
- "start": "node build/init.js"를 설정하고 npm start를 한경우 regeneratorRuntime is not defined라는 오류가 발생함
- 해당 오류는 async와 await를 사용할 때 regenerator가 필요한데 없어서 발생하는 오류
- src/init.js 젤위에 import "regenerator-runtime"를 해주고 다시 npm run build:server를 해주면 해결!
- views(pug)폴더는 빌드되지 않음
- 처음에 views를 설정할때 파일 경로 설정을 app.set("views",
${process.cwd()}/src/views
)로 해줘서 views폴더가 빌드되지 않아도 접근 할 수 있음!
- 실제 서비스를 위해서 webpack을 production으로 실행해야함
- production모드란 코드를 압축해주는 것
- "build:assets": "webpack --mode=production"
- 위와 같이 설정하면 production모드로 실행됨
- webpack에 설정해둔 watch:true를 지우고
- "dev:assets": "webpack --mode=development -w"를 해줘야함
- 위의 설정을 마치고 npm start를 해주고 웹서버가 잘 돌아간다면 완료 된거임.
- 요약: "build:server": "babel src -d build"로 src폴더에 있던 코드들을 예전 자바스크립트 코드로 변환해주고 "build:assets": "webpack --mode=production"으로 프론트쪽 코드를 압축해주고 "start": "node build/init.js"로 npm start해줘서 잘 돌아가면 성공!
- "build": "npm run build:server && npm run build:assets"를 설정하고 npm run build를 해줘서 잘돌아가면 성공!
- heroku로 배포하기
- heroku에 들어가서 App만들기
- heroku에 백엔드 서버를 업로드하는 두 가지 방법이 있음
- Github
- Heroku Git
brew tap heroku/brew && brew install heroku
- heroku설치
- 이미 설치되어있으면 다음으로 넘어가도됨
heroku login
- 만든 폴더에들어가서 명령어를 사용하면 됨
heroku login
을 하게 되면 로그인 하기 위해 브라우저를 열려면 아무 키나 입력하라고 뜸
- 아무 키나 입력하면 브라우저가 열리고 로그인 버튼을 누르고 다시 command에 돌어가면 됨
- 돌아간 command에 내 이메일로 로그인 한 게 보일거임
- Logged in as dlwogns3413@naver.com
heroku git:clone -a herokuAppName
herokuAppName
에는 자신이 heroku에서 app을 만들 때 적은 appname을 쓰면 된다.
- 해당 명령어를 쓰면 heroku remote 하나를 얻음
- git에서 add, commit 등등을 하고 push를 heroku에 할 수 있다는 뜻
- heroku logs —tail
- 이 command를 통해 server나 Heroku의 로그를 실시간으로 볼 수 있게 해줌
git push heroku master
- 해당 명령어를 입력하고 heroku logs —tail로 로그를 보면 에러가 나있음
- heroku가 보는 모든 파일은 Github가 보는 파일임
- github에 .gitignore로 인해 .env파일이 안올라 갔기 때문에 process.env.DB_URL같은 코드를 heroku는 읽을 수 없는 것임
- 해결방법
- Mongo Atlas에서 새 프로젝트를 만든다
- 일단 다 free로 !
- 지역은 aws의 North Virginia로 선택
- 설정 후 cluster생성하면 된다.
- 만들어지면 connect 버튼을 눌러준다.
- ip주소는 모두 접속 가능하게 설정
- username과 password설정하기
- password는 나중에 써야하니깐 꼭 기억하고 있기 (랜덤으로 생성해도 됨)
- 설정 다 했으면 choose a connection method선택
- connect your application선택하기
- 선택하면 DB_URL이 나올 거임!
- mongodb+srv://leejaehoon:@cluster0.rhtjg.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
- heroku에서 만든 앱으로 이동해서 settings로 이동
- Reveal config Vars 클릭
- 여기서 변수를 추가 할 수 있음
- key , value가 있는데 key에는 변수명이 value에는 변수 값이 들어 가야함
- key ⇒ DB_URL , value ⇒ mongodb+srv://leejaehoon:@cluster0.rhtjg.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
- value에서 에 설정한 password를 넣어줘야함
- DB_URL뿐만아니라 COOKIE_SECRET도 변수에 추가 해 줘야 한다
- COOKIE_SECRET의 value로는 아무 문자열을 적어준다.
- GH_CLIENT, GH_SECRET도 설정 해준다.
- 해결을 한 후 heroku에가서 open app을 하면 계속 로딩만 됨
- heroku logs —tail로 가서 log를 보면 web processrk PORT와 연결하는 데 실패 했다고 뜸
- Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
- heroku가 우리가 설정한 PORT가 아닌 heroku가 랜덤으로 PORT를 설정하기 때문임
- PORT를 const PORT = process.env.PORT || 4000와 같이 설정한후 git add, commit한후 git push heroku master을 해준다
- push를 해준후 다시 heroku에 들어가 open app을 해주면 정상적으로 실행 됨!