React 개발 환경 세팅

리액트 개발환경 세팅하는 방법을 알아보자  간단하게만 설명할수 있으니 얼마 안걸릴것이다.

 

 

우선 리액트를 생성하고 기본적인 세팅을 마친다.

 

 

리액트에서 App.js에 들어가서  내가 만들 env에 대한 세팅을 해주어야 한다 우선 기본적으로 개발환경과 배포 환경에 따라 

 

세팅을 해주어야하기 때문에 

 

npm install env-cmd

환경변수에 따라 실행을 지원하는 env-cmd 를 설치해준다.

 

 

    "env-cmd": "^10.1.0",

package.json에 추가 env-cmd가 추가되었다면 다음과 같이 package.json에 선언해주어야한다.

 

 

  "scripts": {
    "start:staging": "env-cmd -e development react-scripts start",
    "start:prod": "env-cmd -e production react-scripts start",
    "build:staging": "env-cmd -e development react-scripts build",
    "build:prod": "env-cmd -e production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build"
  },

 

우선 스크립트 부분에 yarn start & npm start 시 기본적인 staging 개발 모드로 실행 하기 위해 "script"부분에 각각 해당 항목을 적어준다 env-cmd -e 개발모드 로 적어준다.

 

자그럼 적어주었다면 현재 내가 실행하는 api_key가 필요한데 

 

App.js 에 있는 폴더에 .env-cmdrc.json파일을 생성해준다.

 

{
    "development": {
        "REACT_APP_MY_API_KEY": "개발용 서버",
        "REACT_APP_ANOTHER_MY_API_KEY": "another-development-api-key-2"

    },
    "production": {
        "REACT_APP_MY_API_KEY": "배포용  서버",
        "REACT_APP_ANOTHER_MY_API_KEY": "another-production-api-key-2"

    }
}

json 파일안에는 develpoment 개발용 일때 실행될 서버 API와 배포시 실행될 production 서버를 작성할 json이 필요하다.

 

여기까지 작성이 완료되면 이제 console.log로 개발서버를 실행할때마다 어떤 서버인지 알려줄 필요가 있다.

 

 
import './App.css';

function App() {
  console.log(process.env.REACT_APP_MY_API_KEY)
  
  return (
    <div className="App">
      <header className="App-header">
          테스트
      </header>
    </div>
  );
}

export default App;

 

App.js 에 간단하게 console.log 를 남겨준다. 이제 맨 처음으로 개발 서버인 Production 서버를 실행해보겠다.

yarn start:staging

맨처음으로 나는 기본적으로 개발할 서버인 staging 서버를 실행해줄 것이다.

이렇게 개발용 서버로 실행이 되었다.

 

자그러면 이제 내가 배포를 하고싶은데 배포용 서버를 실행하고 싶다면 

 

yarn start:prod

실행결과

이렇게 배포용 서버가 실행된것을 알수있다. 개발시애는 yarn start:production으로 실행하고 개발하고

 

배포시에는 yarn start:prod 버전으로 실행해서 yarn build:prod하면 된다.

 

GitHub - Koras02/react-localhost-setting: api_key를 이용해서 상용환경