<Heroku> 배포 - 1

자 이제 우리는 Building for Production을 할건데요.

project

package.json, package-lock.json, node_modules, .babelrc, .gitignore, .env, .eslintrc.js를 제외하고 모든 파일을 src밑에 넣어줍니다.

youtube
 +|src
    |--ALL THE FILE-- 
   *|app.js
   *|init.js
   *|passport.js
 *|package.json
 

app.js

• views 경로 설정
  view engine 폴더 경로의 default값은 프로젝트 폴더(package.json)가 있는 경로의 views폴더인데 현재 모두 src파일로 옮겼기 때문에 app.js가 있는 경로의 views폴더로 바꿔줍니다.

• static 경로 설정
  static 경로를 expres.static("static")으로 한다는 것은 view engine과 마찬가지로 프로젝트 폴더의 static폴더를 의미하는건데 현재 src안으로 모두 들어갔으므로 path.join(__dirname, "static")으로 바꿔줍니다.

import path from 'path';

app.set('views', path.join(__dirname, 'views'));
app.set('/static', express.static(path.join(__dirname, "static");

init.js

import '@babel/polyfill';

passport.js

현재 상태가 PRDUCTION 이냐 DEV냐에 따라 callback url을 달리해주어야 합니다. 배포 주소에는 heroku를 통해 배포 후 할당 받은 주소를 입력해줍니다.

passport.use(new GithubStrategey({
    clientID: process.env.GH_CLIENT_ID,
    clientSecret: process.env.GH_SECRET,
      callbackURL: process.env.PRODUCTION ? `배포 주소`:"http://localhost:4000/auth/github/callback"
}, githubLoginCallback));

package.json

• build:server
  src폴더 안에 있는 것을 babel로 변환해서 build폴더에 넣어라. src/assets, src/static, src/webpack.config.js는 무시해라 왜냐하면 babel이 변환할 수 있는 파일이 아니니까
  🚨주의 사항: 파일명간에 ,외에 공간이 있어서는 안됩니다.
• build:assets
  src 폴더로 이동해서 webpack파일을 보고 변환해라(scss, es6)
  그리고 src의 static폴더를 복사해서 build에 붙여넣어라. 그리고 src의 views폴더를 복사해서 build에 붙여넣어라
• build
  build:server와 build:assets 명령을 실행하라
• prebuild
  build 명령에 앞서 build 폴더를 지우고 새로 만들어라. build script 실행시 자동 실행됨
• start
  build폴더의 init.js를 실행시킨다. PRODUCTION=true를 해주는 이유는 배포용이기 때문에 파일 크기를 작게 만들어달라는 의미이다.
• prestart
  start 명령에 앞서 npm run build를 실행해라. start script 실행시 자동 실행됨. 이것을 하는 이유는 heroku가 start script만 실행시키기 때문에 npm run build를 먼저 실행시켜서 build폴더를 만들어주기 위함입니다.

{
  "scripts":{
    "dev:server": "nodemon --exec babel-node src/init.js --ignore 'scss'",
    "dev:assets": "cd src && WEBPACK_ENV=development webpack -w",
    "build:server": "babel src --out-dir build --ignore 'src/assets', 'src/static', 'src/webpack.config.js'",
    "build:assets": "cd src && WEBPACK_ENV=production webpack && cp -R static ../build && cp -R views ../build",
    "build": "npm run build:server && npm run build:assets",
    "prebuild": "rm -rf build",
    "start": "PRODUCTION=true node build/init.js",
    "prestart": "npm run build"
  }
}

실행

$npm run build: 빌드 파일 생성
$npm start: 빌드된 폴더의 init.js 실행

혹시 babel 관련 오류가 발생하면 `$npm install @babel/cli`를 터미널에 입력해보세요.