Angular でビルドしたファイルを GitHub Pages で公開する

2022年1月7日金曜日

Angular

t f B! P L

スポンサーリンク

前提

前提として、GitHub Pages で公開する Angularプロジェクトと、Git Hub のリポジトリが必要になります。

プロジェクトがなければ、以下のコマンドで、スタータープロジェクトを作って、それを公開してみましょう。

npm install -g @angular/cli
ng new your-angular-project --defaults
cd your-angular-project

GitHub のアカウントやリポジトリがない人は、こちらから作りましょう。(※ SSHの設定等もしておいてください。)
https://github.com/

用意ができたら、Angularプロジェクトのルートフォルダに移動して、以下のコマンドで、GitHub のリモートリポジトリを追加します。

cd path/to/your_project
git remote add origin git@github.com:<GitHubユーザー名>/<リポジトリ名>.git 

angular-cli-ghpages のインストール

angular-cli-ghpages は、Angular のアプリケーションを GitHub にアップして、自動で GitHub Pages 用のブランチまで切ってくれるコマンドラインツールである。

次のコマンドを使用して、angular-cli-ghpages をインストールする。

ng add angular-cli-ghpages

スポンサーリンク

デプロイ

デフォルト設定を使用して、プロジェクトを Github Pages にデプロイします。

プロジェクトは本番モードで自動的にビルドされます。
また、デフォルトでは gh-pages ブランチにビルトしたファイルがプッシュされます。

ng deploy <プロジェクト名> --base-href=/<リポジトリ名>/

以下のように、「Successfully published…」と出力されれば、デプロイ成功です。

GitHubへのデプロイ

デプロイしたアプリを確認する

デプロイしたら、アプリを動かしてみましょう。

ブラウザで次の URL を打ち込んで、Github Pages にデプロイしたアプリを表示してみましょう。

https://<GitHubユーザー名>.github.io/<リポジトリ名>/

Github Pages は反映されるまでに時間がかかります。もし表示されない場合は、少し時間をおいてアクセスしてみてください。

アプリを更新する

1度、GitHub Pages にアップしたアプリを更新する場合は、初回のデプロイ時と同じように、以下のコマンドを叩くだけです。

ng deploy <プロジェクト名> --base-href=/<リポジトリ名>/

まとめ

Angular のアプリを、「angular-cli-ghpages」を使って GitHub Pages にデプロイする手順を紹介してきました。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

QooQ