[React] 리액트 사이트 build & Github Pages로 배포하기

1. 리액트 사이트 build

각자 만들었던 리액트 사이트를 배포하려면 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성한 후 그 파일을 올려야합니다. 왜냐하면, 웹브라우저는 HTML, CSS, JS만 해석할 수 있어서 리액트의 state, JSX, SASS 등을 해석하지 못합니다. 그래서 리액트 프로젝트를 build하면 HTML, CSS, JS 언어로 바꿔주고 이 파일을 웹에 올려야 사용자들의 리액트 사이트를 볼 수 있습니다.

 

저는 리액트 프로젝트를 build하고 무료로 HTML 파일을 호스팅해주는 GitHub Pages를 이용해 배포까지 해보도록 하겠습니다.

 

🔔 만약 웹서버를 가지고 있다면?
: 리액트 프로젝트 만들고 build하면 index.html 파일이 생성됩니다.
 여기에 웹서버로 접속하면 build/index.html 파일 전송하는 서버 API를 작성하면 간단한 배포가 끝납니다.

---

1) 배포하기 전 체크할 사항

1️⃣ 미리보기 띄워봤을 때 console창과 터미널에 에러가 나면 안됩니다.

  (warning 메세지는 구동에 별 영향이 없기 때문에 상관하지 않아도 됩니다.)

 

2️⃣ 'http://codingapple.com/' 여기에 배포하는 경우엔 따로 설정이 필요없지만,

  'http://codingapple.com/blog' 이런 식으로 하위 경로에 배포하고 싶다면 프로젝트 설정이 따로 필요합니다.

    - 프로젝트 파일 중 package.json 이라는 파일을 오픈합니다.

    - 큰 Object가 하나 있는데 그 Object에 homepage라는 key값을 추가합니다.

    - 배포할 사이트 경로를 추가하면 됩니다.

 

3️⃣ React Router가 설치되어있다면, Router가 제공하는 basename="" 속성을 추가합니다.

  자세한 내용은 https://create-react-app.dev/docs/deployment/#building-for-relative-paths 을 참고해주세요.

---

2) 이상이 없다면 터미널에 build 명령어를 입력합니다.

1️⃣ 리액트 프로젝트에서 터미널을 켠 후 'npm run build' 혹은

  yarn이 설치되어 있으신 분은 'yarn build'를 입력합니다.

 

2️⃣ 그럼 작업 프로젝트 폴더 내에 'build'라는 폴더가 생성됩니다.

  build 폴더 안에 index.html / CSS / JS 파일이 전부 담겨있기 때문에 이 파일을 모두 서버에 올리면 됩니다.

---

2. Github Pages에 배포하기

1) 일단 github.com에서 로그인한 후, 우측 상단 [+] 버튼에 있는 [New Repository] 버튼을 클릭합니다.

 

 

2) 그리고 아래 사진과 같이 입력합니다.

  🔔 Repository name은 반드시 왼쪽에 뜨는 아이디.github.io 라고 입력해야합니다.

    그리고 README 파일 생성도 체크한 뒤에 Repository를 생성해주면 됩니다.

 

 

3) Repository 생성이 되었다면 build 내에 있는 모든 파일을 올리시면 됩니다.

  📌 꼭 build 폴더가 아닌 build 폴더 안의 내용을 드래그 앤 드롭해주세요 !

 

 

 

4) [Commit changes] 버튼을 클릭하면 배포 끝 !

 

이제 10분 후 https://아이디.github.io 로 들어가면 사이트가 보입니다 !

---

📌 접속 후 github pages 404 error 뜨는 대표적인 이유

1️⃣ 10분 더 기다립니다.

2️⃣ Ctrl + Shift + R 을 이용하여 새로고침 합니다.

3️⃣ Repository 생성할 때 아이디명을 잘못 입력했을 수도 있으니, 대소문자 틀리지말고 정확하게 기입합니다.

---

✨ Github 추가 기능 !

