환경변수_Next.js

miin·2022년 3월 28일
0

Next.js

목록 보기
4/11
post-thumbnail

정의

  • 일반적으로 우리는 코드베이스는 하나만 관리하고, 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포한다. 어느 환경에 배포하는냐에 따라서 다르게 설정해야하는 항목은 보통 운영체제 레벨에서 환경 변수를 통해 관리하게 된다.
  • 대표적인 예로, 개발 환경에서는 로컬DB를 사용해야하는데, 운영 환경에서는 원격 DB를 사용해야하는 경우가 있다. 뿐만아니라 DB pw나 API key와 같은 인증정보는 공개된 코드 저장소에 올리면 안되기 때문에 환경변수로 저장해놓고 사용하는것이 일반적이다
  • 즉 보안에 필요한 값들을 넣어준다
  • 기본적으로 환경변수는 node.js환경에서만 사용할 수 있으므로 브라우저에 노출되지 않는다

사용

  • node.js에서 환경 변수에 접근할 때는 process.env라는 내장 자바스크립트 객체를 사용한다.
  • process는 전역 객체여서 별도로 임포트해야하는 모듈이 없으며 애플리케이션 어디에서든지 접근이 가능하다

node

  • .env.변수명 파일 생성
name = PRODECTION //node 환경에서 사용
//browser 환경에서 사용
NEXT_PUBLIC_API_URL = http://make.com/api/v1/products.json?brand=maybelline
  • [id].js - getServerSideProps(윈도우를 쓰면 에러남)에서 작성
  • process.env.변수명
export async function getServerSideProps(context){
  const id = context.params.id;
  const apiUrl = `http://makue.com/api/v1/prodects/${id}.json`;
  const res = await axios.get(apiUrl);
  const data = res.data;
  
  return{
    props:{
      item: data,
      name: process.env.name
    },
  };
}

browser

  • .env.변수명 파일 생성
name = PRODECTION //node 환경에서 사용
//browser 환경에서 사용
NEXT_PUBLIC_API_URL = http://make.com/api/v1/products.json?brand=maybelline
  • index.js
  • process.env.NEXTPUBLIC변수명
const API_URL = process.env.NEXT_PUBLIC_API_URL

0개의 댓글