배포는 매우간단 요약
1.리액트를 빌드해서 브라우저가 해석할 수 있는 html,css,js로 만들어줘서 배포해야한다.
2.간단 테스트는 깃허브에해도되지만 여타 웹호스팅에하려면 결국 빌드한후 build/index.html을 보여주면된다.
3.package.json에
"homepage":"http://flykimjiwon.dothome.co.kr/shop"이와같이 추가해준다.
4.
npn run build
yarn build이와같은 명령어를 터미널에 입력하면 10초정도 걸리고 빌드가 완료된다.
그럼 build안에 있는 파일만 업로드하면끝
1)깃허브에하는경우
-본인아이디.github.io라는 레포지토리를 만든다.
- build파일을 그대로 올린다.
-본인아이디.github.io/index.html로 접속하면된다.
그리고 추가 프로젝트를 계속만들고싶으면 아무 레포지토리 만들고
본인아이디.github.io/새로만든레포지토리이름/index.html이런식으로 계속 추가하고 만들면됨
바로될 때 도 있지만 5-10분정도 걸릴때도있다, 걱정하지말고 기다리기!
2)웹호스팅
build/index.html 이 보이게 설정만하면됨
브라우저 라우팅같은경우 이와같이 배포하면 잘 안될 수 있는데
해결방법은 위의 글 3개를 보고 해결했다.
1.hashrouter를 사용해서 #주소로이동하게한다.
2.BrowserRouter에다가 basename을 추가하면된다.
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
Deployment | Create React App
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /st
create-react-app.dev
https://reactjs.org/docs/code-splitting.html#route-based-code-splitting
Code-Splitting – React
A JavaScript library for building user interfaces
reactjs.org
[React] react-router 적용한 React 앱을 github pages로 배포하는 법
이 글은 당신이 create-react-app과 react-router를 사용 중이라고 가정하고 있습니다
medium.com
'React' 카테고리의 다른 글
| React Tab UI,(react-transition-group) (0) | 2022.01.16 |
|---|---|
| React context API (0) | 2022.01.16 |
| React Component중첩, props, state (0) | 2022.01.15 |
| React Ajax (0) | 2022.01.15 |
| React useEffect (0) | 2022.01.15 |
