1. 導入：なぜGitHub Pagesでのプレビューが重要なのか
チームでWeb開発をしていると、「今作っている画面をデザイナーやクライアントにすぐ確認してもらいたい」という場面がよくあります。しかし、ローカル環境（自分のPC）でしか動かない状態では、いちいち画面共有をしたり、スクリーンショットを撮って送ったりと手間がかかります。GitHub Pagesを活用すれば、開発中のブランチを公開用URLとして即座に共有でき、フィードバックのサイクルを劇的に速くすることができます。
2. 基礎知識：GitHub Pagesとは何か
GitHub Pagesは、GitHubのリポジトリにある静的ファイル（HTML, CSS, JavaScriptなど）をWebサイトとして公開できる無料のホスティングサービスです。通常は「メインブランチ」を公開しますが、gh-pagesという特定のブランチを作成してそこに成果物をアップロードすることで、開発中の状態を独立したURLでプレビューできるようになります。
3. 実装/解決策：GitHub Pagesでプレビューを公開する手順
最も手軽で一般的な方法は、gh-pagesという名前のブランチを作成し、そこに公開したいファイルをプッシュする方法です。
1. リポジトリの「Settings」タブを開く。
2. 左側のメニューから「Pages」を選択する。
3. Build and deploymentのSource設定で「Deploy from a branch」を選択し、Branchを「gh-pages」に指定して保存する。
これだけで、GitHubが自動的に静的サイトとして公開を開始してくれます。
4. サンプルプログラム：自動化のためのシェルスクリプト
毎回手動でファイルをコピーしてブランチを切り替えるのは大変です。以下のシェルスクリプトを使えば、現在のディレクトリの内容を簡単にgh-pagesブランチへ反映できます。（※あらかじめgh-pagesブランチを作成しておいてください）
// deploy.sh として保存して実行してください
現在のディレクトリの内容を一時的に退避
git checkout gh-pages
メインブランチから必要な静的ファイル（例: dist/）をコピー
git checkout main — dist/
ファイルをルート階層に移動（GitHub Pagesの仕様に合わせる）
mv dist/ .
変更をコミットしてプッシュ
git add .
git commit -m “プレビュー用サイトの更新”
git push origin gh-pages
元のブランチに戻る
git checkout main
5. 応用・注意点：現場で陥りやすい罠
GitHub Pagesでプレビューを運用する際、最も注意すべき点は「環境変数の扱い」です。APIキーなどをソースコードに直接記述してしまうと、公開URLから誰でも閲覧できてしまい、セキュリティ事故に繋がります。本番環境とプレビュー環境でAPIの向き先を変えたい場合は、ビルド時に環境変数を差し込む設定を行うか、GitHub Actionsを使用して安全にデプロイする仕組みを構築しましょう。
また、頻繁にプレビューを更新する場合は、毎回手動で行うのではなく、GitHub Actionsの「gh-pages」アクションなどを利用して、メインブランチにマージした瞬間に自動でプレビューURLが更新されるように設定するのが、DevOpsの第一歩として非常におすすめです。
コメント