GitHub Pages를 사용하여서 GitHub 레포지토리에 작성한 코드를 무료로 배포(호스팅)하는 방법을 알아봅시다 !

🧐 GitHub Pages란?

개발자라면 누구나 알고 있는 사이트인 Github!
GitHub Pages는 GitHub에서 제공하는 무료 웹 호스팅 서비스입니다. 정적 웹사이트를 호스팅하는데 사용되며, 프로젝트 웹사이트, 개인 블로그, 포트폴리오 등 다양한 목적으로 사용할 수 있습니다. 기본적으로 public 레포지토리에서만 사용 가능하며 Pro 티어 사용자는 private 레포지토리에서도 사용할 수 있습니다.

Github Pages는 기본적으로 HTML, CSS, 그리고 JavaScript로 구성된 파일을 구동하고 배포해 정적 웹사이트를 무료로 호스팅할 수 있게 해주는 서비스

😎 React 프로젝트 배포하기

React 프로젝트도 GitHub Pages를 사용하여서 호스팅이 가능합니다! 차근차근 진행해보겠습니다~

1. Github 레포지토리 생성

일단 Github에 로그인 후 레포지토리를 생성해줍니다!
저장소 이름은 임의로 설정해주면 됩니다. 저는 react_deploy라는 이름의 레포지토리를 생성하였습니다.

2. 로컬 프로젝트와 GitHub 레포지토리 연결

터미널이나 명령 프롬프트에서 로컬 프로젝트 폴더로 이동한 후, 다음 명령어를 사용하여 방금 만든 GitHub 레포지토리와 연결하세요.

git init
git remote add origin https://github.com/your-username/your-repo-name.git

여기서 your-username과 your-repo-name을 본인의 GitHub 사용자 이름과 레포지토리 이름으로 변경하시면 됩니다!

3. 프로젝트에 'gh-pages' 패키지 추가

터미널이나 명령 프롬프트에서 다음 명령어를 실행하여 'gh-pages' 패키지를 설치하세요. 제대로 설치되었다면 프로젝트 폴더의 package.json 파일이 변경되었을 겁니다.

npm install gh-pages --save-dev

4. package.json 파일 수정

이제 프로젝트 폴더의 package.json 파일을 열어 다음 두 가지 사항을 추가해야 합니다.

• 'homepage' 필드 추가: 파일의 최상단에 다음 코드를 추가

"homepage": "https://your-username.github.io/your-repo-name",

마찬가지로 your-username과 your-repo-name은 본인의 GitHub 사용자 이름과 레포지토리 이름입니다!

• 'scripts' 섹션에 배포 관련 스크립트 추가: 다음 코드를 'scripts' 섹션에 추가

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

두 가지 사항을 모두 추가하였다면 이제 package.json 파일은 다음과 같이 보일 것입니다!

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://your-username.github.io/your-repo-name", // 1
  "dependencies": {
    //...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",  // 2
    "deploy": "gh-pages -d build" // 2
  },
  //...
}

5. 프로젝트를 GitHub에 푸시

이제 Git 명령어를 사용하여서 프로젝트를 GitHub 레포지토리에 연동하겠습니다!

git add .
git commit -m "Initial commit"
git push -u origin main

• git add . : 현재 디렉토리와 그 하위 디렉토리에 있는 모든 변경사항 스테이징
• git commit -m "" : 스테이징된 항목들을 모두 커밋 / -m 뒤에 따옴표에는 커밋 메시지를 입력
• git push -u origin main : 커밋된 변경 사항을 Git 저장소에 푸시

위의 과정들을 진행하면 이렇게 로컬 프로젝트가 Git 레포지토리에 전달된 걸 확인할 수 있습니다.

6. React 프로젝트 배포

마지막으로 터미널이나 명령 프롬프트에서 다음 명령어를 실행하여 프로젝트를 GitHub Pages에 배포합니다!

npm run deploy

7. 배포 확인

https://your-username.github/your-repo-name 링크에 접속해서 이런 화면이 나온다면 정상적으로 React 프로젝트가 Github 레포지토리와 연결되어 배포까지 완료된 상태입니다!