😆

Angularで作成したWEBアプリをgithub pagesで公開する

2021/08/25に公開約1,000字

初めに

Angularで作ったアプリを他の人に見てもらいたい場合、わざわざサーバーレンタルして…ってやらなきゃいけないのか…?って思って調べてみたらgithub pagesから全世界に公開できるようです!

環境

angular-cli-ghpagesというパッケージを使います。
こいつが必要とする環境が以下の通りなので最低環境はこれになります。

  • Git 1.9以降
  • Angular CLI v9.0.0以降を介して作成されたAngularプロジェクト
    (ng updateでプロジェクトをupdateすればv9.0.0未満でも行けるらしいです。)

手順

  1. angular-cli-ghpagesをプロジェクトに追加します。
ng add angular-cli-ghpages
  1. Angularアプリケーションをdeployします。
    このコマンドを実行するとAngularアプリケーションは自動的にProdビルドされます。
ng deploy --base-href=/RepositoryName/

成功するとコマンドラインに下記のように表示されます。

🌟 Successfully published via angular-cli-ghpages! Have a nice day!
  1. githubのリポジトリを見るとgh-pagesというブランチが自動的に切られていると思います。

  2. あとはリポジトリの『settings』→『pages』で公開するブランチをgh-pagesに変更すればOKです。

画面上部にURLが表示されているのでそこからアクセスすればAngularのWEBアプリが動いているはず!(URL例:https://username.github.io/repositoryname)

まとめ

サーバーサイドが必要ないWEBアプリなら簡単に全世界に公開できる!

参考

https://github.com/angular-schule/angular-cli-ghpages
GitHubで編集を提案

Discussion

ログインするとコメントできます