Angular でビルドしたファイルを GitHub Pages で公開する-スケ郎のお話

前提

前提として、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 のアプリケーションを 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 は反映されるまでに時間がかかります。もし表示されない場合は、少し時間をおいてアクセスしてみてください。

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

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

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