인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

Ian님의 프로필 이미지
Ian

작성한 질문수

Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)

env 환경변수 설정하는 방법이 궁금합니다.

해결된 질문

작성

·

975

0

안녕하세요.
해당 강의 수강하면서 프로젝트 진행 중에 궁금한 점이 있어 질문드립니다.
실무 환경에서 axios를 이용해 API 호출을 한다고 가정하였을 때, [local, stage, prod] 와 같은 다양한 환경에 대하여 API 호출 도메인이 달라지게 됩니다.
vite를 사용하였을 때에는 .env.local, .env.stage, .env.prod와 같이 환경에 따른 변수를 지정하고, vite --mode local 과 같은 형태로 실행하는 환경을 설정할 수 있었는데요.
이러한 다양한 환경에 다른 값을 지정해야할 떄에 어떻게 사용하시는지 궁금합니다.

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 :)

환경변수 설정 방법 공유드립니다.

  1. dotenv 패키지를 설치합니다.

npm install --save-dev dotenv
  1. 원하는 환경설정 파일을 프로젝트 루트 디렉토리에 위치 시킵니다.

.env.local
.env.stage
.env.prod
  1. quasar.config.js파일에서 env 옵션 설정

const env = require('dotenv').config({
  path: `.env.${process.env.ENV_FILE.toLowerCase()}`,
}).parsed;

//...

module.exports = configure(function (/* ctx */) {
  return {
    // ... 중략 ...
    env: {
      ...env,
    },
// ... 중략 ...
  1. 빌드 및 개발서버 실행

ENV_FILE=stage quasar build # 빌드
ENV_FILE=stage quasar dev  # 개발서버 실행
  1. 환경 변수 사용시

process.env.환경변수

감사합니다 🙂

Ian님의 프로필 이미지
Ian
질문자

감사합니다!

Ian님의 프로필 이미지
Ian

작성한 질문수

질문하기