[React] vite + react로 github.io 배포하기

초고

남들이 github.io로 포폴사이트를 만들길래 나도 만들어보기로 했다. 꾸미는건 나중에 생각하고 스켈레톤만 후다닥 만들어서 배포했다. 이걸 뭐 누가 보겠냐마는.. 기분이라도 내는거다.

 

Environment

• nodejs: 18
• React.js: 18
• yarn + vite + typescript + emotion + material UI

Page Configuration

• Home
• About
• Portfolio
• Contact

Deploy

Vite 가이드 - 정적 웹 페이지로 배포하기

Vite

Vite 프로젝트는 Github Pages로 배포하기가 아주 쉽다.

1. <github 계정 이름>.github.io repo를 만든다.
2. 작업한 프로젝트를 push한다. 이때 build하지 않아도 된다.
3. vite.config.js 파일 내 base 설정 값을 원하는 라우팅값으로 설정한다. 만약 https://<USERNAME>.github.io/와 같은 형태로 배포하고자 한다면, base 설정 값을 생략하거나 기본 값인 '/' 로 지정한다.
4. 리포지토리 settings 탭에서 Github Pages 설정으로 이동한 후, Build and deployment - Source를 Github Actions로 지정한다.
5. 프로젝트 최상단에 .github/workflows 폴더에 github-actions-deploy.yml 파일을 생성하고 다음과 같이 작성한다.(yml 파일 명은 달라도 상관없다.)
6. 이제 push할 때마다 프로젝트 변경사항이 deploy될 것이다.
7. 끝이다:)

name: Deploy static content to Pages

on:
  push:
    branches: ['main']
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'yarn'
      - name: Install dependencies
        run: yarn install // npm인 경우, yarn을 npm으로 바꾸면 된다.
      - name: Build
        run: yarn build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1