node.js 웹 서버 라우터 구성하기

 

/ src / app.js 구성

 

app.js 파일이란 server.js, index.js 등의 다양한 이름을 가지며

주로 node.js 에서 서버에 진입하는 진입점 파일로써 사용된다.

 

전반적인 서버의 구성과 라우터 처리 및 서버 설정등을 설정하는 용도의 파일로

만들고자 하는 사이트의 규모에 따라 극단적인 경우에는 app.js 파일과 html 파일들만으로 사이트를 구성하는 것도 가능하다.

 

제작할 wargame 사이트에서 필요한 페이지 등을 처리하기 위해 대략적으로 그 구조와 

라우터 처리를 이번 포스트에서 다룰 것이며 app.js 파일의 코드는 다음과 같다.

 

const express = require("express");
const path = require('path');

require("dotenv").config({ path: __dirname + "/config/.env" });

const app = express();
const port = process.env.PORT;

const indexRouter = require("./routes/index.route.js");
const loginRouter = require("./routes/login.route.js");
const singupRouter = require("./routes/singup.route.js");
const userRouter = require("./routes/user.route.js");
const adminRouter = require("./routes/admin.route.js");
const wargameRouter = require("./routes/wargame.route.js");
const errorRouter = require("./routes/error.route.js");

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '../public/views'));

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

app.use("/", indexRouter);
app.use("/login", loginRouter);
app.use("/signup", singupRouter);
app.use("/user", userRouter);
app.use("/admin", adminRouter);
app.use("/wargame", wargameRouter);
app.use("/error", errorRouter);

app.listen(port, (err) => {
  if (err) return console.log(err);

  console.log(`server running success`);
});

 

저번 포스트에서 구성한 드림핵 문제의 코드를 참고해 만든 app.js 코드이다.

이를 간단히 설명하자면 /config/,env 파일에 설정해 놓은 포트번호를 가져와 app.js 에서 해당 포트번호를 사용해

서버를 구동하고 있으며 각종 경로들을 설정해 해당 경로들로 요청을 보내는 코드이다.

 

이를 더 자세히 설명하자면 다음과 같다.

 

const express = require("express");

require("dotenv").config({ path: __dirname + "/config/.env" });

const app = express();
const port = process.env.PORT;

 

맨 위 코드에선 먼저 만들고자 하는 서버가 express 모듈을 사용하는 node.js 서버이기에 express 모듈을

가져오는 코드로 이를 가져와 express 변수에 할당하는 코드이다. 이를 통해서 express의 기능을 사용 가능하다.

 

두 번째 코드는 앞서 설명했듯 /config/.env 파일에 설정해 둔 포트번호를 로드하는 코드로. env 파일엔

포트번호로 8000을 설정해 두었다. 

 

,env 파일에 저장되어 있는 포트번호

 

즉 8000 포트에서 서버가 구동되는것을 의미하며 aws EC2를 사용해서 개발을 한다면 aws에서 해당 포트번호를

설정해 주어야 이에 접근이 가능하다. 

 

app 변수에 express()를 할당하는 것은 express 애플리캐이션 인스턴스를 생성하는데, 이 인스턴스를 통해

라우팅 등의 기능을 설정 가능하다.

 

다음으로 port 변수에 환경변수에서 가져온 포트번호를 할당한다.

 

const indexRouter = require("./routes/index.route.js");
const loginRouter = require("./routes/login.route.js");
const singupRouter = require("./routes/singup.route.js");
const userRouter = require("./routes/user.route.js");
const adminRouter = require("./routes/admin.route.js");
const wargameRouter = require("./routes/wargame.route.js");
const errorRouter = require("./routes/error.route.js");

 

다음 코드에서는 /routes 하위 폴더들에서 라우터를 불러오는 부분으로 각각의 라우터들은 

특정 기능 혹은 경로 등을 처리하게 된다.

 

app.use("/", indexRouter);
app.use("/login", loginRouter);
app.use("/signup", singupRouter);
app.use("/user", userRouter);
app.use("/admin", adminRouter);
app.use("/wargame", wargameRouter);
app.use("/error", errorRouter);

 

다음 코드에선 라우터 들을 app.use() 메서드를 사용해 특정 URL 경로에 대한 요청을 처리할 라우터를 

지정하는 코드로 여기서 지정하게 될 라우터란 앞서 각 변수에 할당한 라우터를 의미한다.

 

app.js 파일 안에서 라우터 지정을 다 할 수 있음에도 디렉터리를 분리해 복잡하게 만든 이유는 

프로젝트의 규모가 작지 않아 app.js 에 모든 코드를 삽입하면 그 유지보수에 어려움이 생길 것이기 때문에

더 모듈화 하여 코드의 시인성이나 유지보수성이 좋도록 의도한 것이다.

 

그다음으론 서버가 동작할 때 터미널상에서 확인 가능한 문자열을 띄워놓는 코드이다.

 

---

 

/ src / routes / index.route.js 구성

 

const express = require("express");
const renderFile = require("../controllers/index.controller.js");

const router = express.Router();

router.get("/", renderFile);

module.exports = router;

 

app.js 가 가져오는 routes 디렉터리의 하위 파일 중 하나로, 복잡한 로직 없이 경로에 맞춰서 접근했을 때. html 파일만

불러오게끔 설계하였다.

 

먼저, express 모듈을 사용하여 사용자의 요청이 /로 들어오면,

이전의 app.js에서 설정한 대로 / 경로로 접근해야 한다고 명시해 두었기 때문에

여기서는 추가적인 설정 없이, 루트 디렉터리에 접근했을 때 ../controllers/index.controller.js를 실행시키는 코드이다.

 

즉 /index로 접근하게 되면 위 코드가 실행되어 ../controllers/index.controller.js의 파일이 실행된다.

 

---

 

/ src / controllers / index.controller.js 구성

 

const path = require("path");

module.exports = (req, res, neex) => {
    res.sendFile(path.join(__dirname + "/../../public/views/index.html"));
}

 

controller 파일에서 실행하는 파일은 /../../public/views/index.html 위치의 html을 실행하는 파일로

결국 /index에 접근하게 되면 

 

<html>
<head>
    <title>index</title>
</head>
<body>
    <h1>index page</h1>

</body>
</html>

 

 /../../public/views/index.html 위치의 파일을 실행해 

 

루트경로 ( / )로 접근하게 되면 해당 페이지를 확인 가능하고,

위 구조로 다른 라우터도 다 처리해 주면 다른 페이지에도 접근이 가능하다.

 

/admin 에 접근한모습

 

/wargame 에 접근한 모습

 

/wargame/problems 에 접근한 모습

 

위 형식으로 페이지의 처리가 가능했다.

 

만약 html 파일이 아닌 ejs 파일을 위와 같이 처리하고 싶다면

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '../public/views'));

 

app.js 에 위 코드를 추가해 주고, 

 

const path = require("path");

module.exports = (req, res, next) => {
    res.render("index");
};

 

컨트롤러 파일에 들어갈 코드를 위와 같이 수정해 주면 된다.