node js / express 이용하기 / 정적 파일 제공

serve-static 모듈

CSS, HTML, JS,  등등의 정적 파일에 대한 접근을 하고 싶다면

serve-static이란 모듈을 사용해야 합니다.

const express = require('express');
const app = express();
const static = require('serve-static');

app.use(static(__dirname)); //__dirname은 현재 파일의 directory 이름

app.listen(8003, () => {
  console.log('서버 구동중');
});

 

만약 현재 폴더의 하위 폴더를 지정하고 싶다면 아래와 같은 과정이 필요합니다

// path 모듈 사용
const path = require('path');

// 현재 파일 위치(__dirname)에서 'img'라는 폴더 지정
app.use(static(path.join(__dirname, 'img')));

 

접근 가능 디렉토리는 여러개를 만들 수 있습니다.

app.use(static(path.join(__dirname, 'html')));
app.use(static(path.join(__dirname, 'img')));

 

 

img 폴더 안에 있는 이미지 파일을 불러오기 위해서는

파일이름을 url 파라미터로 전달합니다.

 

 

제공하고자 하는 정적 파일이 있는 디렉토리의 상위 디렉토리가 path로 되어있다면,

아래와 같이 폴더이름/파일이름 을 적어주어야 합니다.

 

 

이제 원하는 파일을 불러와 웹페이지를 구성할 수 있게 되었습니다.

아래와 같이 html 내부에 <img>태그가 있다면

그 소스 링크로 들어가 이미지를 가져옵니다.

const express = require('express');
const app = express();
const path = require('path');
const static = require('serve-static');

app.use(static(path.join(__dirname, 'img')));

app.get('/', (req, res, next) => {
  res.send(`
    <h1>노르웨이... 가고 싶네요... 또르륵....</h1>
    <img src="norway.jpeg" width="600">
  `)
});

app.listen(8005, () => {
  console.log('8005번 포트 사용중');
});