vite stage 개발/배포 모드 cli 설정

기존 셋업

api 요청은 stage 서버의 url인 `VITE_ACCOUNTS_BASE_URL` 환경변수로 지정한 주소로 요청을 보내서 스테이징 서버 요청/응답을 직접 받는다. 서버에서 응답으로 주는 페이지 주소나 redirect 페이지 url 정보는 `VITE_LOCAL_HOST` 라는 환경변수 주소로 관리해서 개발하면서 바로바로 서버 응답에 따른 페이지 ui 를 확인한다.

 

package.json

  "scripts": {
    "dev": "vite",
    "build": "vite build -m stage",
    "stage": "vite -m stage",
   }

 

환경변수 파일

개발 모드 환경변수

 

스테이징 모드 환경변수 

 

vite 개발서버 시작

`npm run dev` 명렁어로 로컬에서 vite 개발 서버 구동

 

`npm run stage` 명령어로 로컬에서 stage 모드 개발 서버 구동

 

이슈

개발환경에서는 redirect 페이지 url 정보로 localhost 주소가 필요한 것이므로 해당 cli로 잘 사용이 되었지만, 스테이징에 배포하니까 redirect url에 설정해둔 localhost:5174 정보가 그대로 들어가는 문제가 발생했다; 

회원가입 완료후 로그인 페이지가 뜨면 redirect_uri 쿼리파라미터 값에 `import.meta.env.VITE_LOCAL_HOST` 값을 넣어뒀는데, 스테이징 배포하니 이 로컬호스트 주소가 그대로 들어갔던 거다. 그래서 페이지가 화면에 뜨지않는 문제발생; 

 

 

해결

 

`stage` 모드로 동작시 로컬 개발 환경에서만 사용될 환경변수를 새로 지정해서, 로컬/배포 환경에 따라 적용되야하는 커맨드라인 인터페이스를 다르게 설정해준다. 

기존 스테이징 모드의 환경변수에는 배포 이후 표출되어야하는 실제 도메인 url을 적어준다.

 

환경변수 변경

스테이징 로컬 모드 환경변수

.env.stage.local 파일 추가

 

스테이징 모드 환경변수

 

package.json 변경

  "scripts": {
    "dev": "vite",
    "build": "vite build -m stage",
    "stage": "vite -m stage",
    "stage:local": "vite -m stage.local --port 5174",  //<-- 추가 
  },

 

이렇게 적용시켜두면, 로컬에서 스테이지 모드 개발 서버를 작동시킬때는 원하는대로 localhost 를 불러와 변경사항을 바로바로 확인하면서 개발가능하고, 스테이지 서버에 배포되고 나서는 서비스 도메인 주소가 잘 뜬다.

이제 터미널에서 `npm run stage:local` 명령어를 입력하면 .env.stage.local에 지정해둔 환경변수대로 스테이징 로컬 모드로 실행되어, 실제 스테이징 배포에는 영향을 주지않고 프론트 페이지를 개발하면서 확인하되 api는 스테이징 서버 api를 받아올 수 있어 개발/배포에 따른 상이한 설정을 cli를 통해 나름 자동화할 수 있다. 

 

Refs

https://ko.vitejs.dev/guide/env-and-mode#modes

https://ko.vitejs.dev/guide/cli