AngularでデプロイしたサイトをGithub Pagesで表示する方法を説明していきます。
こちらのソースを参考にしてもらえればと思います。
https://github.com/koichi-ezato/covid
前提条件
Angularのシステムが既に実装済みで、ng build --prodが終わっている状態から始めます。
angular-cli-ghpagesインストール
「angular-cli-ghpages」をインストールします。
npm install -g angular-cli-ghpages
ビルドする
ng build --prod --base-href "https://[username].github.io/[repo]/"
[username]にはGithubのユーザ名、[repo]にはリポジトリ名に書き換えてください。
gh-pagesブランチにpush
ngh --dir=dist/[project-name]
[project-name]にはビルド後のdistディレクトリ直下のディレクトリ名（プロジェクト名）に書き換えてください。
動作確認
gh-pagesブランチにプッシュされたことが確認できたら、https://[username].github.io/[repo]/にアクセスしてみます。
サイトを確認することができました！！
最後に
Github Pagesを活用することでAngularのサイトでサーバサイドの実装が不要な場合に、環境構築など必要なく本番環境として利用することができます。クライアント側の処理だけでサイトが完成できるのであれば、サーバ代の節約にもなるので、積極的にGithub Pagesを活用していきたいですね。
