[배포] TypeScript + Express 배포하기

 

TypeScript + Express 배포하기

 

---

 

 

 웹 페이지는 html, css, js 이외의 파일은 읽지 못한다. 그러니 내가 짠 코드를 웹 페이지가 읽을 수 있는 파일로 변환한 build용 파일이 따로 있어야 한다. 배포를 하기 위해서는 build 파일들이 있어야 하는 것이다. TypeScript로 작성된 프로젝트를 배포하기 위한 과정을 알아보자.

 

 배포는 클라우드타입에서 진행하였다. (클라우드타입으로 배포하는 법: https://inthedev.tistory.com/57) 사이트에 배포하고 싶은 파일, build 폴더 생성을 위한 명령어, 실행 명령어를 입력해주면 배포가 완료된다.

 

 그 과정은

 

 1. npm ci

 2. tsc : ts 파일을 js 파일로 변환

 3. node app.js : 실행

 

 이 과정을 컴퓨터가 알아서 하도록 script에 적어주면 배포가 된다. 우선 그 전에, dist 폴더가 생성될 수 있도록 tsconfig를 설정해준다.

 

// tsconfig.json

"outDir": "./dist"

 

 tsconfig.json에서 "./dist"를 활성화해준다. 이렇게 해주면 build가 완료된 파일이 /dist 경로에 저장된다. 그리고 dist를 .gitignore에 넣어주어 git에 안 올라가게 해주자. (올릴 필요 없는 폴더니까)

 

// package.json

"scripts": {
  "build": "tsc",
  "start": "cd dist && node app.js"
},

 

 그리고 package.json의 script에 이렇게 작성해준다. build 명령어를 실행하면 ts를 js로 변환해주는 tsc를 실행하고, start 명령어를 실행하면 dist 경로의 app.js를 실행하라는 의미이다.

 

 

 그리고 배포 사이트에 이렇게 입력해준다. 그럼 script에 작성해주었던 명령어가 차례로 실행되며 배포가 완료된다.

 

---

 

 항상 create-react-app으로 개발을 해서 script를 크게 신경써본 적이 없었는데 (딱히 건드릴 일이 없음...) 이번에 배포하면서 처음으로 공부를 해봤다. 배포가 어떤 과정으로 진행되는지 알 수 있어서 좋았음👏

 

 

참고 자료

https://youtu.be/ntFeJ30GE40