2020.01.19 next환경에 express 연결하기

next 에서 주소를 동적으로 변경하기 위해 next환경에 express 연결했다.

express 및 필요 모듈 설치

npm i morgan express express-session cookie-parser dotenv

npm i -D nodemon

server.js 파일 생성

next와 express 연결

const express = require('express');
const next = require('next');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const expressSession = require('express-session');
const dotenv = require('dotenv');

const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();

• app을 next로 호출하고 개발모드인 경우 {dev} 라는 옵션을 설정

작성한 app 안에 express 코드 넣기

...
app.prepare().then(() => {
    const server = express();

    server.use(morgan('dev'));
    server.use(express.json());
    server.use(express.urlencoded({extended: true}));
    server.use(cookieParser(process.env.COOKIE_SECRET));
    server.use(expressSession({
        resave : false,
        saveUninitialized: false,
        secret: process.env.COOKIE_SECRET,
        cookie : {
            httpOnly : true,
            secure : false,
        },
    }));

    server.get('*', (req, res) => {
    // next 에서 가져온 요청 처리기
        return handle(req, res);
    });

    server.listen(3000, () => {
        console.log('next+express running on 3000');
    });
});

• COOKIE_SECRET은 백엔드서버의 쿠키와 같은 걸 사용 -> 그래야 서로 해독이 가능

package.json 실행 명령어 변경

...
  "scripts": {
    "dev": "nodemon",

• nodemon.json 파일 생성하여 express(server.js)가 실행되면서 그 안에 연결시킨 next도 실행된다

{
    "watch" : [
        "server.js",
        "nodemon.json"
    ],
    "exec" : "node server.js",
    "ext" : "js json jsx"
}