신규 블로그를 만들었습니다!

2020년 이후부터는 아래 블로그에서 활동합니다.

댓글로 질문 주셔도 확인하기 어려울 수 있습니다.

>> https://bluemiv.tistory.com/

 

웹서버에 html 파일 서비스 하기

일단 서비스 할 html 파일을 만든다.

(본 글에서는 index.html이라고 만든다.)

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Web Site</title>
</head>
<body>
    <h1>Welcome to My Homepage!</h1>
</body>
</html>​

간단하게 문장을 출력하는 html 파일을 만들었다.

 

 

server.js

/**
 * 웹 서버에 html 파일 서비스 하기
 */
 
var http = require('http');
var fs = require('fs'); // 파일 읽기, 쓰기 등 을 할 수 있는 모듈
 
// 404 error message : 페이지 오류가 발생했을때,
function send404Message(response){
    response.writeHead(404,{"Content-Type":"text/plain"}); // 단순한 글자 출력
    response.write("404 ERROR... ");
    response.end();
}
 
// 200 Okay : 정상적인 요청
function onRequest(request, response){
 
    if(request.method == 'GET' && request.url == '/'){
        response.writeHead(200,{"Content-Type":"text/html"}); // 웹페이지 출력
        fs.createReadStream("./index.html").pipe(response); // 같은 디렉토리에 있는 index.html를 response 함
 
    } else {
        // file이 존재 하지않을때,
        send404Message(response);
 
    }
 
}
 
http.createServer(onRequest).listen(8888);
console.log("Server Created...");​

 

서버를 구성한다.

 

만약 index.html 파일이 없거나 이름이 잘못 된 경우 404 에러 메세지를 보내야 한다.

그래서 send404Message 라는 함수를 만든다.

// 404 error message : 페이지 오류가 발생했을때,
function send404Message(response){
    response.writeHead(404,{"Content-Type":"text/plain"}); // 단순한 글자 출력
    response.write("404 ERROR... ");
    response.end();
}​

 

정상적으로 200 응답 일때는 index.html 파일을 띄어준다.

이때, request.method 를 설정해준다. (GET 방식인지, POST 방식인지)

 

그리고 request.url도 설정해준다.

'/' 로 설정할 경우, localhost:8888만 입력해도 index.html 이 띄어진다.

if(request.method == 'GET' && request.url == '/'){
      response.writeHead(200,{"Content-Type":"text/html"}); // 웹페이지 출력
      fs.createReadStream("./index.html").pipe(response); // 같은 디렉토리에 있는 index.html를 response 함
 
}​

 

만약 request.url을 '/index' 라고 하면, localhost:8888/index 라고 입력해야 index.html이 열린다.

 

 

 

 

결과 화면

▲ 정상적인 화면 (200 Okay)

 

 

 

 이상한 url을 입력했을때

 

 

 

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기