Help us understand the problem. What is going on with this article?

ionic2プロジェクトをfirebaseのweb appとしてデプロイ

More than 3 years have passed since last update.

前提

  • firebaseサーバにアカウントの作成及び、プロジェクトの登録を行なっていること
  • ionic2を使用してアプリケーション作成を行なっていること(なにもいじってなくてもいいですが。)

ローカル開発ディレクトリをfirebase開発環境にする

既存のローカルionicプロジェクトをfirebaseの開発環境として登録します。

firebase init

DatabaseHostingかを問われるので、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.htmlcordova.jsを読み込むところをコメントアウトしてしまいましょう。

<!-- cordova.js required for cordova apps -->
<!-- <script src="cordova.js"></script> -->

firebaseサーバへデプロイ

firebaseサーバへ、wwwのソースをデプロイします。

firebase deploy

デプロイに成功すると、Hosting URLに、デプロイされたURLが表示されますので、ブラウザなどからアクセスしてみてください。

gambare
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away