[DevOps] React, gh-pages를 통해 웹 페이지를 배포해보자! (1)

나는 지금까지 프론트엔드 페이지를 서버에 올려서 nginx로 가리키는 형식으로 배포해왔다.

최근에 깃허브 액션을 공부하며 gh-pages라는 편리하고 서버 없이 배포할 수 있는 방법을 알게돼서 신세계를 경험했다.

잊어버리기 전에 기록해두자.

 

프로젝트 준비

나에게 가장 익숙한 리액트를 사용할 것이지만 어떤 프레임워크를 사용해도 상관 없다.

npx create-react-app my-page
code my-page

프로젝트 생성 후 깃허브 repository도 만들어서 올려놓자.

 

gh-pages 패키지 설치

이제 배포하기 위한 npm 패키지를 설치해야 한다.

npm install gh-pages --save-dev
yarn add gh-pages --save-dev

둘중 사용하는 것으로 설치하자.

 

그 후 배포를 위한 스크립트를 세팅해준다.

# package.json
{
  "homepage": "https://riroan.github.io/my-page", # <---
  "name": "my-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build", # <---
    "predeploy": "npm run build" # <---
  },
# 이하 생략 ...

저 3 줄만 추가하면 된다.

homepage는 일단 "https://{계정}.github.io/{repository 이름}"으로 설정하자

 

scripts에서 명령 앞에 pre가 붙어있으면 명령을 실행하기 전에 자동으로 실행시켜준다.

예를들어 npm deploy만 실행해도 npm predeploy, npm deploy를 모두 실행한 결과가 나온다.

유사하게 postdeploy가 있다면 npm deploy후에 자동으로 npm postdeploy를 실행할 것이다.

 

리액트에서 predeploy, 즉 npm run build를 하면 프로젝트를 빌드하여 build폴더에 저장한다.

이 작업 수행후 deploy (gh-pages -d build)를 하면 build에 있는 파일들을 배포하게 된다. (git 로그인은 돼있어야 함)

 

npm run deploy
yarn deploy

 

작업이 완료됐다면 깃허브 repository에 자동으로 gh-pages라는 브랜치가 생기고 빌드된 파일들이 저장돼있다.

호스팅

Settings -> Pages로 가보자.

무언가 생겼는데 여기서 Visit site를 누르면..

Hooray

우리가 만든 리액트 웹페이지가 성공적으로 배포됐다!