Server Side JavaScript

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

여기서는 이미지나 텍스트 파일와 같은 정적인 파일을 서비스하는 방법을 다룹니다. 

app.js

var express = require('express');
var 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!');
});

 

댓글

댓글 본문
작성자
비밀번호
  1. Whoisy
    강의에서 말한 static을로 코딩하면 Not Found를 발생 하는 군요.
    정확한 위치(경로) 설정해야 합니다.

    우선 패스 모듈을 임포트하고
    var path = require('path');

    패스의 join() 함수를 써서 현재 위치와 public 폴더 위치를 합쳐 경로를 설정합니다.
    app.use(express.static(path.join(__dirname, 'public')));

    __dirname 은 app.js 가 실행되는 현재 경로를 나타냅니다.
  2. Seo Yun Seok Tudoistube
    express.static() 하니까 루트경로('/')로 인식되네요. 감사합니다^_____^!!!
  3. 감사...
    대화보기
    • Fang-Answer
      관습적으로 public이라는 이름을 쓴다고 합디다.
      다른 이름을 주고 그 이름폴더내에 정적 파일을 넣어둔다면
      똑같이 작동 할 꺼에요.
      대화보기
      • 정적파일의 디렉토리를 꼭 public라는 이름으로 달아줘야 하는가요?
      • 신입1
        감사합니다
      • sw.yoonsung
        그래도 그런 삽질 과정에서 배울 수 있는게 있지요...^^ 삽질은 어느 책이나 튜토리얼에서도 가르쳐주지 않는거니까.. 책으로도 배울 수 없는 걸 배웠다고 생각하시면 좋을것 같네요.. 대부분의 프로그래머들이 겪는 딜레마이지만 그 과정이 성장을 위한 가장 필수적인 과정이라고 생각합니다.^^ 화이팅!
        대화보기
        • Boswell
          항상 잘 듣고 있습니다ㅎㅎ
          좋은 강의 해주셔서 고맙습니다.
        • Dusskapark
          자문자답

          script(src='/assets/init.js')

          이렇게 처리하면 최상위 디렉토리를 찾아가네요;;
          대화보기
          • Dusskapark
            localhost:3000/topic 일 경우에는 정적파일을 제대로 찾을 수 있습니다.
            그런데, localhost:3000/topic/id 일 경우에는 css/js 파일을 localhost:3000/topic/style.css 이렇게 엉뚱한 경로에서 찾는 문제가 있습니다. 일단은... script(src='../style.css') 와 같은 방법으로 경로를 처리하긴 했지만...

            이것도 /topic/id/name/index.html 으로 라우팅을 해버리면 또 똑같은 문제가 발생할 것 같습니다.
            baseurl을 설정할 수 있는 방법은 없을까요?


            https://goo.gl......2u5
          • fasdgoc
            대화보기
            • 마지막승부
              node 버전 때문인지 모르겠는데
              express.static()부분에서 __dirname을 빼고 쓰면 404 error가 발생되네요.
              app.use(express.static(__dirname+'/public'));
            • WayneKing
              영어를 잘하는 게 답이구나... 영문서적을 보거나 홈페이지 튜토리얼, 사전만 잘 볼 줄 알았으면 작년에 헛질 거리 안했을 텐데;;;
            • 홍홍
              제가 생각 하는게 맞는지 궁금합니다.
              3번라인의 app.use(express.static('public')); 을 실행 할때
              public디렉토리는 실행 파일(여기서는 app.js)와 같은 경로 상에 있어야 하는거 같은데요
              public이 상위 경로에 있도록 하고 실행 해봤더니
              app.use(express.static('../public')); 같은 형식으로 해도 경로들이 잘 실행이 되더군요
              express.static('../public')을 실행 한뒤
              아래에 오는 모든 경로들은 public디렉토리를 기준으로 해야 하는건가요???
              대화보기
              • egoing
                옙 정확합니다!
                대화보기
                • 홍홍
                  이미지 파일이 public/route.png 경로에 있는걸로 봤는데
                  왜 코드에서는 res.send('Hello Router, <img src="/route.png">')
                  /route.png 이 경로로 써주는 건가요??

                  app.use(express.static('public')); 이 부분에서
                  루트가 public 디렉토리가 되는건가요??
                • nocomet
                  다른 언어에서 로드하기 위함이 아니라,

                  서버 컴퓨터에 있는 정적인 데이터를 클라이언트 컴퓨터에서 확인할 수 있도록 코드를 추가하는 겁니다.
                  대화보기
                  • 호동
                    안녕하세요. 요즘 Node.js를 책으로 공부하고 있는데요. 책이 옛날 책이라서 그런지 강의 내용과는 조금 다르네요. 해당 도서에서는 app.use(express.router);가 추가로 입력되어 있는데 최신버전에서는 사용하지 않는 건가요? 그러면 최신 버전에서는 어떻게 사용하는지 좀 알려주세요.
                  • egoing
                    저렇게하면 express.static('public')이라는 함수가 실행되면서 public 사용자의 요청에서 public 디렉토리에 파일이 있는지를 먼저 확인해서 그 파일이 있다면 public 디렉토리에서 파일을 찾아서 사용자에게 보내주고 응답을 끝내버리는 기능입니다.
                    대화보기
                    • 동키신
                      다른 언어에서도 정적인 파일을 로드하기 위해서
                      app.use(express.static('public')); 와 같은 코드를 넣어주어야하나요?
                      express 모듈에서 그러한 코드를 왜 넣어야하는지 잘 이해가 안됩니다.
                      감사합니다.
                    • 유튜브에서 봐서 그런건지는 모르겠는데, 음성이 부분적으로 끊기는 것 같습니다.
                      예) 5분 15~20초 사이
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기