デプロイ方法

このガイドでは、ウェブサイトのデプロイ方法について説明します。当サイトはGitHub Pagesを使用してデプロイされており、GitHub Actionsによって自動的にデプロイが行われます。

GitHub Pagesとは？

GitHub Pagesは、GitHubが提供する無料のウェブホスティングサービスです。GitHubリポジトリに保存されているファイルを、ウェブサイトとして公開できます。

メリット：

デプロイの流れ

当サイトでは、以下の流れで自動的にデプロイが行われます：

  1. プルリクエスト（PR）が作成される
  2. GitHub Actionsが自動的に以下のチェックを実行：
    • コードのフォーマットチェック（Prettier）
    • 型チェック（TypeScript）
    • ビルドテスト
  3. PRがマージされると、自動的にデプロイが開始
  4. ビルドされたファイルがGitHub Pagesにデプロイ

デプロイの確認方法

  1. GitHub Actionsの実行状況確認

    • GitHubのリポジトリページで「Actions」タブをクリック
    • 最新のワークフローの実行状況を確認

  2. デプロイ結果の確認

    • デプロイが成功すると、指定されたURLでウェブサイトが公開される
    • デプロイの詳細は「Actions」タブの各ワークフローの実行結果で確認可能

トラブルシューティング

デプロイが失敗する場合

  1. GitHub Actionsのログを確認

    • 「Actions」タブで失敗したワークフローをクリック
    • エラーメッセージを確認して原因を特定

  2. よくある問題と解決方法

    • ビルドエラー：npm run buildが失敗していないか確認
    • 型エラー：TypeScriptの型チェックが通っているか確認
    • フォーマットエラー：Prettierのフォーマットに従っているか確認

デプロイ後にページが404エラーになる

  1. GitHub Pagesの設定を確認

    • リポジトリの「Settings」→「Pages」
    • ソースブランチが正しく設定されているか確認

  2. ビルド結果の確認

    • distフォルダにindex.htmlが存在するか確認
    • アセット（画像など）のパスが正しいか確認

まとめ

このガイドでは、ウェブサイトのデプロイ方法について説明しました。GitHub Actionsを使用した自動デプロイにより、PRをマージするだけで簡単にデプロイが完了します。

デプロイに関して質問や問題がある場合は、研究室の先輩に相談してください。