[REACT] 만든 리액트 사이트 build & Github Pages로 배포해보기
0. 배포하기 전 체크사항
(1) 일단 미리보기 띄워볼 때 콘솔창, 터미널에 에러만 안나면 된다.
warning 메세지는 사이트 구동에 별 영향이 없기 때문에 테스트해볼 땐 무시해도 된다.
(2) 혹시 사이트를 배포할 때
http://codingapple.com/ 여기에 배포하는 경우엔 따로 설정이 필요없이 대충 해도 되지만
http://codingapple.com/blog/ 이런 하위 경로에 배포하고 싶으면 프로젝트에 설정이 따로 필요합니다.
create-react-app 을 사용해서 프로젝트를 만들었다면
프로젝트 파일 중 package.json 이라는 파일을 오픈해서
"homepage": "/blog",
homepage 라는 항목을 추가한 후 배포할 사이트 경로를 뒤에 추가하고 진행하자
그리고 리액트 라우터가 설치되어있다면 라우터가 제공하는 basename="" 속성을 추가하는게 라우팅이 잘 될 것이다.
vite create를 사용해서 프로젝트를 만들었으면
프로젝트 파일 중 vite.config.js 파일을 오픈해서
export default defineConfig({
어쩌구~~
base : '/blog'
})
base : '/배포할사이트경로' 입력해주고 진행하자
그러면 css 파일을 사용시 /blog/css파일.css 이런 식으로 경로가 설정된다.
base: './' 입력하고 진행해도 된다.
그러면 css 파일들 사용시 ./css파일.css 이런식으로 경로가 설정된다.
1. 빌드작업
JSX 같은 문법들은 브라우저가 해석할 수 없으니 그대로 배포할 수 없다.
그래서 이런 문법들을 CSS, JS, HTML 문법으로 바꿔주는 작업이 필요하다.
이것을 컴파일 또는 build 라고 한다.
build 하려면 리액트프로젝트에서 터미널을 켠 후 npm run build 를 입력하면 된다.
npm run build
그러면 작업 프로젝트 폴더 내에 dist 또는 build 폴더가 생성되는데
짰던 코드를 전부 .html .css .js 파일로 변환해서 담아준다.
index.html이 메인페이지이고
이 내용 그대로 올리면 배포 완료
2. 무료 호스팅해주는 github pages에 올려보자
간단하게 HTML/CSS/JS 파일을 무료로 호스팅해주는 고마운 사이트이다.
일단 github에 로그인 한 후 , 새로운 Repository 생성한 후,
Repository name 은 github pages로 발행하고 싶다면
꼭 여러분깃헙아이디.github.io 라고 입력해야 한다고한다.
github.io 말고 임의로 설정하시면 여러분 코딩인생 끝이 난다는데 이유는 잘 모르겠다
그리고 README 파일 생성도 체크한 뒤에 생성해주자
3. Repository에 html 파일 올리기
Repository 생성이 끝나면 생성한 레포에서
dist 폴더 내의 파일을 전부 드래그 앤 드롭하자.
드래그 앤 드롭하고 초록버튼까지 눌러주면 배포 끝
5분 정도 후에 https://내아이디.github.io 라고 주소창에 입력하면 나의 사이트가 보인다
(주의) dist폴더를 드래그 앤 드롭하는게 아니라 dist 폴더 안의 내용물만 올리자
실수했다면 repository 과감하게 삭제하고 다시 만드는게 더 쉽다.
(옵션) 내아이디.github.io 말고 다른 이름의 레포지토리를 쓰려면?
이제 다른 이름의 레포를 만들어도 거기있는 html 파일을 호스팅할 수 있게 되었는데 어떻게 하냐면
1. npm run build 하기 전에 위의 0번항목처럼 /서브폴더에 발행하겠다고 설정
2. 위에서 만든 내이름.github.io 라는 레포는 냅두고
3. 새로 프로젝트를 올릴 레포를 아무 이름으로 만들자
4. 그 레포에 똑같이 dist 안의 HTML CSS JS 파일을 업로드
5. 레포의 setting 메뉴에 들어가서 Github Pages 부분을 찾고
6. source 부분을 None이 아니라 main 이런걸로 바꿔주고 저장
7. 그럼 셋팅 끝이고 이제 내아이디.github.io/repository이름 으로 들어가면 레포에있던 html을 구경가능하다
안보이면
내아이디.github.io/reposityro이름/html파일명.html
이렇게 직접 들어가보자.