[앱삼] 2. MERN 풀스택 환경 기본세팅 - 4

<세팅목록>

1. 디렉토리/파일목록 세팅

2. Git 세팅

3. 라이브러리 세팅

4. node서버와 react 연결, 프록시 개발환경 설정 

5. 디렉토리에 따른 코드스플리팅과 라우터설계 

6. DB세팅 

7. 로그세팅 

8. 에러핸들러 미들웨어 세팅 // 여기부터

9. 쿠키파서/서드파티 미들웨어 세팅 // 이거는 나중에 쓸 거 있을 때 해야겠다

... 

 

1. 에러핸들러 미들웨어

/middleware/errorHandler.js 생성

const { logEvents } = require('./logger');

const errorHandler = (err, req, res, next)=>{
    logEvents(`${err.name}: ${err.message}\t${req.method}\t${req.url}\t${req.headers.origin}`, 'errLog.log');
    // console.log(err.stack+'error stack');

    const status = res.statusCode ? res.statusCode : 500 //server error

    res.status(status);

    res.json({ message : err.message })
}

module.exports = errorHandler;

- 이전시간에 사용했던 logEvent 함수를 가져와서 미들웨어를 만들어준다.

- res.statusCode가 있으면 쓰고 없으면 500 서버에러를 뿜는다.

- res.json으로 에러메시지를 보낸다.

 

app.js

const express = require('express');
const app = express();
const router = require('./routes');
const path = require('path');
const { logger } = require('./middleware/logger');
const errorHandler = require('./middleware/errorHandler');
const cookieParser = require('cookie-parser');

//environment variables setting
require('dotenv').config(); 
const ENV = process.env;

app.use(logger); //로거는 여기

// cors setting 
const cors = require('cors'); //cors옵션 변경
let corsOption = {
    origin: (origin, callback) =>{
        if(`http://localhost:3500`.indexOf(origin) !== -1 || !origin){ //허용 주소
            callback(null, true) //콜백으로 그냥 넘어감
        }
        else{
            callback(new Error('Not allowed by CORS')) //Error를 뿜어서 에러핸들링 미들웨어로 던져준다.
        }
    },
    credentials: true,  // true시 설정 내용을 응답헤더에 추가해 줌
    optionSuccessStatus : 200
}
app.use(cors(corsOption)); // CORS 미들웨어 추가

// body-parser setting (4.16버전 이상 express에 내장되었다.)
app.use(express.json());
app.use(express.urlencoded({extended: false}));

//cookie-parser
app.use(cookieParser());

// static path 
app.use(express.static(path.join(__dirname, 'public'))) 

app.use(errorHandler) //마지막에 추가해준다.

router(app);

module.exports = app;

- cors 미들웨어를 좀 수정했다.

- 프론트엔드의 .env파일에서 PORT를 3000으로 수정했다. 3000에서 service-worker 관련 충돌이 나는 바람에 3500으로 이사갔다..

- localhost 3500을 허용해주었다.

 

- 테스트를 위해 프론트엔드를 3600으로 옮겨서 켜보고 테스트한다.

frontend/.env

- 3600에서 버튼을 누르면

지금 버튼을 누르면 api/auth/signup 으로 post요청하게 되어있다.

CORS 에러가 정상적으로 뿜어진다.

- 다시 백엔드에서 확인해보면

backend/logs/errLog.log

- 에러 로그가 정상적으로 잘 찍혔다

 

- 그렇다면 3500에서는 ?

localhost 3500

정상적으로 api 작동한다.

- 정상적으로 작동한다. 

- 백엔드에서 확인해보자

backend/logs/reqLog.log

- 정상적으로 로그가 찍혔다.

- 당연히 db에서도 잘 작동한다.