[11] #Bonus Time - 배포하기

2021. 4. 1. 17:40ㆍProjects/유튜브 클론코딩

728x90
반응형

배포하기 전에 빌드하기

 

이제 우리가 만든 것을 빌드(build)해야 한다.

빌드란, 실행가능한 파일로 만드는 것을 말한다.

우리가 작성한 코드를 예전 코드로 변환하는 과정을 거쳐야 실행할 수가 있다.

 

🍫@babel/cli 설치

npm install --save-dev @babel/cli

이 명령어로 @babel/cli를 설치한다.

 

🍫src 폴더 만들어서 넣기

src 폴더를 만든 후, node_modules, package.json, package-lock.json, README, .env, .eslintrc.js, .gitignore만 제외하고 모든 걸 src폴더 안에 넣는다.

 

🍫 .gitignore에 잊지말고 build를 추가해주기

 

🍫 app.js 상단에 @babel/polyfill을 import 해주기

regeneratorRuntime is not defined 라는 에러가 뜬다. 이건 왜 이러냐면 우리가 async function을 사용하기 위해서 이미 설치했던건데  @babel/polyfill을 import해주어야 한다.

app.js 상단에 import "@babel/polyfill"을 써준다.(src 안에 있는 app.js에다가)

 

⭐⭐⭐package.json (윈도우 문법 버전)

"scripts": {

    "dev:server": "nodemon --exec babel-node src/init.js --delay 2 --ignore 'scss' ",

    "dev:assets": "cd src && cross-env WEBPACK_ENV=development && webpack -w",

    "build:assets": "cd src && cross-env WEBPACK_ENV=production && webpack",

    "build:server": "babel src --out-dir build --ignore src/assets --ignore src/static --ignore src/webpack.config.js",

    "copyAll" :"xcopy src\\static build\\static /d /e /h /c /y /i && xcopy src\\views build\\views /d /e /h /c /y /i",

    "build": "npm run build:server && npm run build:assets && npm run copyAll",

    "prebuild": "rd /s \"build\"",

    "tunnel": "lt --port 4000",

    "start" : "PRODUCTION=true node build/init.js"

  },

윈도우 문법으로는 이렇게 작성해야 한다.

 

🍫views 경로 고치기

npm run build한 후 npm start를 해보면 잘 된다..

그러나 localhost로 접속해보면 여기 views 디렉토리에 home이 없다고 나오는데 저 디렉토리에서 home을 찾으려고 하기 때문이다. (package.json이 있는 현재 디렉토리에서 찾으려고 하기 때문) 이제는 /src/views에 있으니 고쳐주어야 한다.

 

*src에 있는 app.js에서 좀 고친다.

*그리고 app.set("view engine", "pug"); 코드 밑에 저 코드도 작성해준다.

app.set("views", path.join(__dirname, "views"));

 

🍫static 경로도 수정해주기

npm run dev:server

 

이제 작동은 하는데 문제는 static도 바깥 폴더 중 static을 찾고 있어

src 안에 있는 static을 찾고 있지 않아(static 안에 있는 js랑 css가 적용이 안되니까 화면이 막 멍청해보인다) - 그 부분도 고쳐준다.

app.use("/static", express.static(path.join(__dirname, "static")));

이렇게 고치고 나면 제대로 나온다.

 

🍫app.js에 있는 @babel/polyfill 코드 부분을 init.js로 옮기기

 

Heroku에 배포하기

이것을 Heroku에 올려보자.

 

🍦 Heroku 설치하기

https://devcenter.heroku.com/articles/heroku-cli#download-and-install

여기 가서 윈도우에 맞게 설치를 해준다.

 

🍦 heroku login - Heroku 로그인하기

그리고 vscode 콘솔에서 heroku login 명령어를 통해서 로그인 한다. (꼭 로그인 해야 한다.)

 

🍦 heroku create - 히로쿠에 앱 만들기

git remote를 해줄 필요 없이 이미 알아서 해줬나보다..

 

