AngularアプリをGithubPagesにデプロイする

Githubページは静的なウェブサイトまたはウェブアプリを無料でホストできるGithub機能であり、プロジェクトのリポジトリのgh-pagesブランチにファイルを配置するのと同じくらい簡単です。 AngleCLI と、 angle-cli-ghpages というノードパッケージを使用すると、Githubページへのデプロイがさらに簡単になります。

この投稿では、Angular2+アプリのデプロイについて説明します。

まず、angle-cli-ghpagesをグローバルにインストールします。

$ npm install -g angular-cli-ghpages

次に、--base-hrefフラグを指定してAngularCLIを使用してプロジェクトをビルドし、正しいベースhrefの場所を設定します。

$ ng build --prod --base-href "<repo-name>"

次に、angle-cli-ghpagesを実行するのと同じくらい簡単です。 nghの省略形を使用できます。

$ ngh

そして完了！ これで、アプリはhttps://username.github.io/app-name/でホストされます。

---

オプションで、デプロイ時にコミットにメッセージを追加できます。

$ ngh --message="First deploy"

デプロイするブランチを指定することもできます。

$ ngh --branch=production

そして最後に、実際に展開して出力を確認する前に、いつでもドライランを実行できます。

$ ngh --dry-run

単一ページのWebアプリの修正

👉すべてのトラフィックをindex.htmlに転送する際に問題が発生した場合の修正については、 Back HalleyCoderからのこの投稿を参照してください。 基本的に、修正は、Session Storageと404.htmlファイルのメタタグを使用する単純なスクリプトであり、index.htmlにリダイレクトされ、ユーザーがアクセスしようとしたURLのデータが含まれています。