前提
- firebaseサーバにアカウントの作成及び、プロジェクトの登録を行なっていること
- ionic2を使用してアプリケーション作成を行なっていること(なにもいじってなくてもいいですが。)
ローカル開発ディレクトリをfirebase開発環境にする
既存のローカルionicプロジェクトをfirebaseの開発環境として登録します。
firebase init
DatabaseかHostingかを問われるので、Hostingを選択します。(何が違うのかは不明です。)
◉ Database: Deploy Firebase Realtime Database Rules
❯◉ Hosting: Configure and deploy Firebase Hosting sites
firebaseの設定ファイル名が問われますが、特に問題がなければそのままdatabase.rules.jsonで行きます。
? What file should be used for Database Rules? (database.rules.json)
デプロイ元のディレクトリが問われるので、今回はionicのbuild先であるwwwに指定します。
? What do you want to use as your public directory? www
SPAかどうか問われるので、yを入力してすすめます。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
これでローカルのプロジェクトがfirebaseのプロジェクトになりました。
ionicのbuild
buildにより、ionicはandroidやios用にバイナリを生成しますが、今回使用するのはwwwディレクトリに生成されるwebのSPAのものだけです。
以下のコマンドによりbuildを実行します。
ionic build
buildが成功するとwwwディレクトリにSPAソースが生成されます。
Property 'プロパティ名' is private and only accessible within classのエラーが発生した場合・・・
ionicでは
privateプロパティは許可されていない模様です。
プロパティをprivateからデフォルト(public)に変更します。ただし、constructorに指定したproviderはprivateでもいける様です。
修正
web版であってもcordova.jsを使用しようとしてコンソールに404エラーを吐きます。
正しいやり方ではなさそうですが、www/index.htmlの cordova.jsを読み込むところをコメントアウトしてしまいましょう。
<!-- cordova.js required for cordova apps -->
<!-- <script src="cordova.js"></script> -->
firebaseサーバへデプロイ
firebaseサーバへ、wwwのソースをデプロイします。
firebase deploy
デプロイに成功すると、Hosting URLに、デプロイされたURLが表示されますので、ブラウザなどからアクセスしてみてください。