Node.js Express - 정적 파일 제공하기(public static file)

 

본 포스팅은 node.js와 express 패키지가 설치되어있다는 가정하에 진행합니다.

---

정적 파일이란? (static file)

• 동적으로 변경되지 않는 파일
• 명시적으로 수정하지 않는 한 내용이 동일하게 유지 되는 것을 의미
• 이미지, CSS 파일, HTML 파일, JavaScript 파일 등
• 웹 서버(express)에 적용해서 말하자면 서버에서 처리하지 않고 클라이언트측에서 처리하여 보다 빠른 처리 속도 제공

---

기본 구성

/* index.js */

// express 프레임워크 객체 생성
const express = require('express');
// express의 새 인스턴스 할당
const app = express();

// path 사용
const path = require('path');

app.get('/', function (req, res) {
    // code
});

// 해당 포트로 서버를 시작하고 들어오는 요청 수신
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

---

express에서 정적 파일 제공하기

구문

express.static(root)

• express.static : 정적 파일을 제공하는 기능
• root : 정적 파일을 제공하는 루트 디렉토리 지정

---

정적 파일 폴더 생성

• 정적 파일 저장하기
  1. Visual Studio Code에서 public 폴더 생성
  2. public 폴더 내에 제공할 정적 파일 저장
• 생성 예시
  • 정적 파일 폴더는 일반적으로 public 의 이름을 많이 사용함

---

정적 파일 제공 설정

• express 에서 설정한 정적 파일 제공하기
• 정적 파일 주소 : '기본URL/파일이름'
  • 예) public/img/img.jpg의 경우, URL/img/img.jpg
• 파일은 오로지 public 안에 있는 파일만을 접근할 수 있음

// 정적 파일 사용
app.use(express.static( path.join(__dirname, '/public')))

---

정적 파일 이미지 넣기

• public 폴더 안에 이미지를 저장
• 저장 예시 : public/img/img.jpg

---

URL 경로로 정적 파일 확인해보기

• 로컬로 express 서버를 실행하고 정적 파일 경로 접근

---

참고

• expressjs.com - Getting started - Serving static files in Express