babel-cli && build

일단 유튜브 클론과정은 거의 끝났다 ~

내가 직접 몇개의 라우터를 더 만들 예정이고~ 홈페이지 디자인도 손보고~ 몇가지 자바스크립트도 추가할예정이고~

로직도 손보고 있다. 마지막 챌린지였던 댓글 삭제기능은 구현되었고~ 그런데 포스팅을 못했다..

포스팅할게 너무 밀려있다.. ㅠㅠ 차분히 하자..

 

현재는 개발자 모드로 개발을 하고 있었고 이제 실제 배포를 해볼차례이다.

Heroku를 통해 배포를 한다.

Heroku란 무엇인가~

Heroku는 java, node.js, python등 여러 언어를 지원하는 웹 어플리케이션 배치 모델로 사용되는  클라우드 paas이다.

 

paas?

Platform as a Service- 서비스형 플랫폼 : 클라우드 컴퓨팅 서비스 분류 중 하나.

일반적으로 앱을 개발하거나 구현할 때, 관련 인프라를 만들고 유지보수하는 복잡함 없이 애플리케ㅔ이션을 개발, 실행, 관리할 수 있게 하는 플랫폼을 제공한다. Saas의 개념을 개발 플랫폼에도 확장한 방식으로, 개발을 위한 플랫폼을 구축할 필요 없이, 필요한 개발요소를 웹에서 쉽게 빌려쓸 수 있게 하는 모델이다.

 

구조가 복잡하고 규모가 크며 원하는데로 사용할 수 있는 서비스인 laaS(infrastructrue as a Service)도 있다.

 

먼저 해야할 작업은 어떤 node.js환경에서도 서버가 실행될 수 있도록 설정을 해줘야 한다.

데이터베이스도 현재는 localhost에서 실행되고 있어 진짜 db라고 볼 수 없다.

그리고 업로드되는 파일들을 서버가 아닌 amazon에 올리도록 한다. 

요번 작업으로 실제 서버에서 백엔드를 실행하는 모든 단계를 해보도록 한다~ 굳

 

시작해보자

 

첫번째로 현재 nodemon을 사용해 babel-node를 실행하고 있다.

babel-node는 개발할때 사용되는 목적을 갖고 있다. 단점은 빠르지 못하다는 것이다.

 

src/init.js를 nomal javascript 코드로 바꿔야 한다.

이 작업을 위해 babel CLI를 사용한다.

npm install --save-dev @babel/cli

npm을 통해 먼저 설치해주자~

 

설치가 완료되면 package.json에서 script하나를 더 작성해준다.

여기서 -d는 build한 코드를 저장할 디렉토리를 지정하는 것이고 build디렉토리라고 알려주는 것이다.

npm run build:server로 실행해주면~

이렇게 폴더가 생성이 된다. 그리고 init.js파일만 생성이 되었고 old javascript 코드로 작성 되어 있다.

babel cli는 nodemon처럼 실행하지 않는다. 기존 nodemon은 init.js파일을 실행하면 그파일이 다른 모든 모듈들을 실행했다.

babel cli는 한파일만 실행하는 것이 아닌 모든 폴더를 빌드해서 실행해야 한다.

 

build폴더를 삭제하고 다시 설정해주자. src폴더안을 모두 빌드 해야한다.

간단하다 그냥 init.js를 삭제하고 src폴더를 전체 빌드해주도록 하자 다시 실행!

다시 script를 실행해주면 빌드 폴더안에 src폴더의 모든것이 빌드된 것을 볼 수 있다. (.gitignore에 추가해주자~ 공개할 필요는 없음)

모든 파일들을 보면 코드들이 old하게 변해 있다,~~~ 주의할 점은 이 프로젝트는  webpack을 사용하고 있다는 점이다.

front쪽은 이미 webpack을 통해 변환이 되고 있기 때문에. client폴더는 build하면 안된다. 이부분은 뒤에 바꾸자.

스크립트 하나를 더 작성해준다. 기존 개발모드에서는 babel을 이용해 코드를 변환해주었으므로 babel-node로 exec 해줬다.

그러나 이미 babel-cli를 이용해 old코드로 변환이 되었기 때문에 그냥 node로 시작해주면 된다.

npm start~!~!~!

에러 뿜! regeneratorRuntime이 정의되지 않았단다.. 이거 front에서 봤던 에러다 async await에 대한~~

그리고 한가지더! 전부다~ 빌드된줄 알았는데~! view폴더가 빌드 폴더안에 없다.... pug는 빌드되지 않았다.

 

하나씩 고쳐보자 앞서 regeneratorRuntime의 경우 init.js에 import하면 된다. 그리고 다시 빌드해준다.

그리고 다시 start해보면~~.. 주의하자 개발모드의 서버를 실행해 놓으니 포트가 이미 사용중이란다.ㅋㅋㅋ 서버꺼주고

다시 시작해보면

잘 돌아간다~

사이트 접속을 해보면~

정상적으로 돌아가고 있다.~ 근데 .. pug가 빌드되지 않았는데 왜 돌아가는거지???

답은 server파일에 있다..

view를 설정하는 부분에 current working directory의 의미가 node를 실행한 폴더를 의미한다. package.json을 갖고 있는 root폴더를 말하는데 빌드폴더의 바깥에 위치하고 있다. 이말인 즉슨~ 빌드의 backend가 직접 root폴더의 src/views로 이동해서 찾아 냈기 때문이다. 문제없이 잘 돌아간다. 근데 이렇게 하면되는게 맞나?ㅋ

이렇게 백엔드 서버를 빌드했다~ 아직 client 코드를 빌드하고 수정해야하고 devel이아닌 production을 위해 만들어준다.