이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다.
여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라
build용 파일을 생성하신 후 그걸 올려야합니다.
왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 리액트의 이상한 state, JSX 이런거 전혀 못알아듣습니다.
그래서 리액트 프로젝트를 build 라는걸 하시면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다.
그리고 그걸 어딘가 서버에 올려야 사용자들이 여러분의 사이트를 구경할 수 있는 것임
우리도 build를 해본 후 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 해보도록 합시다.
빨리 github.com 들어가서 계정을 먼저 하나 생성해오십시오.
서버를 만들줄 아는 똑똑이라면
리액트는 이쁜 HTML파일 만들어주는 툴이기 때문에
리액트로 열심히 프로젝트 만들고 npm run build 입력하면 dist 또는 build 이름의 폴더에 index.html 파일이 생성됩니다.
그리고 "어떤 놈이 메인페이지로 접속하면 /dist/index.html 파일 전송해라" 라고 서버 API를 작성하면 끝임
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 입력하면 됩니다.
▲ 그럼 여러분 작업 프로젝트 폴더 내에 dist 또는 build 폴더가 생성되는데
여러분이 짰던 코드를 전부 .html .css .js 파일로 변환해서 거기 담아줍니다.
index.html이 메인페이지입니다.
그 내용 그대로 어디 올리면 배포끝임
2. 근데 우린 무료 호스팅해주는 github pages에 올릴겁니다
간단하게 HTML/CSS/JS 파일을 무료로 호스팅해주는 고마운 사이트입니다.
일단 github.com에 들어가셔서 로그인까지 하십시오.
▲ 그 다음엔 우측 상단에 있는 New Repository 메뉴를 찾아서 누릅시다.
▲ Repository name 은 github pages로 발행하고 싶다면
꼭 여러분깃헙아이디.github.io 라고 입력하셔야합니다.
여러분아이디.github.io 말고 임의로 설정하시면 여러분 코딩인생 끝납니다.
그리고 README 파일 생성도 체크한 뒤에 생성해주면 됩니다.
3. Repository에 html 파일 올리기
Repository 생성이 끝나면 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/repository이름/html파일명.html
이렇게 직접 들어가봅시다.
Q. 왜 사이트 주소로 접속했는데 404 페이지가 뜨죠?
- 5분 더 기다려보십시오.
- ctrl + shift + r 을 이용해 새로고침 해보십시오.
- 혹은 repository 생성하실 때 내아이디.github.io가 아니라 뭔가 잘못적은 것임
Q. 업데이트 사항이 생기면?
npm run build 또 하고 그 파일 그대로 다시 업로드하면 됩니다.
빌드할 때 마다 CSS, JS 파일 명이 무작위로 다시 생성되기 때문에
그래서 새로 배포할 때마다 사이트 방문자들은 새로운 CSS,JS 파일을 이용할 수 있습니다.
Q. 빌드할 때 압축 시키지말고 남기고 싶은 파일은?
여러분이 src폴더에 넣었던 jpg, js, css 파일들은 전부 짜부되고 이름이 변합니다.
이름이 변하지 않게 하고 싶으면 public 폴더안에 넣고 빌드해보십시오.
그럼 빌드하고 나서도 그대로 루트경로에 파일이 남아있습니다.
(개발시 그런 파일들을 이용하고 싶으면 public 폴더에 보관하고 / 경로로 import 해오면 됩니다)
Q. 서버에 올렸는데 왜 접속하면 이상한 페이지가 나오거나 일부 img, css파일이 로드가 안되는 것이죠?
- build 할 때 에러 안났겠죠
- 혹시 하위폴더에 배포한거 아닙니까
- 배포한 페이지가 안나오면 크롬개발자도구 열어서
index.html이 쓰고있는 css, js, img 파일들의 경로가 제대로 되어있는지 체크해봅시다.
Q. 메인페이지 말고 왜 특정 페이지로 접속하면 404 에러가 뜨나요?
리액트 라우터를 쓰는 경우
어쩌구.github.io/detail/1 이렇게 세부 페이지 URL을 주소창에 직접 입력하면
찾는 페이지가 없어요~ 이렇게 404 에러가 날 수 있습니다.
이건 서버에서
"누군가 /어쩌구 로 접속하면 메인페이지로 안내하세요~"
라고 API 개발을 해놔야합니다.
하지만 github pages는 우리가 서버를 어쩌고 할 수 없어서 어쩔 수 없습니다.
아니면 URL에 #기호가 붙는 hashRouter를 리액트 라우터 사용시 설정해놓든가 하면 됩니다.
URL에 # 뒤에 붙은 내용은 서버로 전송되지 않습니다.
-
Add a note