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) を見ると、ちゃんとデプロイされています