Youtube Clone Coding (15. DEPLOYMENT)

LeeJaeHoon·2021년 12월 4일
0
  1. 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를 해줘서 잘돌아가면 성공!
  2. 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을 해주면 정상적으로 실행 됨!

0개의 댓글