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. 도전자
    완료!
  2. 굼벵이
    완료
  3. 완료!
  4. 칼립소
    저 같이 헤메실분들이 있을거 같아 올려봅니다!

    이고잉님이 간단하게 public 디렉토리에 사진을 하나 저장하라고 하신거는

    server_side_javascript 폴더에 public이름을 가진 폴더 만들어 주시구요 그 안에 사진 넣으시고

    사진이름은 반드시 route.png로 해주셔야 합니다~! 그러면 사진 잘 뜰꺼에요!
  5. 이수하
    완료!
  6. questcoin
    안 되시는 분들은 디렉토리명을 public말고 다른 이름으로 해보세요
  7. 저도 안되네요....진도 빨리 나가고싶은데 해결방법 없을까요ㅠㅠ
    대화보기
    • 0808 fin
    • 이승우
      20180803
      감사합니다~
    • 김혜경
      6.06
    • 쫑이
      강의내용과는 다르게 경로인식을 못했는데
      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 자세히 보기