プログラミング

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

プログラミング
この記事は約2分で読めます。
スポンサーリンク

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

スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました