Node.js Express – 공개 정적 파일 제공

by

이 게시물은 node.js 및 express 패키지가 설치되어 있다고 가정합니다.

정적 파일이란 무엇입니까? (정적 파일)

  • 동적으로 변경되지 않는 파일
  • 이는 명시적으로 수정하지 않는 한 콘텐츠가 동일하게 유지됨을 의미합니다.
  • 이미지, CSS 파일, HTML 파일, JavaScript 파일 등
  • 웹 서버(익스프레스)에 적용 시 서버가 아닌 클라이언트 측에서 처리가 이루어지므로 보다 빠른 처리 속도를 제공합니다.

기본 구성

/* 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.static(root)
  • express.static : 정적 파일을 제공하는 기능
  • root: 정적 파일을 제공하는 루트 디렉토리를 지정합니다.

정적 파일 폴더 생성

  • 정적 파일 저장
    1. Visual Studio Code에서 공용 폴더 만들기
    2. public 폴더에 제공할 정적 파일 저장
  • 생성 예
    • 정적 파일 폴더는 일반적으로 public으로 이름이 지정됩니다.


정적 파일 제공 설정

  • express로 구성된 정적 파일 제공
  • 정적 파일 주소: ‘기본 URL/파일 이름’
    • 예) public/img/img.jpg의 경우, URL/img/img.jpg
  • 파일은 공개된 파일에서만 액세스할 수 있습니다.
// 정적 파일 사용
app.use(express.static( path.join(__dirname, '/public')))

정적 파일 이미지 넣기

  • 공용 폴더에 이미지 저장
  • 예 저장: public/img/img.jpg


URL 경로로 정적 파일 확인

  • 익스프레스 서버를 로컬에서 실행하고 정적 파일 경로에 액세스


참조