이번 시간에는 그 동안 다루지 못한 Github Pages를 React에서 배포하는 방법을 알아보도록 하겠습니다. 제가 지금 현재 Windows버전으로 진행중인데 방식은 동일하니 참고하시면 되겠습니다. 우선 먼저 배포할 프로젝트를 준비해주세요. 먼저 자신의 Github 저장소를 하나 생성해줍시다. 저장소 이름, 설명을 작성후 Create repository 클릭 첫번째 comman line 부분을 오른쪽상단 아이콘을 클릭해 복사 or 아래 명령어대로 차례대로 입력
명령어에 간단한 설명을 붙이자면 git init - 프로젝트에 git설치 git add * - .gitnore에 있는 파일 제외한 모든 파일 올리기 git commit -m "first commit" - commit 메시지 작성 git remote add origin https://github.com/Koras02/react-github-pages.git - git 저장소 연결 git push -u origin master- git master으로 push push 가 완료되면 github 페이지로 돌아가서 새로고침하면 소스들이 올라가 있습니다. 2. Github 페이지 배포하기먼저 프로젝트 gh-pages 패키지를 설치해주세요
설치가 완료되면 프로젝트 내 package.json 파일을 열어 "homepage" 주소를 추가해줍니다.
형식은 http://{사용자 이름}.github.io/{저장소 이름} 으로 작성합니다. 그다음 script 부분에 predeploy, deploy 를 추가해줍니다.
저장후 터미널 창을 열고 npm run deploy & yarn deploy 를 실행해 줍니다. 이렇게 deploy가 성공했습니다. 직접 github pages를 확인하기 위해 본인이 push 했던 레포지토리로 가서 Settings -> Options에서 Github Pages 에서 확인하실수 있습니다. (사이트에서 README.md 파일 내용이 나올 경우 Github Pages의 Source 부분 gh-pages branch로 변경시 사이트가 정상적으로 배포됨 이렇게 뜬다면 배포 성공! 3. 배포시 주의사항 ( 2021.10.08 )다른 프로젝트를 배포하는 과정에서 homepage : "http://{사용자 이름}.github.io/{저장소 이름}"로 설정된 주소로 접속시 404 페이지가 나올 경우 http://{사용자이름}.github.io/{저장소이름}/index.html 로 접속하면 이상없이 페이지가 나온다. 참고[React] 프로젝트 GitHub Pages 배포하기 React 프로젝트 GitHub Pages로 배포하기 (create-react-app) velog.io github pages 로 실습을 하는데 문제가 생겼다면 netlify.com 을 이용하는 아래 수업을 참고해주세요. --- 직접 웹서버를 운영하는 일은
쉽지 않은 일입니다. 그래서 수많은 웹호스팅 업체가 있습니다. 바로 github(https://github.com)의 pages 기능입니다. 이
서비스는 이 서비스 자체는 우리는 github가 제공하는 여러 기능 중 회원가입하시고(sign up), 저장소(repository)라는 것을 아래와 같은 화면이 나오는데 저장소를 생성하는 화면입니다. 1. Repository name 에는 프로젝트의 이름을 적어 주세요. 저의 경우 web1이라고 할 것입니다. 저장소 생성하기(Create repository) 버튼을 눌러주세요. 아래와 같은 화면이 나타날 것입니다. 이 중에서 uploading an existing file라는 부분을 클릭해 주세요. 아래와 같은 페이지가 뜰 거에요. 1. 작업한 파일을 드래그 앤 드롭 합니다. 2. 변경된 내용을 적습니다. 파일이 변경될 때마다 업로드를 해야 하기 때문에 변경된 내용을 적어줍니다. 업로드가 끝나면 아래와 같이 파일의
목록이 보입니다. 그럼 우리가 업로드한 웹페이지를 인터넷을 통해서 서비스 해봅시다. Settings 버튼을 선택합니다. 사이드 바에서 Pages를 선택합니다. Branch를 main 혹은 master를 선택하고 Save 버튼을 누릅니다. 그럼 아래와 같이 주소가 표시됩니다. (물론 주소는 각자 다르겠죠?) 이 주소로 방문해 보시면 자신이 만든 웹페이지가 보일 것입니다. (혹시 나오지 않는다면 5분 후에 다시 접속해 보세요) 감동적이지 않나요? 그럼 우리가 한 일을 이론적으로 정리해보겠습니다. 삼자가 있습니다. my는 여러분의 컴퓨터입니다. visitor는 여러분의 웹페이지를 보고 싶어하는 사람입니다. 여러분의 컴퓨터는 현재로서는 컨텐츠를 서비스 할 수 없습니다. 우리는 github의 pages 기능을 이용했습니다. github에 파일들을 업로드하고, pages 기능을 활성화하면 github의 서버 컴퓨터에 웹서버가 켜집니다. 그리고 우리에게 웹서버의 주소를 알려줍니다. 이제 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 됩니다. 웹서버를 직접 운영하는 것에 비해서 단점은 하지만 우리는 github를 사용했지만 우리는 HTML만으로 웹페이지를 만들었습니다. 그럼 동적(dynamic)인 것이 있냐고요? 아래와 같이 검색하시면 free static web hosting 현시점에서 추천 드리고 싶은 서비스들은 이런 것들이 있습니다.
자주 묻는 질문질문 : upload file이 보이지 않습니다.답변 : 아래와 같이 저장소를 생성할 때 꼭 Initialize this repository with a README 옵션을 체크해주세요. 질문 : 아래와 같은 오류가 뜹니다. Please verify your email address Before you
can contribute on GitHub, we need you to verify your email address. An email containing verification instructions was sent to 이메일 주소. 완성한 웹사이트를 알려주세요.다른 사람들의 웹사이트를 구경하세요. |