웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

nodejs로 간단한 웹서버 구축하는 방법 및 예제보기

Last Modified : 2019-08-07 / Created : 2017-10-30
21,998
View Count

만약 웹서버(Web Server)를 쉽고 빠르게 구축할 필요가 있는 경우 어떤 방법이 있을까요? 많이 사용되는 Nodejs 웹서버 구축 방법에 대하여 알아봅니다.

제 경우는 급하데 프로젝트를 진행해야해서 퍼블리싱이 필요했습니다. 이때 서버 환경이 아니라면 스태틱한 파일(이미지, css, script)들의 경로를 모두 바꿔야하는 경우가 있을 수 있죠. 이런 경우 서버 구축 후 진행하면 편리하겠죠.





# Why NodeJS Server


음... node를 서버 구축하는 이유는 여러가지가 있습니다. 먼저 가볍고 쉽게 구축한다는 점이 장점이구요 자바스크립트를 알고 있다면 문법 이나 자료형등이 어렵지 않고 쉽게 배울 수 있습니다. 또 다른 이유라면 node를 사용한 유용한 툴, 라이브러리 또는 컴포넌트가 많기 때문입니다. 다른 웹서버들도 이런 이유로 node를 많이 설치해 사용합니다.

그럼 무엇부터 해야할까요? 우선 아래의 과정들이 필요합니다.

  • 서버를 구동시킬 app.js 파일 만들기
  • app.js에 서버 구동 코드 추가하기
  • 이미지 등의 파일들 경로 설정하기
  • 테스트 및 완료

그럼 위에서부터 하나하나 만들어 보겠습니다.


! app.js 파일 만들기

app.js는 서버를 구동하기 위해 가장 필수적으로 만들어야 하는 파일입니다. 생성한 뒤 node app.js를 실행하여 서버 구동이 가능하게 할 것입니다. 일단 파일을 생성 후 아래 코드를 추가합니다.

@ app.js
const http = require('http');
const port = 8080;
http.createServer(function(request, response){
  console.log('HTTP server start on port ' + port);

  response.writeHead(200, {'Content-type': 'text/plan'});
  response.write('Hello Node World!');

  response.end( );
}).listen(port);

간략하게 설명하면 상수에 http 모듈과 사용할 포트를 저장합니다.(여기서는 8080) 그리고 createServer()를 사용하여 서버를 구동하면됩니다. 구동방법은 아래 명령어인 node로 앱을 실행합니다.
node app.js

위 코드를 만들어 주소창에 실행하면 서버가 동작하는지 확인할 수 있습니다.
localhost:8080


! Express로 실행하는 방법

Express는 node로 웹서버 환경 구축시 가장 많이 사용되는 프레임워크입니다. 서버를 동작시 라우팅에 설정이 필요한데 Express를 사용하면 매우 간단한 방법으로 라우팅 설정에 따른 서버 동작이 가능합니다.

먼저 Express 모듈이 설치되어 있어야합니다. 모듈은 npm 패키지를 사용하여 다음과 같이 설치하시면 됩니다.
npm init  //  npm이 없는 경우에만 실행 필요

npm install express --save

디펜던시에 추가하지 않는 경우는 --no-save를 사용하세요. package.json에 추가되지 않으므로 간단한 개발 서버 구동 목적인 경우에 디펜던시 없시 쓰입니다.
npm install express --no-save

@ app.js
const express = require('express'); // express 모듈 추가하기

const app = express();
const port = 8080;

app.get('/', function(request, response) {
  response.send('Hello Express Node World!');
});

app.listen(port, function(err) {
  console.log('Connected port' + port);
  if (err) {
    return console.log('Found error', err);
  }
})

app.get()을 통해 request 요청을 받으면 해당 내용을  response하게됩니다. 그리고 app.listen()은 해당 포트로 어플리케이션이 동작되도록 해줍니다.


! Express를 사용하여 index.html 템플릿 사용 방법


위에서는 response.send()를 사용하여 간단하게 출력했지만 실제 코드를 템플릿 파일 index.html로 사용한다면 어떻게 하는지 알아봅니다.

먼저 경로의 정보를 가져오고 이 경로에 index.html을 불러오도록 설정합니다.
const path = require('path');

app.get('/', function(request, response) {
  response.sendFile(path.join(__dirname + '/index.html'));
});

위 코드를 모두 추가하면 다음과 같은 코드가 작성되게 됩니다.
const express = require('express'); // express 모듈 추가하기

const app = express();
const port = 8080;
const path = require('path');

app.get('/', function(request, response) {
  response.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(port, function(err) {
  console.log('Connected port - ' + port);
  if (err) {
    return console.log('Found error - ', err);
  }
});

이제 index.html를 사용하여 웹문서를 작성할 수 있게되었습니다. 추가로 base.css를 만들어 사용한다면?


! css 파일 연결하기, static file


만약 css 파일을 추가하려는 경우의 방법입니다. static 파일의 설정을 추가해야 하며 '/static/'이라는 경로를 만들고 여기에 base.css 파일을 추가한 경우 방법입니다.
const app = express();
app.use(express.static('static'));

이제 index.html에는 다음과 같은 코드로 base.css를 불러오겠습니다.
<link rel="stylesheet" href="/base.css" />

이 것으로 css 파일을 express에서 사용하는 방법도 함께 알아보았습니다.



# 다양한 HTTP Method 처리방법


위 예제의 사용된 app.get()은  request를 get 메소드로 받은 것입니다. 이 부분을 수정하면 다양한 메소드의 request를 처리할 수 있죠. 이 부분은 차후에 더 알아보도록 하겠습니다.

여기까지 간단하게 사용하는 nodejs 웹서버 구축에 대하여 알아봤습니다.
node nodejs server 웹서버 express
아래의 글도 찾고 계시지 않나요?

Previous

프론트엔드 개발자로 일하는 것은 어렵다?

Previous

HTML 자바스크립트로 로딩중 메시지 만들기