만든 사이트를 배포하려면 작업하던 App.js 파일 그대로 올리는 것이 아니라 build용 파일을 생성한 수 그 파일을 올려야 한다.
웹 브라우저는 HTML, CSS, JS 이 3개의 언어만 해석할 수 있기 때문에 리액트의 state, jsx등은 해석하지 못 한다.
그래서 리액트 프로젝트를 build 하면 브라우저 친화적인 HTML, CSS, JS 파일로 바꿔 준다.
이 바꿔 준 파일을 올려야 사용자들이 웹을 볼 수 있다.
이전 포스팅들을 통해 만든 프로젝트를 Github Page를 이용해 배포해 보도록 하자.
💡 배포하기 전 체크할 사항
1. 미리보기를 띄워 볼 때 콘솔창, 터미널에 에러가 발생해서는 안 된다.
(warning 메시지는 사이트 구동에 별 영향이 없기 때문에 테스트할 때는 무시해도 됨)
2. 사이트를 배포할 때
http://abcd.com/ 여기에 배포하는 경우에는 따로 설정이 필요없지만
http://abcd.com/blog/ 이런 하위 경로에 배포하고 싶으면 프로젝트에 설정이 따로 필요하다.
프로젝트 파일 중 package.json 파일에 hompage라는 항목을 추가한 후 배포할 사이트 경로를 뒤에 추가하면 된다. (혹은 /blog 이렇게 경로를 작성해도 됨)
(자세항 내용은 https://create-react-app.dev/docs/deployment/#building-for-relative-paths)
배포하기
1. 터미널에 build 명령어 입력
리액트의 state, JSX, <컴포넌트>, props 등의 문법들은 브라우저가 해석할 수 없기 때문에 그대로 배포할 수 없다.
그래서 이런 문법들을 HTML, CSS, JS 문법으로 바꿔 주는 작업이 필요한데, 이 작업을 컴파일 또는 build라고 한다.
리액트 프로젝트에서 터미널을 켠 후
npm run build
입력하면 된다.
그러면 이렇게 작업 프로젝트 폴더 내에 build라는 폴더가 하나 생성된다.
build 폴더에는 프로젝트를 만들 때 작성했던 코드들이 전부 .html, .css, .js파일로 변환해 담아진다.
이제 build 폴더 안에 있는 내용을 모두 서버에 올리면 된다.
2. 무료 호스팅을 해 주는 Github pages 이용
github.com은 html,css,js 파일을 무료로 호스팅해 주는 사이트.
(1) github.com 에서 로그인 한 수 우측 상단 + 버튼을 클릭해 New Repository 버튼 클릭
그리고 아래와 같이 Repostiory name을 입력, REAME 파일 생성에도 체크한 후 Creat repository 버튼을 눌러 생성해 주면 된다.
3. Repository에 html 파일 업로드
Repository 생성이 끝나면 repository로 자동으로 들어가진다.
거기에 build 폴더 내의 파일을 전부 드래그 앤 드롭 하면 된다.
또는 + 버튼을 클릭해 Upload files 버튼 클릭
build 폴더 내의 파일을 업로드해 주고 하단에 있는 초록색 Commit changes 버튼을 클릭해 준다.
4. Github Pages 설정
repository setting 메뉴에 들어가서 Github pages 부분을 찾는다.
[Settings] - [Pages] - [Github Pages]
Branch 부분을 None이 아니라 main으로 바꿔 주고 저장한다.
5. 끝
이제 http://아이디.github.io/repository이름/ 으로 접속하면 업로드했던 html 파일을 볼 수 있다.
* 안 보인다면 아이디.github.io/respository이름/html파일명.html로 들어갈 것
* 첫 업로드 후에는 보통 10~20분 기다려야 반영된다.
* 업데이트 사항이 생기면 build륻 다시 하고 그 파일 그대로 다시 업로드하면 된다.
build를 할 때마다 css, js 파일 명이 무작위로 생성되어 배포될 때마다 사이트 방문자들은 css, js 파일을 이용할 수 있다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
