17.0 Building the Backend
-> Heroku를 통해 배포.
-> 배포 하려면 어떤 Node.js 환경에서도 실행될 수 있도록 설정을 바꿔야함.
-> DB도 바꿔야함. DB가 지금은 localhost에서만 작동함.
-> 그리고 파일들을 우리 서버가 아니라 아마존에 올려야함.
-> webpack.config: 우리 코드를 production 방법으로 빌드해야 되고, 코드를 압축해야함.
이번 섹션에서는 실제 서버에서 백엔드를 실행하는 모든 단계를 해볼 것임.
- 우리가 만든 코드를 실행하려면, nodemon을 사용해서 babel-node를 실행함. babel-node는 실제로 서비스 되는 곳이 아니라 개발할 때만 사용되는 목적으로 씀. 왜냐면 babel-node는 나의 최신 JS코드를 실행할 수 있게 도와주기 떄문임. 코드를 바꾸지 않고 babel-node가 우리 코드를 실행해줌. 그치만 babel-node를 사용하면 우리 performance에 문제가 생김. babel-node는 그렇게 빠르지 않음. 그래서 이 init.js를 다른 babel을 이용하여 일반적인 javascript코드로 바꿔야함.
즉, 백엔드의 코드를 완전 안 멋진 옛 코드로. 그래서 이걸 위해서-> babel-CLI를 사용할 것임.(모든 브라우저가 이해할 수 있도록 옛 코드로 변환)
1. babel-CLI
- 설치
npm install --save-dev @babel/core @babel/cli- script 만들기
- 예시
{
"name": "my-project",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"@babel/cli": "^7.0.0"
}
}(전)
- package.json
"scripts": {
"build:server": "babel src/init.js -d build", // src가 아니라 우리는 src/init.js의 코드를 변환하고자 해서 이렇게 적음. -d로 directory지정(빌드한 코드를 어디에 저장할 건지).
"dev:server": "nodemon",
"dev:assets": "webpack"
},-> npm run build:server 를 하면 init.js의 변환된 코드가 들어간 bulid폴더 생성됨.
-> babel-CLI는 예를 들면 babel-node처럼 실행하지 않아. nodemon은 파일을 실행하고 그 파일이 모든 걸 실행함. babel의 경우, 한 파일만 실행하는 것이 아니라, 모든 폴더를 빌드해서 실행해야함.
즉, babel-node는 init만 변환해서 실행하면 init이 관련된 모든 파일을 전부 실행시켰지만, babel-CLI는 init만 변환해서 실행함. 따라서 babel build를 src/init이 아니라 src전체로 해줘야함.
(후)
- package.json
"scripts": {
"build:server": "babel src -d build", // src 전체 코드를 변환해줘야함. -d로 directory지정(빌드한 코드를 어디에 저장할 건지).
"dev:server": "nodemon",
"dev:assets": "webpack"
},-> npm run build:server 를 하면 build 폴더에 변환된 src폴더의 파일들이 생성될 것임. & 이 build는 크기가 커서 .gitignore에 등록해야함
- gitignore
/build- bulid:server할 때, src폴더를 변환했는데 이 때, 백엔드의 폴더만 변환해줘야 하는데 client폴더까지 변환해버림.(client코드는 webpack으로 변환해주기 때문에, babel로 하면 안됨.)
-> 나중에 고칠 거임.
- 변환된 build의 init.js파일 실행하는 script추가. (=babel-node일 때, init.js 실행한 것과 같은 역할임. dev:server와 같은 역할이라 보면됨.)
"scripts": {
"start": "node build/init.js", // 이거 추가 -> 변환된 코드라 굳이 babel-node로 해주지 않아도 됨. babel을 사용하지 않아도 됨.
"build:server": "babel src -d build",
"dev:server": "nodemon",
"dev:assets": "webpack"
},-> npm start
수정사항
- bulid:server할 때, src폴더를 변환했는데 이 때, 백엔드의 폴더만 변환해줘야 하는데 client폴더까지 변환해버림.(client코드는 webpack으로 변환해주기 때문에, babel로 하면 안됨.)
- -> npm start하면
regeneratorRuntime is not defined 에러가 날 것임. ( 이 에러는 async와 await을 사용하려고 했을 때 발생한 에러와 같음.)
즉, 우리 코드가 async와 await을 사용할 때 regenerator가 필요한데 없음.
이 문제는 우리 코드가 async와 await을 사용할 수 있도록 알려줘야함
- build파일에 pug파일이 없어서 넣어줘야함.
17.1 Building the Backend part Two
문제 1: regeneratorRuntime is not defined 에러 고치기
=>
await, async를 사용할 수 없을 때, 나타나는 에러임. 예전에도 이런 오류가 났었음. clent/js에서 났었음. 이에 따라 우리는 client/js/main.js에
import "regenerator-runtime/runtime.js" ;를 해줬음.
이번에는 client폴더가 아닌 src폴더 전체에(정확히는 src를 옛코드로 변환해준 build폴더) await, async가 먹히질 않아서 그럼(최신 코드에서는 뭔가를 import하지 않아도 사용가능하지만 옛 코드로 바꾸면서 뭔가를 import해줘야 함.) 따라서 우리는 init.js에
import "regenerator-runtime/runtime.js" ;를 import해주면 오류 해결 !
이후, 다시 npm run build:server로 새로 추가된 코드가 포함된 뒤, 옛코드로 변환된 src폴더를 만들고, npm run start하면 됨.
이제 babel이 우리 서버에서 실행되지 않고. node.js가 우리 서버에서 실행되고 있게됨. 이제 babel의 도움 필요 없이, node.js가 이 코드를 모두 이해하고 있음.
문제 2: build된 src폴더 즉, 새로 생긴 build폴더에는 views 파일이 생성되지 않음.
=>
답은 server.js에 있음. server.js에서 views의 directory경로를 보면
app.set("views",process.cwd() + "/src/views");//process.cwd: 현재 작업중인 파일 위치.이렇게 되어있음. views폴더는 현재 working directory(=cwd)에서 인데, 그건 node를 실행한 위치를 말함. package.json을 가진 폴더의 위치를 의미하고 root폴더를 말함. build와 src의 바깥 폴더를 말함. 그 뒤에 "/src/views" 이렇게 되어있는데, build의 views는 src/views를 가져와서 사용하고 있음. 따라서 우리는 src/views폴더를 잘 보존하면 됨. 따로 build폴더에 안 넣어줘도 됨.
!) 만약 build폴더에 넣고 싶다면 src/views폴더를 복사하고 build폴더에 넣고,
app.set("views",process.cwd() + "/build/views");로 수정하면 됨.
----------------------------backend build 완료 ---------------------------
\\
----------------------------client코드(assets) build 해야함 -----------------------
다음 영상에서는 클라이언트 코드를 빌드하고 좀 더 프로답게 만들 것임. production을 위해 만들 것임. 왜냐하면 assets/js의 파일들의 코드가 압축되지 않았기 떄문임. production용으로 만들고, 코드도 압축해야ㅕ함. 또한 우리의 빌드 서버는 환경 변수에 접근할 수 있음.(.env에 접근 가능하다는 소리임)
