느린 개발자

 

이전 포스팅에서는 Express Server와 Typescript 설정에 관해 기본적인 환경설정하는 방법을 보여드렸습니다. 이번에는 전체적인 폴더 구조를 잡고, 서버에서 에러추적을 위한 로그설정에 관해서 잠깐 설정법과 구현된 내용을 해보려고 합니다.

 

TypeScript(타입스크립트) Express API 서버 - 환경셋팅

---

 

1.  폴더 구조 구성

폴더구조

폴더구조에 대해서 간단히 설명해 보면. 전체적으로 데이터베이스 관련과, 타입, API, 컨트롤러 부분으로 분리한 구성내용입니다.

폴더 이름	설명
api	router와 middleware 폴더로 구성
config	env 파일에 작성된 설정 내용을 설정
controller	router 와 services에 대한 모델 컨트롤러
interfaces	타입 인터페이스, DTO
loaders	express, mysql, loggers, 등 모듈 연결
models	데이터베이스 모델
services	데이터베이스 모델에 관한 서비스 로직
utils	유틸 함수 관련

 

 

 

 

 

 

2.  설정값 구성하기 (env 환경변수)

 

env폴더 안에. env.development를 생성합니다.

# PORT
PORT = 5000

# MYSQL
MYSQL_HOST = localhost
MYSQL_USER = root
MYSQL_PASSWORD = root
MYSQL_DATABASE = test

# JWT
JWT_SECRET = jwtSecretKey$12345

# Log
LOG_LEVEL = silly
LOG_DIR = ../logs

# CORS
ORIGIN = http://localhost:3000

 

config폴더 index.ts안에  env파일에 설정된 환경변수 설정값들을 설정해 줍니다.

import {config} from 'dotenv'
import path from "path";

const env_dir = `../env/.env.${process.env.NODE_ENV || 'development'}`
config({path: path.join(__dirname,env_dir)})

export default {
    //서버포트
    server_port: process.env.PORT!,
    //Log winston level
    logs:{
        level:process.env.LOG_LEVEL || 'silly'  as string,
    },
    // api 라우터 경로
    api: {
        prefix: '/'  as string,
    },
    // jwt secret
    jwt_secret: process.env.JWT_SECRET as string,
    mysql_config:{
        HOST:process.env.MYSQL_HOST  as string,
        USER:process.env.MYSQL_USER  as string,
        PASSWORD:process.env.MYSQL_PASSWORD  as string,
        dialect:'mysql',
        DB:process.env.MYSQL_DATABASE  as string,
        pool: {
            max: 5,
            min: 0,
            acquire: 30000,
            idle: 10000
        },
        logging:process.env.MYSQL_LOGGING
    },

}

 

 

3.  라우터 설정

api 폴더 안 routes폴더에 작업합니다.

// api/index.ts

import {Router} from 'express'
import auth from './routes/auth.route'

export default ()=>{
    const app = Router()
    auth(app)
    return app
}

 

위에 index.ts 연결된  Auth 라우터 파일을 생성합니다

import {Router} from "express";

export default (router:Router)=>{
    router.use('/auth',router)
}

 

 

3.  express  설정

 

loaders 폴더 안에 express 관련 설정을 해줍니다. 기본적인 cors와 router연결 및 필요한 패키지들을 연결해 줍니다.

import 'reflect-metadata';
import express from 'express';
import cookieParser from 'cookie-parser';
import path from 'path'
import config from '../config/index'
import routes from '../api/index'
import cors from 'cors'
import hpp from 'hpp'

export default (app:express.Application)=>{
    type StaticOrigin = boolean | string | RegExp | (boolean | string | RegExp)[];
    // front url
    const whitelist = ['http://localhost:3000']
    //cors 설정
    const corsOptions = {
        origin(origin: string | undefined, callback: (err: Error | null, singleOrigin?: StaticOrigin) => void) {
            const isWhitelisted = origin && whitelist.indexOf(origin) !== -1;
            callback(null, isWhitelisted);
        },
        credentials: true,
    };
    app.use(cors(corsOptions))
    app.use(express.json())
    app.use(express.urlencoded({ extended: true }))
    app.use(cookieParser());
    app.use(express.static(path.join(path.resolve(), '..', 'public')))
    app.use(hpp())
    //라우터 연결
    app.use(config.api.prefix,routes())
}

 

index.ts파일로 연결해 줍니다.

// loaders/index.ts

import express from "express";
import expressLoader from './express'

export default (app:express.Application)=>{
    expressLoader(app)
}

 

 

4.  Server  설정

 

server.ts파일에서 이전 포스팅에서 테스트한 내용을 지우고 , 기본구성한 내용을 불러와서 설정해 줍니다.

import express from 'express'
import config from  './config/index'
import loaders from "./loaders/index";

const app:express.Application = express()
loaders(app)

const server = app.listen(config.server_port,()=>{
    console.log(`Server listening on port: ${config.server_port}`)
}) .on('error', (err) => {
    console.log(`${config.server_port} server error: ${err}`)
})
export default { server }

 

 

서버가 실행이 되는지 확인해 봅니다.

"scripts": {
  "dev": "cross-env NODE_ENV=development nodemon",
  "watch": "tsc --watch"
},

 

 

---

이번 포스팅에서 폴더구성, 환경변수 설정, 라우터설정, express 서버설정을 해봤습니다. 기본 구성은 이렇게 진행하면서 추후에 DB연결 API 라우터 구현 등 진행해 보도록 하겠습니다. 읽어주셔서 감사하고, 댓글 감사합니다!.