React localhost실행 변수주기

간단하게 시작해보자.

yarn add serve

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prod": "npm run-script build && serve build"
  },

yarn start 할때 localhost:3000으로 들어가고 yarn prod 배포 할때 localhost:5000으로 줄것이다.

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
           현재 개발 모드 : <b>{process.env.NODE_ENV}</b>
        </p>
      </header>
    </div>
  );
}

export default App;

 

App.js로가서 현재 개발모드를 명시해준다.

 

먼저 yarn start로 실행해보겠다.

개발자 모드로 localhost:3000이 실행되었다.

 

이번에는 yarn prod 로 배포환경으로 시작하면

localhost:5000 서버로 실행되고 개발모드가 production모드로 바뀐다.

 

 

React App