中安拓也のブログ

プログラミングについて書くブログ

IonicアプリをGitHub Pagesで公開する

Ionic3を使って作成したアプリを、GitHub Pagesで公開する方法について

バージョン情報

  • ionic-angular@3.9.2
  • Angular@5.2.10

GitHub Pagesで公開する

GitHubの設定を変更する

f:id:l08084:20180512173432p:plain

GitHubにアクセスして、GitHub Pagesで公開したいアプリのリポジトリの設定ボタンをクリックする

f:id:l08084:20180512173530p:plain

GitHub PagesのSourceを、Noneからmaster branchに変更する

Ionicアプリをビルドする

ターミナルを開いて、下記のビルドコマンドを実行する

$ ionic build --prod

出来上がったwww/フォルダを丸ごとGitHubにプッシュする

なお、.gitignorewww/が含まれたままだとプッシュできないので、事前に削除しておくのを忘れないように注意

これで、GitHub Pagesへの公開が完了する🍺🍺🍺

実際に参照してみる

GitHub PagesにプッシュしたIonicアプリを参照するには、https://[GitHubアカウント名].github.io/[リポジトリ名]/wwwのURLにアクセスすれば良い。

※ビルドした資源は、www/ 配下にあるため、URLに /www をつけるのを忘れないように

今回は、GitHubアカウント: l08084 リポジトリ名: ionic-sample-shopping-app のIonicアプリをGitHub Pagesにプッシュしたので、下記URLを参照すれば、実際の画面をみることができる。

https://l08084.github.io/ionic-sample-shopping-app/www