React + Vite で作ったポートフォリオを GitHub Actions & Pages で自動デプロイする

本記事の内容： React + Vite で作成したポートフォリオサイトを GitHub Actions と GitHub Pages で自動デプロイ

はじめに

最近，TypeScript + React でフロントエンドを作成する機会が多く，基礎的な実装ができるようになってきたので自分のサイトも試しに作ってみようと思いました．
本記事では、以下の流れでポートフォリオサイトを公開する方法を解説します：

1. ローカル開発: Vite + React + TypeScript でサイト作成
2. GitHub へ push
3. GitHub Actions で自動ビルド
4. GitHub Pages へ自動デプロイ

完成したサイトは こちら で公開しています．

技術選定理由

React + Vite + Material-UI(MUI)

• 個人的に React が実装しやすい
• TypeScript との親和性
• 高速ビルド
• 簡単にデザインしたい
• 静的サイトとして GitHub Pages で完結させたい

GitHub Pages + Actions を選んだ理由

• 簡単に公開したい
• GitHub Actions の勉強をしたい
• 自動デプロイの実現
• フロントエンド × CI/CD の学習も兼ねられる

実装から公開まで

1. プロジェクト環境構築

前提条件

Node.js と npm をインストールしておく必要があります。未インストールの場合は公式サイトからインストールしてください．

Vite + React + TypeScript のセットアップ

$ npm create vite@latest my-app -- --template react-ts
$ cd my-app

my-app は任意の名前に変更可能です．
上記実行より，Vite + React + TypeScript の環境が作成されます．

Material-UI(MUI) の導入

$ npm install @mui/material @emotion/react @emotion/styled

2. 実装＆ビルド確認

実装して dev 確認

$ npm run dev

上記によりローカルホストでブラウザから確認できるようになります．

ビルドが通るか確認

$ npm run build

GitHub Actions でソースをビルドする必要があるので，予めローカルで確認しておきます．
ビルド成功時は dist ディレクトリが生成されます．

3. GitHub Actions の設定

GitHub Actions でのワークフローを定義します．
.github/workflows/static.yml を作成し，下記のような内容を記述します：

name: Deploy Vite site to Pages

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

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

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deploy.outputs.page_url }}
    steps:
      - name: Deploy
        id: deploy
        uses: actions/deploy-pages@v4

ワークフローの流れ

1. build ジョブ
   • ソースコードをチェックアウト
   • Node.js 20 をセットアップ（npm キャッシュ有効）
   • npm install で依存パッケージをインストール
   • npm run build でビルド（dist 生成）
   • dist を GitHub Actions のアーティファクトにアップロード
2. deploy ジョブ
   • build ジョブ完了後に実行
   • アーティファクトを GitHub Pages にデプロイ

各設定項目の説明

1. name
   ワークフロー名

2. on
   いつ Actions を実行するか

   項目	値
   push: branches: ["main"]	main ブランチへの push
   workflow_dispatch:	ユーザによる実行

3. permissions
   権限設定

   項目	値
   contents	ビルドのためにコード読み込み権限
   pages	デプロイ権限
   id-token	GitHub -> GitHub Pages への認証に使用

4. concurrency
   グループ内の同時実行の制御

   項目	値
   group	グループ名
   cancel-in-progress: false	同一グループ内では前のビルド中は待機する

5. jobs
   ワークフロー内での処理

   項目	値
   build / deploy	job id
   runs-on	job を実行するマシンのタイプ
   steps	連続で実行されるタスク
   uses	再利用できる処理
   actions/checkout@v4	ワークフローにソースダウンロード
   actions/setup-node@v4	node や npm を使えるようにする
   node-version: 20	node バージョン指定
   cache: 'npm'	npm ダウンロードのキャッシュ（2回目以降高速化）
   name	ステップ名
   run	コマンドラインベースの処理
   actions/upload-pages-artifact@v3	GitHub Pages でデプロイするアーティファクトのアップロード
   needs	指定された job の完了後に実行
   environment	ジョブから参照できる環境変数
   id	step id
   actions/deploy-pages@v4	Actions のアーティファクトを Pages にデプロイ

4. GitHub Pages の設定

リポジトリ設定での Pages 有効化

1. GitHub リポジトリにアクセス
2. Settings -> Pages を開く
3. Build and deployment の Source を GitHub Actions に変更

vite.config.ts での base 設定

vite.config.ts に，base を追加し，repository 名と同じにする
repository 名が portfolio であれば '/portfolio/'

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/portfolio/', // リポジトリ名と一致させる
});

base 設定を忘れると，GitHub Pages でページが表示されません．

5. デプロイ確認

main ブランチに push すると，GitHub Actions が自動実行されます．

1. リポジトリの Actions タブでビルド状況を確認
2. ビルド成功後，https://<ユーザー名>.github.io/<リポジトリ名>/ でアクセス可能

まとめ

本記事では，Vite + React + TypeScript で作成したポートフォリオサイトを，GitHub Actions と GitHub Pages で自動デプロイする方法を解説しました．

• 公開 URL: https://k2-gc.github.io/portfolio/
• GitHub Actions による CI/CD 環境を構築
• 今後の改善予定：UI アニメーション，モバイル対応等

---

どなたかの参考になれば幸いです！