ReactJS 배포하기 - 배포주소가 루트가 아닐때 설정방법

리액트 앱을 만들고 배포할때, 배포하는 사이트의 루트가 리액트웹의 접속 주소가 아닐때 설정하는 방법이다.

인터넷으로 열심히 찾아보니, 

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 밑에 추가한다.

  "name": "myapp",

  "homepage" : "http://www.mysite.com/reactapp",

 

 

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 으로 접속했을때 잘 동작한다.!!