리액트 앱을 만들고 배포할때, 배포하는 사이트의 루트가 리액트웹의 접속 주소가 아닐때 설정하는 방법이다.
인터넷으로 열심히 찾아보니,
cross-env, env-cmd 모듈을 이용하는 방법이 많이 있는데,
삽질을 열심히 하고 알아낸 방법이다.
# 배포하는 사이트에 자신의 앱 주소가
http://www.mysite.com/reactapp 이라고 가정할때,
1. env-cmd 모듈을 설치한다.
npm i env-cmd
2. 리액트 웹 메인 라우트에 basename변수를 추가 한다.
<BrowserRouter basename={process.env.REACT_APP_PUBLIC_URL} >
<MainTitleText>심쿵이 애비 미니 블로그</MainTitleText>
2. 로컬 테스트 용 변수 설정 .env.local
테스트 환경에서는 루트주소( localhost:3000 ) 로 접속하기 때문에 해당변수는 / 로 들어가게 하면된다.
package.json 파일이 있는곳에 .env.local 파일을 만들고 안에 변수를 선언한다.
# 아무것도 안써줌
REACT_APP_PUBLIC_URL=
3. 배포용 변수 설정 .env.production
배포 환경에서는 http://www.mysite.com/reactapp 로 접속 해야 되기 때문에 해당변수는 /reactapp을 써줘야 한다.
2와 같은 위치에 .env.production 파일을 만들고 변수를 선언한다.
REACT_APP_PUBLIC_URL=/reactapp/
4. package.json 파일에 homepage 를 추가한다.
name 밑에 추가한다.
5. scripts 를 수정한다.
"scripts": {
"start": "env-cmd -f .env.local react-scripts start",
"build": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},테스트 할때 npm start 하면 최초 뜨는 주소가 http://localhost:3000/reactapp 으로 되지만, reactapp 으로 바꿔서 테스트 하면되고, 배포용 만들때 npm run build 로 하고 배포에 업로드하면 http://www.mysite.com/reactapp 으로 접속했을때 잘 동작한다.!!
