서버 개발부터 배포까지(1): typescript 설정

 

동아리에서 진행하는 3주간의 프로젝트에서 서버 개발을 담당하게 되었다.

서버 개발은 처음이라 시행착오도 굉장히 많았는데, 그래서 내가 겪었던 오류와 해결책들을 정리해보고자 한다!

 

협업에서는 typescript로 개발하는것이 유지, 보수에 좋다고 하여 우리도 typescript를 사용하기로 했다.

그리고 디렉토리 구조가 복잡해질 것을 대비해 절대경로를 사용하기로 하였다.

그런데 typescript와 절대경로를 사용하니 예상치 못한 여러 에러들에 부딪혔다.

결론부터 말하자면 결국 우리는 절대경로를 포기하였다ㅠㅠㅠ

그 이유는 아래에서 설명할 것이다.

 

1. tsconfig.json 설정하기

typescript를 사용하기 위해서는 tsconfig.json을 작성해주어야 한다.

우리 프로젝트에서는 다음과 같이 tsconfig.json을 설정해주었다.

{
	"compilerOptions": {
    	"target": "es6",
        "module": "commonjs",
        "pretty": true,
        "allowJS": true,
        "sourceMap": "true",
        "outDir": "./dist",
        "noEmit": false,
        "moduleResolution": "node",
        "typeRoots": [
          "./src/types/express.d.ts",
          "./node_modules/@types"
        ],
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "tests"]
}

이 외에 별도로 eslint와 prettier를 설정해주어 협업할 때 사소한 conflict가 발생하지 않도록 하였다.

 

2. nodemon 설정하기

리액트로 웹 사이트를 개발해본 경험이 있다면 알겠지만, 로컬에서 작업할 때 수정사항을 저장하면 바로 화면에 반영되는 것을 볼 수 있었을 것이다.

하지만 node.js로 서버를 개발하는 경우 수정사항을 저장한다고 해서 바로 반영되는 것이 아니라, 실행되던 것을 멈추고 재실행 해야지 반영이 된다.

이것이 개발할 때는 아주아주 귀찮은 부분이기 때문에 nodemon을 사용하여 수정사항이 바로 반영될 수 있도록 하였다.

이를 위해서는 먼저 nodemon을 설치해야 한다.

npm i -D nodemon

그 후 프로젝트 폴더의 root에서 nodemon.json을 생성하여 nodemon에 대한 설정을 해주어야 한다.

{
  "watch": [
    "src",
    ".env"
  ],
  "ext": "js,ts,json",
  "ignore": [
    "src/**/*.spec.ts"
  ],
  "exec": "ts-node  --transpile-only ./src/index.ts"
}

우리는 typescript로 개발을 진행하였기 때문에 ts-node로 실행하도록 설정해주었다.

nodemon 설정이 끝났다면 이제 package.json에 가서 scripts 설정을 바꿔주어야 한다.

"scripts": {
    "dev": "ts-node src",
    "build": "tsc -p tsconfig.json",
    "test": "nodemon",
 },

그러면 이제 npm run test(or yarn run test)를 터미널에 입력하면 nodemon으로 실행이 될 것이다!!

 

3. typescript에서 절대경로 설정하기

여기서 부터가 불행의 시작이었다...

절대경로를 설정해주기 위해서는 많은 노력이 필요했다.

tsconfig.paths.json 파일을 만들어서 baseUrl, paths 부분만 따로 분리해주었다.

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

그리고 tsconfig.json에서 extends에 추가해주었다.

{
    "extends": "./tsconfig.paths.json",
    "compilerOptions": {
    	...
    }
}

그리고 package.json에서 scripts 수정해주어야 한다.

"scripts": {
    "dev": "ts-node src",
    "build": "tsc -p tsconfig.json",
    "test": "nodemon",
    "start": "ts-node -- --type-check -r tsconfig-paths/register src/index.ts"
},

 

4. pm2로 실행하기

후에 서버를 배포하기 위해 ec2에서 src/index.ts를 실행해주어야 했다.

서버가 꺼지지 않게 하기 위해 pm2를 사용해주었다.

그래서 pm2 start ts-node -- --type-check -r tsconfig-paths/register src/index.ts 명령어를 사용하여 서버를 실행해주려고 하였다.

그런데 서버가 작동하지 않아 pm2 log를 찍어보니 메모리 관련하여 오류가 계속 발생하였다.

나는 돈이 없는 프리티어 유저라서 인스턴스를 t2.micro 유형으로 사용했었는데, 인스턴스의 메모리 용량이 버티지 못하는 것 같았다.

왜 메모리 용량이 초과되는가에 대한 이유를 생각해봤는데, ts-node를 사용하는 과정에서  어쨌든 js로 파일들을 변환하여 node로 돌리는 과정을 거칠텐데 여기서 오류가 생기지 않나 생각 되었다.

결국 build 하여 나온 dist 폴더의 index,js를 pm2로 실행해주어야 하는 상황이 되었다.

그리고 dist 폴더에서 노드를 실행할 경우 절대경로가 인식이 안되는 문제가 발생했다.

그래서 jsconfig.json 파일을 생성하여 baseUrl, paths를 설정해보려고 했지만 작동하지 않았다.

결국 dist 안의 모든 파일들을에서 상대경로로 바꾸는 작업을 하였다.....ㅠㅜㅠㅜㅠㅜ

 

 

js파일을 node로 실행시킬 때 절대경로 설정하는 방법을 더 찾아봐야 할 것 같다...

 

 

참고 사이트

---

https://medium.com/@jsh901220/typescript-node-absolute-path-5782b584e368

typescript + node absolute path