CRA를 사용하지 않은 리액트 프로젝트를 깃허브 페이지로 배포하기

이전에 CRA를 쓰지 않고 개발한 리액트 구구단 프로젝트를 깃허브 페이지에 배포하는 데 실패했다가 다시 도전해보았다.

---

프로젝트 빌드

먼저 리액트 프로젝트를 빌드해서 정적 파일을 생성해주어야 한다.

• 기존에 제로초 강의를 들으면서 작성해둔 webpack.config.js에 이 글을 참고해서 output의 path 설정과 html 빌드 설정을 추가했다.
• 계속 오류가 발생해서 찾아보니 react-refresh-webpack-plugin 문제였다. webpack.config.js 설정에 대한 글을 찾아서 겨우 해결했다.

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'eval',
  resolve: {
    extensions: ['.js', '.jsx'],
  },

  entry: {
    app: ['./index'],
  },
  module: {
    rules: [
      {	// babel 로더
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          // react-refresh-webpack-plugin을 위한 플러그인
          plugins: [require.resolve('react-refresh/babel')].filter(Boolean),
        },
      },
      {	// css 로더
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    // react-refresh-webpack-plugin을 위한 플러그인
    new webpack.HotModuleReplacementPlugin(),
    new RefreshWebpackPlugin(),
    new HtmlWebPackPlugin({	// html 파일을 빌드하는 플러그인 설정
      template: './index.html',
      filename: 'index.html',
    }),
  ].filter(Boolean),
  output: {
    filename: 'bundle.js',	// 결과 파일 (js + css)
    publicPath: '/',
    path: path.resolve(__dirname + '/build'),
  },
  devServer: {
    publicPath: '/',
    hot: true,
  },
};

👉 package.json의 scripts에 build 추가

"scripts": {
  "start": "webpack serve --env development",
  "build": "webpack"
},

👉 yarn build 명령어를 실행하면 /build 디렉토리에 bundle.js와 index.html이 생성된다.

---

gh-pages 브랜치 생성

기존 프로젝트 레포지토리에 gh-pages 브랜치를 생성해서 정적 파일을 배포한 후 깃허브 페이지 설정을 해주면 깃허브 페이지를 여러 개 만들 수 있다.

깃허브 페이지(GitHub Pages)에 SPA 배포/호스팅 하기 글을 참고해서 gh-pages 브랜치를 만들고 번들링된 파일을 배포했다.

사실 여기 나온대로 잘 안 돼서 주먹구구식으로 했다... 더 좋은 방법을 알고 계신 분은 제발 알려주세요...

1. 부모 커밋이 없는 새로운 브랜치 만들기
   git checkout --orphan gh-pages
2. 레포지토리의 모든 파일과 폴더 삭제하기
   git rm -rf .
   이게 잘 안 먹히고 디렉토리는 남아있어서 그건 포기했다...
3. 이전에 빌드해둔 index.html과 bundle.js 복사해오기
4. add
   git add .
5. commit
   git commit -m "[커밋 메시지]"
6. push
   git push origin gh-pages

---

깃허브 페이지 설정

깃허브 페이지(GitHub Pages) 만들기 글을 참고해서 깃허브 페이지 설정을 변경했다.

• 프로젝트 레포지토리 메뉴의 Settings - Pages
• Source의 브랜치를 gh-pages로 변경하고 Save 버튼 클릭
• 배포된 주소(https://[사용자명].github.io/[레포지토리명]/)로 가서 잘 나오는지 확인~!

---

🔗 드디어 배포된 구구단 게임