Angular アプリケーションを GitHub Pages で公開する方法

Angular アプリケーションを公開する方法を模索していましたが GitHub Pages が一番簡単だったのでそのメモです

angular-cli-ghpages

• angular-cli-ghpages というパッケージを使用します
• angular-cli-ghpages を使うための条件は下記です
  • Node.js 4.x 以上
  • Git 1.7.6 以上
  • Angular CLI で作った Angular アプリケーションであること
• 今回は下記の環境で試しています
  • Node.js 8.9.0
  • Git 2.14.3
  • Angular CLI 1.5.4

使い方

• angular-cli-ghpages をインストール

$ yarn global add angular-cli-ghpages

• 今回公開したいリポジトリ名を angular-tour-of-heroes とします

$ cd angular-tour-of-heroes/
$ ng build --prod --base-href "https://kasaharu.github.io/angular-tour-of-heroes/"
$ angular-cli-ghpages

• 上記コマンドを実行すると dist/ ディレクトリ配下が gh-pages ブランチとして push されます
  • コミットメッセージはデフォルト "Auto-generated commit"

オプション

• ブランチ名を変えたい場合
  • 下記のオプションで、 deploy ブランチに push します

$ angular-cli-ghpages --branch=deploy

• コミットメッセージを変えたい場合
  • 下記のオプションで、コミットメッセージを Deployment にします

$ angular-cli-ghpages --message="Deployment"

• dry-run

$ angular-cli-ghpages --dry-run

GitHub Pages で公開

• angular-cli-ghpages を使って gh-pages ブランチへの push まで済んでいるので、あとはリポジトリの設定を変えます
• Setting を選び、 GitHub Pages の項目で使用するブランチを gh-pages に変更するだけで完了です

確認

• 公開したページ(https://kasaharu.github.io/angular-tour-of-heroes) を見ると、ちゃんとデプロイされています

参考ページ

• angular-cli-ghpages - GitHub
• Deploy to GitHub Pages
• Enabling GitHub Pages to publish your site from master or gh-pages