はじめに
前回で、カレンダー表示・予定の追加削除・保存まで、予定管理アプリとしての機能が一通り完成した。ただし、ここまではnpm run devでパソコン（Codespace）の中だけで動かして確認していただけである。
最終回となる今回は、このアプリをインターネット上に公開し、URLさえ知っていれば誰でもブラウザからアクセスできる状態にする。使うのは、GitHubが無料で提供しているGitHub Pagesという機能と、pushするだけで自動的にビルド・公開までしてくれるGitHub Actionsである。
今回はアプリ自体の中身（App.jsxなど）はVer.5から変更していない。読むべきは、新しく追加するvite.config.jsの設定と、.github/workflows/deploy-06.ymlというワークフローファイルである。
今回やること
- GitHub Pagesとは何かを知る
- Viteでビルドしたアプリを、GitHub Pages向けに正しく動くよう設定する
- GitHub Actionsを使って、pushするだけで自動的にビルド・公開されるようにする
GitHub Pagesとは
GitHub Pagesは、GitHubのリポジトリからHTML・CSS・JavaScriptなどの静的ファイルをWebサイトとして無料で公開できる機能である。今回のように、npm run buildで作った静的なファイル（HTML・CSS・JS）を置くだけで、https://<ユーザー名>.github.io/<リポジトリ名>/というURLで公開できる。
つまずきやすいポイント：base設定
Viteでビルドしたアプリをそのままpushしても、実は正しく表示されない。原因は、GitHub Pagesの「プロジェクトページ」特有のURL構造にある。
自分のパソコンで確認していた時は、アプリはhttp://localhost:5173/という「ドメイン直下」で動いていた。ところが、GitHub Pagesのプロジェクトページでは、https://<ユーザー名>.github.io/<リポジトリ名>/という、リポジトリ名を含んだURLで公開される。
この違いにより、何も設定しないと、CSSやJavaScriptを読み込むためのパスがずれてしまい、画面が真っ白になる、といった不具合が起きる。
これを防ぐには、vite.config.jsにbaseという設定を1行追加するだけでよい。
vite.config.js
js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/pc-labo-react-learning/',
})baseには、自分のリポジトリ名を、前後をスラッシュで挟んだ形で指定する。これで、ビルド後のHTMLが参照するファイルのパスが、GitHub Pagesの実際のURL構造に合った形に調整される。
GitHub Actionsで自動化する
毎回手作業でビルドしてアップロードするのは手間なので、「pushしたら自動的にビルド＆公開される」仕組みを、GitHub Actionsで用意する。
リポジトリ直下（各Verのフォルダとは別の場所）に、.github/workflows/deploy-06.ymlというファイルを置く。
yaml
name: Deploy 06_deploy-github-pages to GitHub Pages
on:
push:
branches:
- main
paths:
- '06_deploy-github-pages/**'
- '.github/workflows/deploy-06.yml'
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: pages
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 22
cache: npm
cache-dependency-path: 06_deploy-github-pages/package-lock.json
- name: Install dependencies
working-directory: 06_deploy-github-pages
run: npm ci
- name: Build
working-directory: 06_deploy-github-pages
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: 06_deploy-github-pages/dist
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4少し長いが、読むポイントは3つだけである。
on:：いつ実行するかの条件。今回は「mainブランチに、06_deploy-github-pages配下の変更がpushされた時」に実行されるようにしてあるbuildジョブ：依存パッケージのインストール（npm ci）→ビルド（npm run build）→ビルド成果物（dist）をアップロード、という一連の流れdeployジョブ：アップロードされた成果物を、実際にGitHub Pagesへ公開する
working-directory: 06_deploy-github-pagesという指定が各所に入っているのは、このリポジトリが複数のフォルダ（01_〜06_）を持つ構成になっており、package.jsonがリポジトリ直下ではなく06_deploy-github-pagesフォルダの中にあるためである。
※GitHub Actionsの各アクションは更新されるため、バージョン番号はGitHub公式ドキュメントの最新版を確認しよう。
GitHubリポジトリ側の設定
ワークフローファイルをpushしただけでは、まだ公開されない。GitHubのリポジトリ設定を1箇所変更する必要がある。
- GitHubのリポジトリページで「Settings」タブを開く
- 左側メニューの「Pages」を選ぶ
- 「Build and deployment」の「Source」を、GitHub Actionsに変更する
この設定をしておくことで、先ほどのワークフローが正しくGitHub Pagesと連携し、公開まで自動で完了するようになる。
公開されたか確認する
設定後、06_deploy-github-pages配下に変更をpushすると、GitHub Actionsが自動的に動き出す。リポジトリの「Actions」タブから、実行状況（成功したか、エラーが出ていないか）を確認できる。
無事に完了すると、以下のURLでアプリにアクセスできるようになる。
https://happytalk10.github.io/pc-labo-react-learning/
今回のまとめ
- GitHub Pagesを使うと、GitHubのリポジトリをそのままWebサイトとして無料公開できる
- Viteでビルドしたアプリをプロジェクトページで公開する場合、
vite.config.jsのbaseにリポジトリ名を設定する必要がある - GitHub Actionsを使うと、pushするだけで「ビルド→公開」までを自動化できる
これで、全6回にわたる「Reactで学ぶ 予定管理アプリ開発」シリーズは完結である。環境構築（Ver.1）から始まり、コンポーネント分割（Ver.2）、状態管理（Ver.3）、データ永続化（Ver.4）、カレンダーUI（Ver.5）、そして公開（Ver.6）まで、一通りの流れを実際に手を動かしながら体験してもらえたなら幸いである。
ソースコード
GitHub：https://github.com/HappyTalk10/pc-labo-react-learning/tree/main/06_deploy-github-pages
公開中のアプリ：https://happytalk10.github.io/pc-labo-react-learning/
コメント