NodeJS 정적파일 읽는 방법, 웹페이지, 이미지, CSS 파일 읽는 방법

NodeJS

NodeJS 정적파일 읽는 방법, 웹페이지, 이미지, CSS 파일 읽는 방법

 

환경: NodeJS

 

웹 서비스를 제공하기 위해서는 다양한 파일들이 필요합니다. 그런데 이미지, CSS, Javascript, HTML 등과 같은 정적 파일들을 일일이 읽어서 출력할 수 없습니다. 다른 웹 서버처럼 특정 폴더에 모아 놓고 URL 로 바로 접근할 수 있도록 만들어야 합니다. 그러기 위해서는 Express 모듈에서 기본 제공되는 미들웨어 함수인 express.static 를 사용해야 합니다.

 

기본 사용법은 다음과 같습니다. Express 의 미들웨어 함수인 static 을 이용하면 지정한 폴더의 내용을 읽을 수 있습니다. 아래 소스는 public 폴더의 내용을 읽겠다는 정의입니다.

 

app.use(express.static('public'));

 

위와 같이 정의하면 public 폴더 아래에 있는 파일들을 URL 에서 바로 접근이 가능합니다. 그러니까 http://localhost:3000/main.html 을 입력하면 main.html 의 내용이 브라우저에 나타납니다. 

NodeJS 정적파일 읽는 방법, 웹페이지, 이미지, CSS 파일 읽는 방법

 

Main.html 의 소스는 다음과 같습니다.

 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    static page<br/>

  </body>

</html>

 

그림처럼 URL 로 접근하면 HTML 의 내용을 화면에 나타납니다. 만약 express.static 함수로 해당 폴더를 지정하지 않으면 404 에러가 발생합니다.  

NodeJS 정적파일 읽는 방법, 웹페이지, 이미지, CSS 파일 읽는 방법

 

만약 파일 종류별로 폴더를 구분해서 서비스 하고 싶다면 여러 번 미들웨어 함수를 호출하야 합니다. Express.static 함수는 설정한 순서대로 파일을 검색합니다.

 

app.use(express.static('public'));

app.use(express.static(‘css’));

app.use(express.static(‘html’));

 

다음은 URL 에서 가상 경로를 지정하는 방법입니다. URL 의 경로가 실제 파일이 있는 경로가 아니라면 app.use() 함수에서 가상 경로를 지정해야 합니다http://localhost:3000/files/main.html  에서 files 경로가 실제 폴더명이 아니라면 다음과 같이 설정합니다.

 

app.use(‘/files’, express.static('public'));

 

마지막으로 절대 경로를 지정하는 방법입니다. Express 앱을 다른 디렉토리에서 실행하는 경우 절대 경로를 나타내는 __dirname 변수를 함께 사용하는 것이 안전합니다.

 

app.use(‘/static’, express.static(__dirname + '/public'));


Posted by 녹두장군