🍦 heroku에 push하는 방법 - git push heroku master

우리는 이제 git push origin master라고 했던 것 처럼 git push heroku master라고 치면 히로쿠에 push가 된다.

 

⭐⭐⭐히로쿠에 푸시할 때 주의사항

히로쿠가 리눅스기반이기 때문에 package.json에 명령어를 리눅스 명령어로 바꿔놓아야 한다.

그러므로 아래와 같이 package.json에 리눅스 기반 명령어로 바꾸고

git add. -> git commit -m "" -> git push heroku master

 

"scripts": {

    "dev:server": "nodemon --exec babel-node src/init.js --delay 2 --ignore 'scss' ",

    "dev:assets": "cd src && cross-env WEBPACK_ENV=development && webpack -w",

    "build:assets": "cd src && cross-env WEBPACK_ENV=production && webpack",

    "build:server": "babel src --out-dir build --ignore 'src/assets','src/static','src/webpack.config.js'",

    "copyAll": "shx cp -r src/static build && shx cp -r src/views build",

    "build": "npm run build:server && npm run build:assets && npm run copyAll",

    "prebuild" : "rm -rf build",

    "start": "PRODUCTION=true node build/init.js",

    "prestart" : "npm run build"

  },

 

이거 때문에 처음에 몇시간 동안 오류를 못 해결해서 진짜 힘들었었는데, 배포할때 리눅스 명령어로 바꾸고 그렇게 수정한다음에 바로 git push heroku master라고 하지말고 git add . / git commit -m "어쩌고저쩌고" / git push heroku master라고 해야된다(수정된 부분만 push해야되나보다)

 

⭐⭐⭐build할 때 / 배포할 때 정리

build할 때: package.json의 script부분을 윈도우 명령어로 저장▶ npm run build

배포할 때 : package.json의 script 부분을 리눅스 명령어로 바꾸고 저장 ▶ git add . ▶ git commit -m "어쩌고저쩌고" ▶ git push heroku master

 

⭐⭐⭐그래도 안될때

prettier, eslint관련,nodemon 이 3개 제외하고 devDependencies에 있는 걸 uninstall해주고 dependencies에 다시 install

 

⭐⭐⭐안됐을 때 참고한 사이트

https://devcenter.heroku.com/articles/duplicate-build-version

Application Error (ancient-plateau-21850.herokuapp.com)

 

🍦 .env파일에 작성된 변수를 push 해주기

heroku에 변수를 설정하는 .env 파일이 gitignore에 포함되어있기 때문에 .env파일에서 변수를 지정했었는데 그걸 불러올 수 없으니까 오류가 나는 부분을 수정해주겠다. (히로쿠는 git 기반임)

 

🍦 heroku-config 설치하기

heroku에 변수를 설정하려면 이런게 필요해

heroku - config를 설치해야 한다. (heroku plugins:install heroku-config)

  • 이게 뭘 하는거냐면 heroku config:push 라고 하면 local 파일을 heroku config로 push해주는 것이다.

🍦 heroku config: push하기

heroku config:push하고서 heroku config으로 확인해보면

이렇게 변수가 다 올라갔다.

 

🍦 다 되었다면 주어진 도메인으로 들어가본다

 

🍦 heroku logs --tail로 에러와 현재 상태를 확인 가능

callbackURL을 수정해주고 배포에 맞게 환경변수 코드 추가해주기 

이상태에서 히로쿠사이트에서 회원가입이나 로그인을 하려고 하면 안된다

왜냐하면 callbackURL을 우리가 localhost로 지정을 해놨었기 때문이다.

우리 히로쿠주소로 넣어주어야 하는거지

깃허브 설정에서 developer settings > oauth apps > home page URL을 바꾸고

 

 

그 다음에 passport.js에 가서 코드도 바꿔야 한다.

 

그전에 db.js에 가서

mongoose.connect(

  process.env.PRODUCTION ? process.env.MONGO_URL_PROD : process.env.MONGO_URL,

{

    useNewUrlParser: true,

    useFindAndModify:false

}

);

