리액트 서버 배포시 url 환경 설정하기(.env파일)

로컬에서 개발을 하다가 서버에 배포시에는 url을 도메인에 맞게 설정을 해주어야 한다. 로컬에서 개발할때는 localhost:3000, localhost:8000으로 서버에 배포시에는 url을 api서버, 리액트서버 도메인을 직접 셋팅해주어야 한다.

 

이때 creact-react-app으로 프로젝트를 생성하면 .env파일을 사용하여 설정을 할수있다.

로컬 개발시에는 .env.local, 

서버 배포시에는 .env.production을 이용하게끔 하는 방법이다.

 

먼저 package.json 파일이 있는 루트 디렉토리에 .env.local 파일과, .env.production파일을 만든다.

 

.env.local

NODE_PATH=src/
REACT_APP_API_ROOT="http://localhost:8080"
REACT_APP_HOME_URL="http://localhost:3000"

.env.production

NODE_PATH=src/
REACT_APP_API_ROOT="https://api.yourdomain.net:8443"
REACT_APP_HOME_URL="https://www.yourdomain.net"

호출하는 쪽에서 사용하는 방식

export const API_BASE_URL = process.env.REACT_APP_API_ROOT;
export const HOME_URL = process.env.REACT_APP_HOME_URL;

const URL_SAVE_USER = `${API_BASE_URL}/api/v1/user`;
const URL_SINGIN = `${API_BASE_URL}/api/v1/authenticate`;
const URL_EXIST_USER = `${API_BASE_URL}/api/v1/exist_user`;

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

> npm run build

이상태로 빌드를 하면 .env.production이 적용이 안되는현상이 발생함, 리액트에서 빌드시에 자동으로 .env.production파일을 찾아서 빌드 되어 있지만 실제로 하니 안됨

 

그래서 env-cmd를 install 하고 scripts를 수정함

 

> npm install env-cmd

  "scripts": {
    "start": "react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

env-cmd -f 에서 -f를 빠져먹으니 .env파일을 찾을수 없다고 나오니 반드시 -f를 넣을것

>npm run build

 

빌드하고 서버에 적용하면 정상적으로 .evn.production이 적용이 되는 걸 확인할 수 있다.