[NodeJS] WebServer 만들기 - FileSystem을 이용

들어가며

  웹 페이지를 생각하면 무엇이 제일 먼저 생각 나는가? 저는 html이 생각이 납니다. 그렇기 때문에 이번 포스팅에서는 .html의 파일을 읽어 client에게 전달하는 FileSystem을 이용한 Webserver에 대해서 정리해 볼까 합니다. 

프로젝트 시작하기

  프로젝트 ROOT/docRoot/ 아래 index.html, next.html의 두 파일을 생성하면 됩니다. 이 파일은 클라이언트(브라우저)에서 요청하면 응답으로 보내줄 두개의 화면입니다. 아래 index.html의 페이지를 먼저 보여주고, 해당 페이지에서 Go Next를 누르면 next.html의 페이지로 이동하는 예제입니다. 

소스코드

index.html과 next.html은 [오른쪽 마우스 클릭] --> [페이지 소스보기]를 통해서 확인하실 수 있습니다. 두 개의 html파일에는 Go Next와 Go Home이 있는데 해당 택스트를 클릭하면 서로의 페이지로 이동하는 예제입니다. 

index.html

Index.html
	
This is index page
	
banana
	Go Next

next.html

next.html
	
This is next page
	
banana
	Go Home

  아래 코드는 http://localhost:9998로 접속 했을 경우에는 index.html의 파일을 client에게 전송하고, index.html에서 Go Next를 클릭했을 경우 href를 전달하며 next.html의 파일을 전송하는 예제입니다. 이때 만약 두개의 파일중 하나의 파일이 없다면 예외처리를 해야하기 때문에 앞서 HTTP란? 특징 및 구성요소에서 설명한 Response Code를 추가했습니다. 4xx로 시작하는 코드는 Client Error입니다. 만약 해당 html파일이 있을 경우에는 2xx의 success 코드를 함께 전달해 주면 됩니다.

webserver.js

var http = require('http');
var fs = require('fs');
var url = require('url');

http.createServer(function(req, res){
	var pathname = url.parse(req.url).pathname;
	
	if(pathname === '/'){
		pathname = '/index.html';
	}
	pathname = './docRoot' + pathname;
	console.log('req:' + req.url + ", path:" + pathname);

	fs.readFile(pathname, function(err, data) {
		if (err) {
			res.writeHead(404, {
				"Content-Type" : 'text/html'
			});
			res.end('404, Not Found');
		} else {
			res.writeHead(200, {
				"Content-Type" : 'text/html'
			});
			res.end(data);
		}
	});
	
}).listen(9998, function(){
	console.log('server running on 9998.');
});

실행화면

실행화면은 console에는 요청하는 페이지의 파일과, 해당 페이지의 경로를 출력했습니다. 

이 간단한 페이지 이동으로 포트폴리오 같은 페이지는 만들 수 있게 되었네요.