- GitHub가 업그레이드 되어 여러 Repository를 동시에 호스팅해줍니다. 다른 HTML 페이지도 호스팅 받고 싶으면 아래의 방법처럼 하시면 됩니다.

1️⃣ 위에서 만든 아이디.github.io 라는 Repository는 지우면 안됩니다.

2️⃣ 새로운 프로젝트를 올릴 Repository를 새로 만들어줍니다. (이름은 아무렇게나 하셔도 됩니다.)

3️⃣ 그 Repository에 아까처럼 드래그 앤 드롭하여 원하는 HTML / CSS / JS 파일을 업로드하고

    [Commit] 버튼을 클릭합니다.

4️⃣ Repository Setting 메뉴에 들어가서 Github page 부분을 찾습니다.

5️⃣ source 부분을 None에서 main으로 바꿔준 후 저장합니다.

6️⃣ 이제 아이디.github.io/repository명/ 으로 들어가면 업로드했던 HTML 파일을 확인할 수 있습니다.

  만약 안보이면, 아이디.github.io/repository명/html파일명.html 으로 직접 들어가면 됩니다.

  (첫 업로드 후, 10-20분 기다려야 반영됩니다.)

---

⭐ 참고 사항

1) 첫 페이지 로딩 속도를 빠르게 하려면?

원래 React나 Vue로 만든 웹앱들은 첫 방문 시 필요한 파일을 전부 load합니다.

트래픽을 조금이라도 줄이고 싶으면 Component들을 lazy하게 로딩하는 방법을 사용할 수도 있습니다.

- 공식 튜토리얼에 있는 lazy 함수 : https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

그러나 github 서버가 미국에 있어서 한국에선 이미지 같은 것을 load할 때 오래걸릴 수 밖에 없다는 점 참고 부탁드립니다.

 

 

2) 업데이트 사항이 생기면 배포를 어떻게 하는지?

build 또 하고 그 파일을 그대로 다시 업로드하면 됩니다.

build할 때마다, CSS / JS 파일명이 무작위로 다시 생성됩니다.

그래서 새로 배포할 때마다 사용자들은 새로운 CSS / JS 파일을 이용할 수 있습니다.

 

 

3) build할 때 압축 시키지말고 남기고 싶은 파일은?

./ 부터 시작하는 경로로 첨부한 이미지, JS 파일들은 전부 압축되고 이름이 바뀝니다.

이름이 변하지 않게 하고 싶다면 [public] 폴더 안에 넣고 build 해보세요.

그럼 build하고 나서도 그대로 루트경로에 파일이 남아있습니다.

(개발 시 그런 파일들을 이용하고 싶다면 [public] 폴더에 보관하고 ./ 가 아닌 / 경로로 import하면 됩니다.)

 

 

4) 서버에 올렸는데 페이지에 접속하면 이상한 페이지가 나오거나 일부 img, css 파일이 load되지 않을까요?

대부분 경로 문제입니다. 아래 사항들을 체크해봅시다.

1️⃣ build할 때 에러가 나진 않았는지?

2️⃣ 하위 폴더에 배포한거 아닌지?

3️⃣ 배포한 페이지가 안나오면 크롬 개발자도구 열어서

  index.html이 쓰고있는 CSS / JS / IMG 파일들의 경로가 제대로 되어있는지 체크해봅시다.

 

 

5) 메인페이지 말고 왜 특정 페이지로 접속하면 404 Error가 뜨는지?

아이디.github.io/detail/1 이렇게 세부 페이지 URL을 주소창에 직접 입력하면 404 Error가 날 수 있습니다.

이건 서버에서 아이디.github.io/detail/1 로 접속하면 메인페이지로 안내하는 API 개발을 해야합니다.

아니면 URL에 # 기호가 붙는 hashRouter를 사용하면 됩니다.

 

 

github는 우리가 서버를 건드릴 수 있는게 아니고 그냥 HTML 파일 올린 것만 보여주는 곳이기 때문에 사이트 메뉴에다가 페이지 이동버튼을 잘 만들어두면 됩니다.