GitHub Pagesにデプロイする
fanzeyi/pokemon.jsonから取得したポケモン一覧を表示するアプリケーションを先日作ったので、今回はこれをGitHub Pagesにデプロイしてみたいと思います。手順はたったの3つです。
ソースコード：https://stackblitz.com/github/oioigohan/pokemon-list
リポジトリ：https://github.com/oioigohan/pokemon-list
デプロイ結果：https://oioigohan.github.io/pokemon-list/
参考：[Angular]デプロイしたサイトをGithub Pagesで表示する - CodeLab
1. angular-cli-ghpagesをインストールする
次のコマンドでangular-cli-ghpagesをインストールします。
> npm install angular-cli-ghpages
2. アプリケーションをビルドする
インストールが完了したら、作ったアプリケーションを次のコマンドでビルドします。
> ng build --prod --base-href "https://[username].github.io/[repo]/"
[username]にはGithubのユーザ名、[repo]にはリポジトリ名に書き換えてください。リポジトリ名の末尾に.github.ioを含めておく必要はありません。
3. gh-pagesブランチにプッシュする
ビルドが完了したら、GitHub Pagesにデプロイします。次のコマンドで作業ブランチとは別にgh-pagesというブランチが自動で作成されます。今後GitHub Pagesはそのブランチの内容を読み取ってくれます。
> npx ngh --dir=dist/[project-name]
[project-name]にはビルド後のdistディレクトリ直下のディレクトリ名（プロジェクト名）に書き換えてください。
デプロイができているか確認する
gh-pagesブランチにプッシュされたことが確認できたら、https://[username].github.io/[repo]/にアクセスしてみます。反映に数分かかることもあるので、404のページが表示される場合は少し待ちます。次のように正しく表示されていれば成功です。https://oioigohan.github.io/pokemon-list/
最後に
参考にさせていただいたサイトにも、
Github Pagesを活用することでAngularのサイトでサーバサイドの実装が不要な場合に、環境構築など必要なく本番環境として利用することができます。クライアント側の処理だけでサイトが完成できるのであれば、サーバ代の節約にもなるので、積極的にGithub Pagesを活用していきたいですね。
とあるように、GitHub Pagesを使うメリットは大きいです。
実際使ってみて、フロントエンドの実装結果をすぐに確認できることに非常にありがたみを感じられました。手順が少なく簡単で、リポジトリも汚さないのでAngularの練習中の方、サイトをサクッと公開したい方におすすめです。