Express - 12. 정적인 파일의 서비스

목표

Express로 정적인 파일을 서비스하는 방법을 알자.

- 홈페이지에 이미지 띄우기

 

---

 

Beautiful Free Images & Pictures | Unsplash

Unsplash가 제공하는 이미지들은 저작권에 구애없이 사용할 수 있다. 알아두자!

 

다음과 같이 이미지 하나를 다운받고 가져오고 이 이미지를 홈페이지에 띄워보자.

hello.jpg에 접속하려면 정적인 파일을 서비스하는 것을 허용하고 셋팅해주어야 한다.

 

Express 정적 파일 제공하기

Express에서 정적 파일 제공

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

'public'디렉토리 안에서 static 파일을 찾겠다는 의미이다.

그 후 리로딩후 localhost:3000/images/hello.jpg 를 들어가면 이미지가 화면에 출력된다.

이 주소를 카피하고 홈페이지 코드 본문에서 <img src="/images/hello.jpg">를 추가하자.

// 1. 홈 페이지
app.get('/', function(request, response){
  var title = 'Welcome';
  var description = 'Hello, Node.js';
  var list = template.list(request.list);
  var html = template.html(title, list,
    `<a href="/create">create</a>`,
    `<h2>${title}</h2>${description}
    <img src="/images/hello.jpg">`
  );
  response.send(html);
});

그러면 다음과 같이 아래에 이미지가 출력된다. 근데 이미지가 너무 크다. 그런 경우에는 css의 sylte을 이용하여 조절한다.

<img src="/images/hello.jpg" style="width:300px;">

---

요약

정적인 파일을 서비스하고 싶다면, 서비스하고자 하는 디렉토리를 아래와 같이 직접 지정해준다.

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

그러면 이 코드에 의해 public 디렉토리 아래에 있는 파일들을 url을 통해 접근할 수 있게 된다. 지정한 디렉토리 외에는 접근할 수 없으므로 안전하게 접근할 수 있다.