Angular-CLIで作成したアプリをGithub Pagesにデプロイする

前々から興味のあった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

注意

「ng github-pages:deploy」コマンドではデプロイすることができません。現在の仕様からは削除され、非対応となっています。お気をつけください。

https://github.com/angular/angular-cli/pull/4385

 

Githubでリポジトリの作成

まず、アプリのソースコードなどをコミットするためのリポジトリを作成します。

今回は「angular-cli-test」と言う名前で作成しました。

 

 

作成したリポジトリにアプリをデプロイします

 

デプロイしたアプリを実行する

今回はアクセスして動いていることを確認したいので、アプリを常に実行させておくコマンドを実行します。

先ほど、base-hrefに指定したURLを開くと、アプリが実行されているはずです。

https://GithubUSERNAME.github.io/作成したリポジトリ名/

こちらは私が作成し、Github Pageにデプロイしたアプリです。

Github Page上で動作しています。

ttps://Laha15.github.io/angular-cli-test/