Firebaseを試してみる(1)

FirebaseでWebサイトを無料でサクッと公開してみる
Ijoru 2016年11月21日に更新
http://qiita.com/Ijoru/items/5b27f1c32df2222514fb

を見て、Firebaseをやりたくなったので、上記サイトを写経してみる!

(環境)
Windoes8.1
node v6.9.1
npm 3.10.8

(1)Googleアカウントを登録。

既に持っていた。

(2)FirebaseでWebサイト用のプロジェクトの作成

https://console.firebase.google.com/

プロジェクト作成 をクリック

image

プロジェクト名を入力し、日本 を選択し、プロジェクト作成 をクリック。

image

下記のような画面になる。

image

(3)Node.jsとnpmをインストール

私の環境では、前回、既にインストールしていた。

ハイブリッドアプリionic2を試してみる(1)
monaca + onsenUI + nifty cloud mobile backend は非常に便利!monacaは、無料だと、ク...

node v6.9.1
npm 3.10.8

(4)firebase-toolsのセットアップ

C:/js/firebase フォルダをあらかじめ作成しておく。

image

cd c:\js\firebase

$ npm install -g firebase-tools

image

1分くらいでインストールされたらしい。。。

image

$ firebase login で、最初のところで Enterボタンを押すと、WEBブラウザで、「許可のリクエスト」が自動的に開く。

image

「許可」をクリック

image

以下のような画面になる。

image

困ったら、

https://firebase.google.com/docs/cli/

を読んでがんばってねということらしい。とりあえず、この画面はそっと閉じる。

Windowsファイヤーウォールの方で、Node.jsがなんか許可を求めてきたので、とりあえず、「許可」としておいた。

image

(5)プロジェクトの初期化とデプロイ

$ firebase init

DatabaseかHostingか聞かれるので、Hostingを選択。

その他、適当に設定。詳細は、こちらを参照。

image

image

(c:/js/firebase/)public/index.html を開くとこんな感じ。

image

Welcome to のところを、Hello World to に書き換え

image

$ firebase deploy

image

え?もう、デプロイ終わったの!?

(6)サイトの確認

Firebaseのconcoleにログイン

https://console.firebase.google.com/
image

helloworldプロジェクトをクリックすると、以下のような画面になので、Hosting をクリック。

image

image

ドメイン のリンクのところをクリック。

image

ちゃんとできてる!感動!Herokuより簡単!(FirebaseはRailsはデプロイできないが、)

(参考)

FirebaseでWebサイトを無料でサクッと公開してみる
Ijoru 2016年11月21日に更新
http://qiita.com/Ijoru/items/5b27f1c32df2222514fb

→このサイトを写経しました。

2016-10-03
Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開!
http://paiza.hatenablog.com/entry/2016/10/03/Web%E9%96%8B%E7%99%BA%E3%81%8C%E6%8D%97%E3%82%8BFirebase%E5%85%A5%E9%96%80%EF%BC%81JavaScript%E3%81%A7%E3%80%8CWeb%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E8%AA%8D%E8%A8%BC%E3%80%8D%E6%A9%9F%E8%83%BD%E3%82%92

Firebaseの始め方
kohashi 2016年06月27日に投稿
http://qiita.com/kohashi/items/43ea22f61ade45972881

firebaseのいろはのい Webアプリ開発から公開まで
Tachibana446 2016年10月25日に投稿
http://qiita.com/Tachibana446/items/eba2fc67d8ef1535541a

Riot.js x Firebase で超お手軽にWebアプリを作ってみる
tomomichi 2016年10月25日に更新
http://qiita.com/tomomichi/items/43da4d35007e69d0f484

FirebaseでWebチャットアプリをデプロイするまで(1時間コース)
st5757 2016年07月19日に更新
http://qiita.com/st5757/items/9e651e8cffaa90681426

Railsのコードを書けないAndroidアプリ開発者がFirebaseを使ってチャットアプリを作る
YusukeIwaki
2016年05月19日に更新
http://qiita.com/YusukeIwaki/items/3b6bb5826746bdf9fdba

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする