[Angular]デプロイしたサイトをGithub Pagesで表示する

AngularでデプロイしたサイトをGithub Pagesで表示する方法を説明していきます。

こちらのソースを参考にしてもらえればと思います。

koichi-ezato/covid

日本のコロナ(COVID-19)の感染状況確認サイト. Contribute to koichi-ezato/covid development by creating an account on GitHub.

1 前提条件
2 angular-cli-ghpagesインストール
3 ビルドする
4 gh-pagesブランチにpush
5 動作確認
6 最後に

前提条件

Angularのシステムが既に実装済みで、ng build --prodが終わっている状態から始めます。

angular-cli-ghpagesインストール

「angular-cli-ghpages」をインストールします。

npm install 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を活用していきたいですね。