Node Static Server 띄우는 방법들

정직인 서버를 띄우는 방법들에 대해서 알아보았다.

SPA를 빌드 후 배포한다거나, 단순히 이미지나 html로 이루어진 웹페이지를 배포한다거나 할 때 복잡한 서버의 필요 없이 정적 서버를 띄워 웹 사이트에 접근하게 만들 수 있다.

이에 대한 여러가지 방법들에 대해서 알아보고, 기록하였다.

 

serve, http-server와 같은 라이브러리 사용하기

CRA로 생성한 리액트 웹 어플리케이션의 빌드 명령어를 사용하면, 터미널에 친절하게 serve를 사용하여 정적 서버를 띄우는 방법을 알려준다.

npm install -g serve
serve -s build

위의 명령어로 serve를 설치하고, build 폴더 내부의 빌드된 리액트 어플리케이션을 정적 서버에 띄워준다.

이와 유사하게 http-server 라이브러리 역시 정적 서버 구성하고 실행시켜준다.

공통점으로는 별다른 설정 없이 자동으로 index.html 파일을 찾아 서버의 응답으로 전달해준다는 점이다.

 

어떻게 보면, 정형화된 정적 웹 사이트의 패턴을 분석해서 index.html이나 public폴더와 같은 구조를 알아서 파악하여 서버를 생성해주는 라이브러리가 아닌가 싶었다.

 

🦄 추가적으로 http-server는 SSL/TLS 설정을 할 수 있다.

 

https://www.npmjs.com/package/serve

serve

https://www.npmjs.com/package/http-server

http-server

 

pm2 static server 기능 사용하기

무중단 서비스 제공을 위해서 사용하는 daemon process manager, pm2는 static server를 실행해주는 기능도 제공한다.

pm2 serve <path> <port>

위와 같은 명령어를 통해서 정적 서버를 실행할 수 있고, --spa와 같은 옵션을 사용하여 모든 요청에 대해서 index.html을 전달하도록 설정할 수도 있다.

 

Process file을 수정하여 환경변수를 설정할 수 있는데, 포트 번호나 서버 경로, 보안 설정을 할 수 있다.

 

🌈 다만, HTTPS 설정을 위해서는 추가적으로 nginx나 apache의 설치가 필요할 수 있다.

 

https://pm2.keymetrics.io/docs/usage/expose/

PM2 - Expose static file over http

 

직접 서버 구현하기

기존의 내가 작성한 포스트를 참고해보면, express를 사용하여 다음과 같은 코드를 작성할 수 있다.

 

const express = require('express')
const app = express()

app.use(express.static('./public'))

app.get('/*', function (req, res) {
  res.sendFile('./index.html')
})

const port = 3000
app.listen(port, () => {
  console.log(`port ${port}, static server is running...`)
})

 

해당 js 파일과 같은 위치에 index.html이 존재하고, 정적 파일들은 public에 모여있다.

해당 서버를 실행함으로써, 서버 내의 정적 자원에 대한 응답을 할 수 있다.

 

🎉 위의 서버를 배포하고 HTTPS를 설정하고자 한다면, nginx와 같은 웹 서버의 리버스 프록시 기능을 사용해야 한다.

무중단 배포를 위해서 추가적으로 pm2를 사용할 수 있다.

 

‼️ 그렇다면, 해당 서버는 pm2를 통해 직접 static server를 띄우는 방법보다 더 번거로운 게 아닌가?

그럴 수 있지만, 위의 서버는 라우팅 설정이 직접 가능하기에, 사용자가 서버를 커스텀할 수 있다는 장점이 있다.

 

단순 Static Server가 필요하다면, pm2나 serve, http-server와 같은 방법을 사용하는 것이 더 빠르고 효율적일 수 있는 것 같다.