- 배포하기 전 체크할 사항
(1) 일단 미리보기 띄워보셨을 때 콘솔창, 터미널에 에러만 안나면 됨
warning 메세지는 가볍게 개무시 가능
(2) 혹시 사이트를 배포할때
http://jaewoong.com/ 여기에 배포하는 경우엔 따로 설정 필요없는데
http://jaewoong.com/blog/ 이런 하위 경로에 배포하고 싶으면 설명이 따로 필요함
"homepage": "http://jaewoong.com/blog",homepage라는 key값을 추가한 후 배포할 사이트 경로를 추가하면 됨
- 별 문제가 없다면 이제 터미널에 build 명령어를 입력
build 하려면 리액트프로젝트에서 터미널켜고
npm run build 입력하면 작업 프로젝트 폴더 내에 build 라는 폴더 생성됨
내가 짰던 코드를 html, css ,js 로 변환해서 담아주는거임
그리구 build 폴더 안에 있는 내용 전부 서버에 올리면 됨 index.html이 메인 페이지
- 근데 우린 무료 호스팅해주는 github pages에 올릴거니까
깃헙 들어가서 우측상단 + 버튼 누르고 New Repository 클릭
그담에 노란곳에 다음과 같이 하면됨
여기서 Repository name 은 왼쪽에 뜨는 내아이디.github.io 라고 입력
- Repository 생성이 되었다면 파일을 여기 올리면됨
Repository 생성이 끝나면 repository로 자동으로 들어가지는데 거기에 build 폴더 내 파일 전부 드래그앤 드롭
주의할게 build 폴더를 드래그드롭 하는게 아니라 build 폴더 안의 내용물을 드래그드롭 해야됨
그리고 초록 버튼 누르면 끝 페이지 만드는데 시간 좀 걸림 10분정도?
흔한 github pages 에러 404페이지 왜 뜸요
-
10분 더 기다리셈
-
ctrl + shift + r 을 이용해 새로고침 해보셈
-
repository 생성할때 아이디를 잘못적은거임. 대소문자 틀리지말고 정확히 적어야함
정확히 안적었으면 그냥 다시 하나 새로 만드셈
Q1. 첫 페이지 로딩 속도를 빠르게 하려면
원래 리액트, 뷰로 만든 웹앱들은 첫 방문시 필요한 파일을 전부 로드함
트래픽을 조금이라도 줄이고 싶으면 컴포넌트들을 lazy하게 로딩하는 방법을 사용할 수도 있음
공식 튜토리얼에 있는 lazy 함수 : 링크
그리고 어짜피 한국에서 github pages는 개느림. 서버가 미국에 있어서 이미지 같은거 로드할 때 한세월임
Q2. 업데이트 사항이 생기면 배포 또 어케함?
build 또 하고 그 파일 그대로 다시 업로드하면 됨
build 할 때 마다 CSS, JS 파일 명이 무작위로 다시 생성
그래서 새로 배포할 때마다 사이트 방문자들은 새로운 CSS,JS 파일을 이용할 수 있음
Q3. build 할 때 압축 시키지말고 남기고 싶은 파일은?
./ 부터 시작하는 경로로 첨부한 이미지, js 파일들은 전부 짜부되고 이름이 변함
이름이 변하지 않게 하고 싶으면 public 폴더안에 넣고 build 해보삼
그럼 build 하고 나서도 그대로 루트경로에 파일이 남아있음
(개발시 그런 파일들을 이용하고 싶으면 public 폴더에 보관하고 ./ 이게 아닌 / 경로로 import 해오면 됨)
Q4. 서버에 올렸는데 왜 접속하면 이상한 페이지가 나오거나 일부 img, css파일이 로드가 안되는 것입니까요
대부분 경로 문제임
build 할 때 에러 안나셨겠죠
혹시 하위폴더에 배포하신거 아닙니까
배포한 페이지가 안나오면 크롬개발자도구 열어서 index.html이 쓰고있는 css, js, img 파일들의 경로가 제대로 되어있는지 체크 ㄱ ㄱ
Q5. 메인페이지 말고 왜 특정 페이지로 접속하면 404 에러가 뜨나요
어쩌구.github.io/detail/1 이렇게 세부 페이지 URL을 주소창에 직접 입력하면
찾는 페이지가 없어요~ 이렇게 404 에러가 날 수 있음
이건 서버에서 "누군가 어쩌구.github.io/어쩌구 로 접속하면 메인페이지로 안내하세요~"
라고 API 개발을 해놔야됨
아니면 URL에 #기호가 붙는 hashRouter를 리액트 라우터 코드짤 때 쓰던가 해야됨
