React, 만든 리액트 사이트 build와 배포

build를 해야하는 이유와 하기 전 체크사항

만든 사이트를 배포하려면 작업하던 App.js 파일 그대로 올리는 것이 아니라

build용 파일을 생성한 후 그 파일을 올려야 함

 

웹브라우저는 Html, CSS, JS 이 세개의 언어만 해석할 수 있음

그렇기에 리액트의 state, JSX 등을 전혀 해석할 수 없음

그래서 리액트 프로젝트를 build를 하면 브라우저 친화적인 Html, CSS, JS 파일로 바꿔줌

바꿔준 것을 웹에 올려야 사용자들이 사이트를 볼 수 있음

 

※ 배포하기 전 체크할 사항

1. 미리보기 띄워봤을 때 콘솔창, 터미널에 에러 X

warning 메세지는 사이트 구동에 별 영향이 없기 때문에 테스트할 때는 무시해도 됨

 

2. 사이트를 배포하실 때 

http://hungry.com/ 이런식으로 배포하는 경우엔 따로 설정이 필요없어도 되지만

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

 

프로젝트 파일 중 package.json 이라는 파일에

"homepage": "http://hungry.com/blog",

homepage라는 key값을 추가하신 후 배포할 사이트 경로를 추가하면 됨

 

배포

1. 터미널에 build 명령어 입력

React에 state, JSX, <컴포넌트>, props 등의 문법들은 브라우저가 해석할 수 없어 그대로 배포할 수 없음

그래서 이런 문법들을 전통적인 CSS, JS, HTML 문법으로 바꿔주는 작업이 필요함

이것을 컴파일 또는 build라고 함

 

npm run build

터미널에 입력

 

 

작업 프로젝트 폴더 내에 build라는 폴더가 생성됨

build에는 프로젝트를 만들때 짰던 코드를 전부 .html, .css, .js파일로 변환해서 담아줌

index.html이 메인페이지

build 폴더 안에 내용을 모두 서버에 올리면 됨

 

2.무료 호스팅을 해주는 github pages 이용

github pages는 Html, CSS, JS 파일을 무료로 호스팅해주는 사이트

github.com에 들어가 로그인을 함

그 다음엔 우측 상단 + 버튼을 누르셔서 New Repository 버튼을 누름

 

Repository name은 꼭 자신의아이디.github.io 라고 입력해야함

 

3.Repository 생성이 되었으면 파일 올리기

Repository 생성이 끝나면 repository로 자동으로 들어가짐

그럼 거기에 build 폴더 내의 파일(폴더 그대로가 아닌 내용물)을 전부 드래그 앤 드롭하면 됨

 

github pages는 서버가 미국에 있어서 로드하는데 시간이 걸림. 첫 업로드 후에는 시간이 지난후 반영됨

그래서 시간이 바로는 되는 것이 아니라 여유롭게 기다렸다가 확인해봐야 제대로 작동하는지 확인가능

 

만들어진 Repository로 이제 https://나의아이디.github.io로 로 들어가면 사이트를 확인해 볼 수 있음

 

4. 더 좋아진 github pages

github pages가 여러 repository를 동시에 호스팅해줌

다른 Html 페이지도 호스팅받고 싶다면 나의아이디.github.io로 만든 repository를 지우면 안됨

1. 새로운 프로젝트를 올릴 repository를 새로 만들어줌(이름은 자유롭게)
2. 그 repository에 드래그앤드롭으로 원하는 Html, CSS, JS 파일을 업로드하고 확인까지 누름
3. repository setting 메뉴에 들어가서 Github pages 부분을 찾음
4. Source 부분에 None이라고 되어있는 것을 None이 아니라 main으로 바꿔주고 저장
5. 자신의아이디.github.io/repository이름/ 으로 들어가면 업로드했던 Html 파일을 볼 수 있음

- 안보인다면 자신의아이디.github.io/repository이름/html파일명.html로 들어갈 것

- 첫 업로드 후엔 10~20분 넘게 기다려야 반영됨

- 업데이트 사항이 생기면 build를 또 하고 파일 그대로 다시 업로드

   build를 할때 마다 CSS,JS 파일 명이 무작위로 다시 생성되어 배포될때 마다 사이트 방문자들은 새로운 CSS, JS파일을 이용할 수 있음