Javascript

[Javascript] node js로 정적 html 파일 서빙하기 (express)

evan.k 2023. 2. 23. 18:13

static html 파일을 서버에서 serving 해야 할 필요가 있다.

daum postcode api 사용등 정적 파일 환경에서 테스트가 불가능한 것들이 예로 들 수 있을 것 같다.

 

방법은 매우 간단하다.

 

방법

먼저 express 프레임워크를 설치한다.

npm install express --save

설치가 완료 되었다면 해당 디렉토리에 server/index.js 파일을 추가한다.

index.js 파일을 수정한다.

const express = require("express");
const app = express();
const PORT = 3000;

app.use(express.static("/Users/myname/Desktop/static")); // directory 경로

app.get("/", (req, res) => {
  res.sendFile("/Users/myname/Desktop/static/index.html"); // index.html 경로
});

// 서버 실행
app.listen(PORT, () => {
  console.log(`Server started at port: ${PORT}`);
});

터미널에서 node index.js 명령어로 서버를 시작해주면 아래 이미지 처럼 정상적으로 출력되는 것을 확인할 수 있다.

http://localhost:3000 에 접속해보면 아래 이미지 처럼 index.html에 작성했던 내용이 렌더링 된다.

만약 https 프로토콜을 사용해야 한다면 ngrok을 이용하여 expose 해주면 ngrok 주소로 변환되어 https 프로토콜에서 사용할 수 있다.