Express로 정적파일을 서비스하는 방법

2021. 1. 29. 18:15생활코딩/NodeJS

let express = require('express');
let app = express();

app.get('/', function(req, res){
    res.send('Hello home page');;
});
app.get('/route', function(req, res){
    res.send('Hello Router, <img src="/route.png">')
})
app.get('/login', function(req, res){
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function(){
    console.log('Conneted 3000 port!');
});

우선 Express로 Routing하는 방법이다.
현재 우리 서버는 3개의 라우트를 가지고 있고 그에 따른 컨트롤러 역시 가지고 있다.

그런데 여기서 만약 우리가 가지고 있는 파일들을 클라이언트에게 보여주고(응답하고) 싶다면 Express가 제공하는 메서드 중 하나인 static을 사용해 단 한 줄의 코드로 구현할 수 있다.

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

이것은 우리의 앱이 public이라는 폴더에 정적파일을 담고 있겠다는 메시지를 나타낸다.
코드를 합쳐보면

let express = require('express');
let app = express();

app.use(express.static('public'));
app.get('/', function(req, res){
    res.send('Hello home page');;
});
app.get('/route', function(req, res){
    res.send('Hello Router, <img src="/route.png">')
})
app.get('/login', function(req, res){
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function(){
    console.log('Conneted 3000 port!');
});

위와 같다.
이제 localhost:4000로 이동해서 최상위 루트 '/'에 정적파일 이름을 입력하면 ex -> http://localhost:4000/route.png
route.png를 서버에서 응답한 것을 확인할 수 있다.