NextJS 환경 변수 지정하기 (+빌드)
요즘 NextJS로 프로젝트를 진행하고 있다.
여태껏 Vue로만 프로젝트를 해왔던터라 리액트에 적응하기 바쁘다.
운 좋게 배포.. 를 하게 됐는데 도메인과 포트 번호를 다르게 지정해줘야 하는 상황이 생겼다.
관련해서 찾아보니까 환경 변수를 지정해주면 되더라
그래서 NextJS의 환경 변수에 대해 찾아보았다.
NextJS 공식 레포에서 환경 변수와 관련된 예제들이 있었다.
NextJS의 환경 변수는 총 세 가지로 크게 나눌 수 있다.
1..env
(모든 환경)
2..env.development
(development 환경) - npm run dev로 실행 시
3..env.production
(production 환경) -
build 후 npm run start로 실행 시
단순 개발 시와 빌드 시 사용 할 도메인과 포트 번호를 나누어서 각각 환경 변수로 지정해주었다.
// .env.development
NEXT_PUBLIC_ENV_HOST=http://localhost
NEXT_PUBLIC_ENV_PORT=8089
// .env.production
NEXT_PUBLIC_ENV_HOST=(배포 url)
NEXT_PUBLIC_ENV_PORT=8080
이렇게 지정한 환경 변수는 아래처럼 사용할 수 있다.
// pages/api/index.js
const HOST = process.env.NEXT_PUBLIC_ENV_HOST
const PORT = process.env.NEXT_PUBLIC_ENV_PORT
const BASE_URL = `${HOST}:${PORT}`
const url = axios.create({
baseURL: BASE_URL,
headers: {
"Content-Type": `application/json;charset=UTF-8`,
"Access-Control-Allow-Origin": "*",
"Accept": "application/json"
}
});
package.json에 build:local
명령어를 추가해준다.
// package.json
"scripts": {
"dev": "next dev",
// 배포하기 전 로컬에서 개발
"build": "next build && next export",
// 배포를 위한 빌드
"build:local": "dotenv -e .env.development next build && next export",
// 로컬 환경에서 빌드 테스트
// 라이브러리를 이용해서 npm run build:local 명령어 실행 시
// .env.development 환경 변수를 사용하도록 해줌
"start": "next start",
"lint": "next lint"
}
정리
npm run build
→npm start
: 실서버에 배포를 하기 위한 빌드
host: (배포 도메인) / port: 8080
npm run build:local
→npm start
: 로컬에서 테스트를 하기 위한 빌드
host: http://localhost / port: 8089
Author And Source
이 문제에 관하여(NextJS 환경 변수 지정하기 (+빌드)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@uoayop/NextJS-환경-변수-지정하기-근데-빌드를-곁들인저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)