이렇게 수정한다.

package.json 부분에서 start하면 PRODUCTION 이 true로 되어있음

**배포의 경우라면, MONGO_URL_PROD가 주어지고 그렇지 않다면 MONGO_URL이 주어지지

(이거 mongo atlas부분에서 환경변수 만든 부분이다)

 

passport.use(new GithubStrategy({

    clientID: process.env.GH_ID,

    clientSecret: process.env.GH_SECRET,

    callbackURL: process.env.PRODUCTION

    ? "https://ancient-plateau-21850.herokuapp.com/auth/github/callback"

    : "http://localhost:4000/auth/github/callback"

    }, githubLoginCallback)

    

);

passport.js에서 이부분을 수정한다.(카카오도 마찬가지)

 

에러 해결

1. heroku에 push할 때 에러가 난다면

⭐⭐⭐build할 때 / 배포할 때 정리

build할 때: package.json의 script부분을 윈도우 명령어로 저장▶ npm run build

배포할 때 : package.json의 script 부분을 리눅스 명령어로 바꾸고 저장 ▶ git add . ▶ git commit -m "어쩌고저쩌고" ▶ git push heroku master

 

⭐ package.json 윈도우 명령어

더보기

"scripts": {

    "dev:server": "nodemon --exec babel-node src/init.js --delay 2 --ignore 'scss' ",

    "dev:assets": "cd src && cross-env WEBPACK_ENV=development && webpack -w",

    "build:assets": "cd src && cross-env WEBPACK_ENV=production && webpack",

    "build:server": "babel src --out-dir build --ignore src/assets --ignore src/static --ignore src/webpack.config.js",

    "copyAll" :"xcopy src\\static build\\static /d /e /h /c /y /i && xcopy src\\views build\\views /d /e /h /c /y /i",

    "build": "npm run build:server && npm run build:assets && npm run copyAll",

    "prebuild": "rd /s \"build\"",

    "tunnel": "lt --port 4000",

    "start" : "PRODUCTION=true node build/init.js"

  },

⭐ package.json 리눅스 명령어

더보기

"scripts": {

    "dev:server": "nodemon --exec babel-node src/init.js --delay 2 --ignore 'scss' ",

    "dev:assets": "cd src && cross-env WEBPACK_ENV=development && webpack -w",

    "build:assets": "cd src && cross-env WEBPACK_ENV=production && webpack",

    "build:server": "babel src --out-dir build --ignore 'src/assets','src/static','src/webpack.config.js'",

    "copyAll": "shx cp -r src/static build && shx cp -r src/views build",

    "build": "npm run build:server && npm run build:assets && npm run copyAll",

    "prebuild" : "rm -rf build",

    "start": "PRODUCTION=true node build/init.js",

    "prestart" : "npm run build"

  },

2. connect-mongo 에러가 난다면

**나는 계속 H10, R10 이런 에러가 났었는데, mongo부분의 코드에 에러가 난다고 계속 나왔다.

mongo store 부분에 예전에 6.5 강의 들을때 connect-mongo 가 요즘 잘 안된다 그래서 덧글에 올려진 코드대로 작성을 했었는데 그렇게 하니깐 배포할 때 안되가지고 connect-mongo를 지운다음에 3.2버전으로 낮춰서 다시 깔고 코드를 니코가 작성한 코드대로 작성하니깐 됐다. 

728x90
반응형

'Projects > 유튜브 클론코딩' 카테고리의 다른 글

[11] #Bonus Time - 3) Mongo Atlas  (0) 2021.04.01
[11] #Bonus Time - 2) 영상 시간 안뜨는 버그 해결하기  (0) 2021.04.01
[11] #Bonus Time - 1) AWS S3  (0) 2021.04.01
[유튜브 클론코딩] 10.4 API Adding a Comment part.3  (0) 2021.03.23
[유튜브 클론코딩] 10.3 API Adding a Comment part.2  (0) 2021.03.23

관련글

댓글 0

티스토리툴바