[GitHub] 리액트 프로젝트 GitHub Desktop으로 배포하는 방법 - 리액트 깃허브에 올리는 가장 쉽고 간단한 방법

 

 

리액트는 자바스크립트 프로젝트 배포방법과 다르다! 조금 더 복잡한 것 같다.

최대한 쉽고 쉽게 설명을 해놓으려고 시간을 투자했으니 부디 미래의 내가 헷갈릴때마다 도움이 되길...

 

 

 

 

 

먼저 깃허브 데스크탑이 컴퓨터에 설치되어있어야합니다.

[GitHub Deaktop 설치방법 바로가기]

 

 

1. 깃허브 데스크탑에서 repository를 새로 생성하기

(repository명은 소문자와 - 로만 해야함)

[repository 생성하는 방법 바로가기]

 

 

 

 

2. 하위 경로에 배포하고 싶으시면 프로젝트에 설정이 따로 필요함!

2-① 깃허브 홈페이지에 들어가서 깃허브 데스크탑에서 만든 레파지토리 잘 만들어졌나 확인하고 경로 복사

[경로 어딨는지 모르면 클릭]

 

2-② 배포하고자 하는 프로젝트 파일 중 package.json 이라는 파일을 오픈하면 큰 object가 하나 있는데 거기에  붙여넣기

"homepage": "깃허브에서복사한경로/원하는하위경로",

 

이런식으로!

"homepage": "https://jina-choi.github.io/react-project/pr1",

 

 

 

 

 

 

3. 비주얼스튜디오코드 들어가서 업로드하고 싶은 프로젝트 터미널 열고

아래 코드 입력하고 엔터! (터미널 경로 잘 확인하기) 

npm run build

 

 

 

 

4. 작업 프로젝트 폴더 안에 생성된 build 폴더 안에 있는 파일들 복사하기

- 작업 프로젝트 폴더 내에 build라는 폴더가 하나 생성되는데 짰던 코드를 .html/.css/.js 파일로 변환해서

build폴더에 담아줌

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

- index.html이 메인페이지임

 

 

반응형

 

 

5. 깃데스트탑과 연결되어있는 1번에서 생성한 레파지토리 파일 안에 복붙

하위 경로를 설정하고 싶은 사람은 여기서 하위파일(pr1)만들고 그 안에 복붙

 

 

 

 

 

 

6. 깃허브 데스크탑을 열면 자동으로 연결되어있으므로 업로드 하면 됨.

[이미 생성한 레파지토리에 프로젝트 추가하는 방법]

 

 

업로드하고 나서 깃허브 홈페이지에서 확인한 결과 ↓

 

 

 

7. 이제 끝! 업로드한 프로젝트를 보고싶으면 package.json 파일에서 Homepage에 적어뒀던 주소/index.html로 가면 됨!

이런식으로!

https://jina-choi.github.io/react-project/pr1/index.html