Angular
でデプロイしたサイトをGithub Pages
で表示する方法を説明していきます。
こちらのソースを参考にしてもらえればと思います。
koichi-ezato/covid
日本のコロナ(COVID-19)の感染状況確認サイト. Contribute to koichi-ezato/covid development by creating an account on GitHub.
前提条件
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
を活用していきたいですね。
コメント