【ITニュース解説】Day 21 - Deploy the Github Profile Project to Github Pages

この解説では、Webアプリケーションをインターネット上で公開するために、GitHub PagesとGitHub Actionsという二つの強力なツールをどのように活用するかを、システムエンジニアを目指す初心者の皆さんにも分かりやすく説明する。特に、Vue 3、SvelteKit、Angular 20といった主要なフロントエンドフレームワークのアプリケーションをデプロイする手順に焦点を当てる。

まず、GitHub Pagesについて理解しよう。これは、GitHubが提供するWebホスティングサービスで、静的なWebサイトを無料で公開できる。HTML、CSS、JavaScriptファイルなどをGitHubリポジトリに置くだけで、簡単に自分のWebサイトをインターネットに公開できる便利な仕組みだ。個人プロジェクトやデモサイトの公開によく利用される。

次に、GitHub Actionsとは、GitHubリポジトリ上での特定のイベントをトリガーに、自動的に一連の処理を実行できる機能である。これにより、アプリケーションのテスト、ビルド、デプロイといった手間のかかる作業を自動化できる。今回の記事では、このGitHub Actionsを使って、Webアプリケーションをビルドし、GitHub Pagesにデプロイする一連の作業を自動化する方法が示されている。

Webアプリケーションを公開する基本的な流れは、まず開発したコードを「ビルド」し、その結果生成される公開用のファイルを「デプロイ」することだ。ビルドとは、開発中に書いたソースコードを、ブラウザが解釈できるHTML、CSS、JavaScriptファイルに変換・最適化する作業を指す。デプロイとは、このビルドされたファイルをWebサーバーに配置し、インターネットを通じてアクセスできるようにすることである。GitHub Actionsを利用する大きなメリットは、手動でのデプロイ作業をなくし、効率的かつミスの少ない公開プロセスを実現できる点にある。例えば、開発者がコードをGitHubのメインブランチにプッシュするたびに、GitHub Actionsが自動的にアプリケーションをビルドし、GitHub Pagesに最新版を公開してくれるようになる。

この自動化を実現するために、.github/workflowsディレクトリの中にmain.ymlという設定ファイルを作成する。このファイルには、GitHub Actionsが実行すべき一連のステップが記述されている。基本的なステップは以下の通りだ。

1. リポジトリのチェックアウト: 対象のコードをGitHubリポジトリから取得する。
2. Node.jsのセットアップと依存関係のインストール: アプリケーションのビルドに必要なNode.js環境を整え、npm installで必要なライブラリをインストールする。
3. アプリケーションのビルド: npm run buildなどのコマンドを実行し、アプリケーションを公開用にビルドする。この際、WebサイトのベースURLや、GitHub Pagesで必要となる環境変数などを指定することがある。
4. .nojekyllファイルの作成: GitHub Pagesのデフォルト処理であるJekyllをスキップさせるため、distフォルダ（ビルド成果物）に.nojekyllという空のファイルを作成する。
5. 404.htmlファイルの作成: ユーザーが存在しないURLにアクセスした場合に表示されるページを用意する。多くの場合、index.htmlを404.htmlとしてコピーするが、フレームワークによっては自動生成される。
6. GitHub Pagesの設定とデプロイ: ビルドされた公開用ファイルをGitHub Pagesにアップロードし、公開する。

特に重要な点として、APIキーやトークンなどの「機密性の高い環境変数（シークレット）」の扱いがある。これらの情報は直接コードに書き込んだり、main.ymlに平文で記述したりしてはいけない。GitHubは、これらのシークレット情報を安全に管理するための「GitHub Secrets」という機能を提供している。main.ymlの中でsecrets.VITE_GITHUB_TOKENのように参照することで、ビルド時に安全にこれらの情報を使用できる。事前にリポジトリの「Settings」→「Environments」→「github-pages」→「Environment secrets」でシークレットを設定しておく必要がある。

次に、各フレームワークにおける具体的な設定の違いを見ていこう。

Vue 3アプリケーション Vue 3プロジェクトではViteが使われる。vite.config.tsファイルにbase: '/vue-github-profile/'という設定を追加することで、アプリケーションが公開されるURLのベースパスを指定する。ビルドはnpm run buildで行われ、結果はdistフォルダに出力される。GitHub Actionsのワークフローでは、このdistフォルダに対して.nojekyllと404.html（index.htmlをコピー）を作成し、デプロイする。

SvelteKitアプリケーション SvelteKitは、SvelteフレームワークでWebサイトを構築するためのツールキットだ。GitHub Pagesのような静的サイトホスティングサービスにデプロイする場合、「アダプター」と呼ばれる機能を使う。具体的には、@sveltejs/adapter-staticをインストールし、svelte.config.tsファイルでこれをインポートして設定する。kit.adapterプロパティでadapter-staticを指定し、fallback: '404.html'を設定することで、SvelteKitが自動的に404エラーページを生成してくれる。また、kit.paths.base: '/svelte-github-profile'でベースパスを指定する。SvelteKitはビルド結果をbuildフォルダに出力するため、GitHub Actionsのワークフローではbuild/.nojekyllを作成することになる。404.htmlはアダプターが自動生成するため、手動でコピーする必要はない。

Angular 20アプリケーション Angularの場合、ng deployというデプロイコマンドがあるが、機密性の高い環境変数を安全に扱うため、GitHub Actionsを使用する選択肢が取られている。angular.jsonのoutputPath設定を"dist"にすることで、ビルド結果がdistフォルダに出力されるようにする。GitHub Actionsのビルドステップでは、npm run buildコマンドに--define SECRET_GITHUB_TOKEN='${{ secrets.SECRET_GITHUB_TOKEN }}'と--base-href=https://railsstudent.github.io/angular-github-profile/というオプションを付けて実行する。--defineオプションは、ビルド時にコード内の特定の変数をGitHub Secretsから取得した値に置き換える役割を果たす。--base-hrefは、Angularアプリケーションが動作するURLのベースパスを指定する。Vue 3と同様に、distフォルダに.nojekyllと404.htmlを手動で作成する。

これらの設定とmain.ymlファイルをリポジトリのメインブランチにコミットすると、GitHub Actionsが自動的にワークフローを実行し、アプリケーションがビルドされ、GitHub Pagesにデプロイされる。初回デプロイではシークレットの設定が完了していないために失敗することがあるが、その場合は設定を完了してから再度コミットするか、GitHub Actionsのワークフローを手動で再実行すればよい。

デプロイが完了したら、GitHubリポジリポジトリの「Settings」→「Pages」から、「Build and deployment」のソースが「GitHub Actions」に設定されていることを確認し、公開されたライブサイトのURLをクリックして、アプリケーションが正しく動作しているかを検証する。

このように、GitHub PagesとGitHub Actionsを組み合わせることで、Vue、Svelte、Angularといったモダンなフレームワークで開発したWebアプリケーションを、効率的かつ安全にインターネットに公開できる。フレームワークごとにビルドの設定や出力パス、404エラーページの扱いなどに違いはあるものの、GitHub Actionsのワークフローを一度構築してしまえば、以降の更新は自動化され、開発者はコードの記述に集中できるようになる。これは、Web開発におけるCI/CD（継続的インテグレーション/継続的デプロイ）の一例であり、システムエンジニアとして非常に重要なスキルセットの一部となるだろう。