[nextjs] 서버 설정 파일 읽기

Nextjs

Nextjs는 서버 사이드 렌더링임에도 불구하고 기본적으로는 스크립트 대부분의 동작은 Client 브라우저에서 작동되게 된다.

그래서 nextjs에서는 fs 라이브러리를 사용할 수 없고 따라서 프로젝트 포함되어 있는 별도의 설정을 읽어올 수가 없다.

별별 꼼수를 다 사용해 봤지만 특별히 아 이런 방법이면 좋겠구나 이런 내용은 찾기 힘들었다.

그러던 중에서 가장 그럴듯한 방법을 찾아서 기록을 남겨두고자 한다.

반응형

먼저 왜 이런 변수가 필요한지 설명하고자 한다.

개발을 하던 중에 특정 사용자에 대해서는 Backend에 오는 정보를 살짝 바꾸어주어야 하는 필수가 발생했다. 그래서 이 사용자들의 아이디를 기준으로 이렇게 정보를 바꿔주고 싶은데 Frontend이다 보니 DB에 연결할 수도 없다.

그래서 이 리스트를 특정 파일에 등록해 두고 이 사용자들에게 권한을 열어주는 작업을 하고자 했다.

우선 프로젝트 루트에 파일을 생성하고 여기에 JSON 형태로 내용을 저장해 두었다.

여기서는 bypass.json이라고 하였고 내용은 다음과 같이 정의하였다.

728x90

["test", "json", "bypass"]

이제 프로그램에서 이 파일을 읽어와서 저장해 두어야 한다.

next.config.js을 열고 다음과 같이 작성한다.

const fs = require('fs');
const path = require('path');

const filePath = path.join(process.cwd(), 'bypass.json');	// 파일 경로 생성
const bypassList = JSON.parse(fs.readFileSync(filePath, 'utf-8');	// 파일 읽기

module.exports = {
  ...
  env: {
    BYPASS_LIST: bypassList,	// 읽어온 내용을 환경 변수로 등록
  },
  ...
};

반응형

next.config.js 파일은 nexjs 프로그램이 서버에서 구동될 때 해당 내용이 실행되기 때문에 여기서는 fs 라이브러리를 사용할 수 있다.

여기서 정의한 내용을 읽어와서 모듈에서 환경 변수로 등록해 준다.

그러면 이후 실행되는 파일에서는 process.env.BYPASS_LIST로 환경변수를 꺼내서 사용하는 것과 같이 사용할 수 있다.

이제 서버에서 등록된 환경변수로 설정 파일을 내용을 가져다 쓸 수 있게 되었다.

728x90

오늘도 하나 더 배웠다!