前々から興味のあったAngular-CLIとGithub Pageにアプリを公開することをどうせなら、まとめてやった方が楽しいんじゃないかと思ったので試してみました。
終わってみると簡単なのですが、検索してみるとやりたいことの情報はほぼ英語なので試してみた一連の流れをまとめます。
※npmやnodeのインストール、Gitへの登録への登録が済んでいる前提で話を進めていきます。
それらの方法についての解説はここでは行いません。
スポンサードサーチ
目次
Angular-CLIのインストール
チュートリアルを見ながらアプリの作成
サンプルアプリの作成は公式サイトのチュートリアルにしたがって作成しました。
事前知識がなくても進められるようになっているのでわかりやすかったです。
https://angular.io/guide/quickstart
このようなアプリを作成します。
Githubへデプロイするための準備
デプロイするために必要なライブラリやGithub上での準備をしていきます。
angular-cli-pagesのインストール
デプロイするためのライブラリである「angular-cli-pages」をインストールします。
https://github.com/angular-buch/angular-cli-ghpages/blob/master/README.md
|
1 |
$ npm install -g angular-cli-ghpages |
注意
「ng github-pages:deploy」コマンドではデプロイすることができません。現在の仕様からは削除され、非対応となっています。お気をつけください。
https://github.com/angular/angular-cli/pull/4385
Githubでリポジトリの作成
まず、アプリのソースコードなどをコミットするためのリポジトリを作成します。
今回は「angular-cli-test」と言う名前で作成しました。
|
1 2 |
$ git remote add origin git@github.com:ユーザ名/リポジトリ名.git $ git push -u origin master |
作成したリポジトリにアプリをデプロイします
|
1 |
$ ng build --prod --base-href "https://ユーザー名.github.io/リポジトリ名/“ |
デプロイしたアプリを実行する
今回はアクセスして動いていることを確認したいので、アプリを常に実行させておくコマンドを実行します。
|
1 |
$ ngh --dry-run |
先ほど、base-hrefに指定したURLを開くと、アプリが実行されているはずです。
https://GithubのUSERNAME.github.io/作成したリポジトリ名/
こちらは私が作成し、Github Pageにデプロイしたアプリです。
Github Page上で動作しています。
