読者です 読者をやめる 読者になる 読者になる

firebaseホスティングサービスの登録からデプロイまで

その他技術 firebase

firebaseの記事を最近見るようになってきたので試しに触ってみる。

プロジェクトの作成

https://firebase.google.com/

「無料で開始」をクリック。

「新規プロジェクトを作成」をクリック。

「プロジェクト名」、「国 / 地域」を入力、選択して「プロジェクトを作成」をクリック。

CLIの導入

ローカルの開発用ディレクトリを作成する。今回は C:\dev\firebase に作成した。

作成した開発用ディレクトリに移動し、コンソール(ターミナル)を開く。

次のコマンドでnpmからCLIをインストールする。

npm i firebase-tools -g

ログイン。

firebase login

f:id:kosumoro:20161015140018j:plain

初期化。いくつか質問されるので答えていく。

firebase init

f:id:kosumoro:20161015140805j:plain

  • Are you ready to proceed? => Y
  • What Firebase CLI features do you want to setup for this folder? => Hosting

f:id:kosumoro:20161015141148j:plain

  • What Firebase project do you want to associate as default? => cosmolab(プロジェクトの作成で作成したプロジェクト名)
  • What file should be used for Database Rules? => database.rules.json(EnterクリックだけでOK)
  • What do you want to use as your public directory? => public(EnterクリックだけでOK)
  • Configure as a single-page app => y

初期化を行うとローカルに次のようなファイルが作成される。

+ public/
|   + index.html
|
+ .firebaserc
+ database.rules.json
+ firebase.json

デプロイ

firebase deploy