🌟

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

に公開
React
GitHub Actions
GitHub Pages
Vite
portfolio
tech

はじめに

最近，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/', // リポジトリ名と一致させる
});

5. デプロイ確認

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

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

まとめ

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

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

Discussion