[React] 포트 변경 및 기본 URL 변경하기

React 기본 포트 변경과 프로젝트를 start했을 때 기본 URL을 변경하는 방법에 대해 정리하려고 한다.

현재 프로젝트는 Spring Boot로 이루어진 프로젝트와 연결되어 있는 상태이다.

 

포트 변경

package.js 파일에서 설정을 변경해준다. 기본 포트인 3000에서 3031로 변경하였다.

Window 환경

"scripts": {
        "start": "set PORT=3031 && react-scripts start",
		...
    },

Mac OS, Linux 환경

"scripts": {
        "start": "export PORT=3031 && react-scripts start",
		...
    },

 

기본 URL 변경

기본 URL을 변경하는 방법에는 크게 2가지가 있다.

방법 1

package.json 파일에 homepage 속성을 추가한다.

...
    "proxy": "http://localhost:3029/myPage",
    "homepage": "http://localhost:3000/myPage"
}

proxy는 함께 실행된 Spring Boot의 포트와 주소를 작성하였다.

homepage 속성을 추가하면 React App이 build 될 때 localhost:3000으로 실행되는 것이 아니라 localhost:3000/myPage로 경로를 설정해준다.

 

방법 2

package.json에 기본 경로를 설정하는 것이 아닌, react-router를 사용한다.

 

package.json

...
    "proxy": "http://localhost:3029/myPage"
}

 

index.js

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route exact path='/' element={<Navigate to="/myPage" replace />} />
          <Route exact path='/myPage' element={<Map><App /></Map>} />
        </Routes>
      </BrowserRouter>
    </React.StrictMode>
  </>
);

react-router의 nevigation을 사용하게 되면 기본 URL인 '/'을 myPage로 이동시켜, 처음 뜨는 페이지를 myPage로 설정할 수 있다.

 

---

[ 참조 ]

https://7942yongdae.tistory.com/4

https://medium.com/hivelab-dev/react-js-tutorial-part2-c1be2c6dca79