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. 김혜경
    6.06
  2. 쫑이
    강의내용과는 다르게 경로인식을 못했는데
    Whoisy님이 써주신대로 하니 경로 지정이 잘되네요
    대화보기
    • 지상몬
      2018/04/18 수강완료했습니다 =)
    • 지발
      와우.......................
      신세계'ssssssssssssssssssssss
      이걸로 페이지 5개나 만들었어요 /route 로 하지 않고 /1 ~ /2 까지요
    • 지발
      와 너무 멍청한 실수를....
      저는 예쁜 나비 사진 파일 이름을 butterfly 라고 해놓고
      route.png 를 계속 호출하고 있었네요....
      하... 이걸로 1시간을 쓰다니....
      코딩은 무한삽질... 너무 창피하다
    • 지발
      와 미치겠네 왜 안되나요.
      app.use(express.static('public')); 도 안되고

      path 모듈 임포트 하고 아래 코드도 안되고

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

      빨리 더 배우고 싶은데 여기서 막히네요 제발 살려주세요
    • 라울
      감사합니다!
    • 박인호
      1-10
      수강완료.
      app.use(express.static('디렉토리명'));을 하면 정적 파일을 서비스할 경로를 지정할 수 있고,
      경로가 지정되면 정적인 파일에 접근 할 때 정확한 경로없이도 루트경로로 인식할 수 있다.
    • 090922
      12.21 완
    • 내이름은이한샘
      좋은강의 감사합니다~!!!
    • 이성준
      저눈 강의 코드대로 했을때, public 폴더에 있는 사진만 안나왔었는데, 현재 프로젝트 폴더에 사진이 담겨있는 폴더 넣어주고 해당 폴더 이름만 코드에 수정하니까 잘되네요.
      밑에 분들처럼 오류는 안나왔구요.
    • 오빠는다르다
      감사합니다~!!!!!
    • 상구미
      Whoisy님이 말씀해주신대로 그냥 static으로 코딩하면 Cannot GET /public/rabbit.jpg 등등의 에러를 뿜어냅니다.

      path 모듈 임포트 하고 아래 코드로 해결했습니다.

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

      전체 코드는 아래 링크를 확인해주세요.

      https://github.com.......js
    • Whoisy
      강의에서 말한 static을로 코딩하면 Not Found를 발생 하는 군요.
      정확한 위치(경로) 설정해야 합니다.

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

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

      __dirname 은 app.js 가 실행되는 현재 경로를 나타냅니다.
    • Seo Yun Seok Tudoistube
      express.static() 하니까 루트경로('/')로 인식되네요. 감사합니다^_____^!!!
    • Fang
      감사...
      대화보기
      • Fang-Answer
        관습적으로 public이라는 이름을 쓴다고 합디다.
        다른 이름을 주고 그 이름폴더내에 정적 파일을 넣어둔다면
        똑같이 작동 할 꺼에요.
        대화보기
        • Fang
          정적파일의 디렉토리를 꼭 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 자세히 보기