[nodejs] 웹서버 운영하기

프로젝트 만들기

# 인텔리제이로 nodejs 프로젝트 만들기

nodejs로 웹 서버를 만드는 이유 : 웹을 공부하신 분들이라면 먼저 html, css, javascript를 공부할 것이다. nodejs로 웹서버를 운영하게 될시 벌서 웹과 친숙한 javascript언어로 웹서버를 만들 수 있다는 것은 상당한 장점이다.

먼저 인텔리제이로 nodejs 프로젝트를 만드려면 상단에 있는 File/Settings/Plugins -> nodejs검색 이후 install 해야한다.

이후 npm과 express를 설치해야 만들 수 있다고 한다.
npm은 nodejs프로젝트를 실행도 해주고 각종 미들웨어(다른말로는 라이브러리)를 터미널에서 쉽게 설치해준다.
express는 nodejs프로젝트를 더욱 더 다양하고 쉽게 코딩할수있는 메소드를 지원하는 미들웨어이다.

# 프로젝트 구성파일들

위에있는 순서대로 설명하겠다.

1. Project/bin/www.js

먼저 bin폴더 안에 www.js파일이다.
www.js 파일은 제일먼저 실행되는 파일이다. http 서버를 만들고 port번호 3000에 매칭시켜주는 파일이다.

2. Project/node_modules폴더

nodejs의 lib즉 npm에서 설치한 미들웨어들이 들어있는 폴더이다. 기본적으로 인텔리제이에서 프로젝트를 생성하면 웹 서버를 운영할 때 필요한 미들웨어들을 포함하고있다.

3. Project/public폴더

정적인 파일들을 접근 가능하도록 (열려있는?) 해주는 폴더이다. 기본적으로 nodejs는 보안상 css파일과 image파일등 다른파일에 html로 접근하려하면 에러가 난다. 하지만 public 폴더안에있는 css파일과 이미지파일등 정적인 파일들은 접근가능하다.

• Project/public/images : 이미지파일들을 모아두는 폴더이다.
• Project/public/javascripts : html에 쓰는 javascript들을 모아두는 폴더이다.
• Project/public/stylesheets : html에 쓰는 css들을 모아두는 폴더이다.

4. Project/routes폴더

각페이지를 URL주소로 연결 하는 route파일들 모아두는 폴더이다. 자세한 사용방법은 express 홈페이지에 있으니 참고바란다.

  -Express Routing

• Project/routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

가장 기본인 index부분의 라우터이다. index.pug(html) 파일을 http:localhost:3000에 렌더링 해서 보여준다.

• Project/routes/user.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

http:localhost:3000/user 로 접근하는 라우터이다. 그곳에 “respond with a resource”문자열를 보내는 코드이다.

5. Project/views폴더

각 URL의 화면을 보여주는 pug파일들을 모아두는 폴더이다.
pug파일은 html문서의 다른 형태이다.

• Project/views/error.pug : error가 났을 때 error trace를 보여주는 pug파일

extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}

• Project/views/index.pug : http:localhost:3000 을 보여주는 pug파일

extends layout

block content
  h1= title
  p Welcome to #{title}

• Project/views/layout.pug : 각 pug파일의 뼈대

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

6. Project/app.js

흔히 말하는 컨트롤러이다. 라우터 객체의 연결과 필요한 미들웨어들이 정의 되어있다.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

7. Project/package.json

프로젝트이름, 버전, 실행시작부분과 필요한 미들웨어들이 요약되어 적혀있는 json파일이다.

{
  "name": "post",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "pug": "2.0.0-beta11"
  }
}

8. Project/package-lock.json

package.json이 요약본이면 package-lock.json은 해설본이다.

# 실행화면

index화면

/users화면

에러화면