Firebaseでのミニアプリデプロイ

KVS的なDBを使うかもしれず、firebaseの復習をしております。以前、firebaseのサンプルなどちょこちょこ動かしましたが、firebaseに登録をしただけでデプロイまではしておりませんでした。

簡単にデプロイまではできたので、メモ。

https://github.com/umanari145/firebase

Contents

1 概要
2 ログイン
3 プロジェクト作成
4 デプロイ
5 使用できるサービスについて
- 5.1 functions
- 5.2 hosting

概要

firebaseはただ単にKVS型のデータを格納しておくだけではなく(最初そういうものかと思っていました。)、アプリ自体をデプロイしておくことができます。

DBだけではなく、アプリ自体をサーバーなしで配置できるインフラ環境になるかと思います。

こういったサービスのことをBass(Backend as a Service)と言います。

firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=******************

? Paste authorization code here:

firebase login

i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes

i To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on any device to log in:

https://accounts.google.com/o/oauth2/auth?client_id=******************

? Paste authorization code here:

上記のようなメッセージがでます。

URLにアクセスするとgoogleアカウントの認証を要求されるので、実際に認証するとハッシュ値がでてくるのでコピペしてあげれば、下記のようにメールアドレスが表示されます。

✔  Success! Logged in as メールアドレス

1	✔ Success! Logged in as メールアドレス

プロジェクト作成

firebase init で実際のプロジェクトが作成されます。

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /var/www/html

Before we get started, keep in mind:

  * You are currently outside your home directory

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
Database: Deploy Firebase Realtime Database Rules, Functions: Configure and deploy Cloud Functions, Hosting: Configure and deploy Firebas
e Hosting sites, Storage: Deploy Cloud Storage security rules

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: プロジェクト名-プロジェクトID (プロジェクト名)
i  Using project プロジェクト名-プロジェクトID (プロジェクト名)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for プロジェクト名-プロジェクトID have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
? File functions/index.js already exists. Overwrite? No
i  Skipping write of functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> protobufjs@6.9.0 postinstall /var/www/html/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 252 packages from 206 contributors and audited 252 packages in 52.497s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

######## #### ######## ######## ######## ### ###### ########

## ## ## ## ## ## ## ## ## ## ##

###### ## ######## ###### ######## ######### ###### ######

## ## ## ## ## ## ## ## ## ## ##

## #### ## ## ######## ######## ## ## ###### ########

You're about to initialize a Firebase project in this directory:

/var/www/html

Before we get started, keep in mind:

* You are currently outside your home directory

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.

Database: Deploy Firebase Realtime Database Rules, Functions: Configure and deploy Cloud Functions, Hosting: Configure and deploy Firebas

e Hosting sites, Storage: Deploy Cloud Storage security rules

=== Project Setup

First, let's associate this project directory with a Firebase project.

You can create multiple project aliases by running firebase use --add,

but for now we'll just set up a default project.

? Please select an option: Use an existing project

? Select a default Firebase project for this directory: プロジェクト名-プロジェクトID (プロジェクト名)

i Using project プロジェクト名-プロジェクトID (プロジェクト名)

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be

structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json

✔ Database Rules for プロジェクト名-プロジェクトID have been downloaded to database.rules.json.

Future modifications to database.rules.json will update Database Rules when you run

firebase deploy.

=== Functions Setup

A functions directory will be created in your project with a Node.js

package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript

? Do you want to use ESLint to catch probable bugs and enforce style? No

✔ Wrote functions/package.json

? File functions/index.js already exists. Overwrite? No

i Skipping write of functions/index.js

✔ Wrote functions/.gitignore

? Do you want to install dependencies with npm now? Yes

> protobufjs@6.9.0 postinstall /var/www/html/functions/node_modules/protobufjs

> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.

added 252 packages from 206 contributors and audited 252 packages in 52.497s

29 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that

will contain Hosting assets to be uploaded with firebase deploy. If you

have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

✔ Wrote public/index.html

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow

uploads and downloads. You can keep these rules in your project directory

and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

i Writing configuration info to firebase.json...

i Writing project information to .firebaserc...

✔ Firebase initialization complete!

デプロイ

作ったものをデプロイする場合には firebase deploy でOKです。

=== Deploying to 'プロジェクト名-プロジェクトID'...

i  deploying database, storage, functions, hosting
i  database: checking rules syntax...
✔  database: rules syntax for database プロジェクト名-プロジェクトID is valid
i  firebase.storage: checking storage.rules for compilation errors...
⚠  [W] undefined:undefined - Ruleset uses old version (version [1]). Please update to the latest version (version [2]).
✔  firebase.storage: rules file storage.rules compiled successfully
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  storage: latest version of storage.rules already up to date, skipping upload...
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (28.29 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting[プロジェクト名-プロジェクトID]: beginning deploy...
i  hosting[プロジェクト名-プロジェクトID]: found 1 files in public
✔  hosting[プロジェクト名-プロジェクトID]: file upload complete
i  database: releasing rules...
✔  database: rules for database プロジェクト名-プロジェクトID released successfully
✔  storage: released rules storage.rules to firebase.storage
i  functions: updating Node.js 8 function v1(us-central1)...
✔  functions[v1(us-central1)]: Successful update operation.
i  hosting[プロジェクト名-プロジェクトID]: finalizing version...
✔  hosting[プロジェクト名-プロジェクトID]: version finalized
i  hosting[プロジェクト名-プロジェクトID]: releasing new version...
✔  hosting[プロジェクト名-プロジェクトID]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/プロジェクト名-プロジェクトID/overview
Hosting URL: https://プロジェクト名-プロジェクトID.web.app

=== Deploying to 'プロジェクト名-プロジェクトID'...

i deploying database, storage, functions, hosting

i database: checking rules syntax...

✔ database: rules syntax for database プロジェクト名-プロジェクトID is valid

i firebase.storage: checking storage.rules for compilation errors...

⚠ [W] undefined:undefined - Ruleset uses old version (version [1]). Please update to the latest version (version [2]).

✔ firebase.storage: rules file storage.rules compiled successfully

i functions: ensuring required API cloudfunctions.googleapis.com is enabled...

✔ functions: required API cloudfunctions.googleapis.com is enabled

i storage: latest version of storage.rules already up to date, skipping upload...

i functions: preparing functions directory for uploading...

i functions: packaged functions (28.29 KB) for uploading

✔ functions: functions folder uploaded successfully

i hosting[プロジェクト名-プロジェクトID]: beginning deploy...

i hosting[プロジェクト名-プロジェクトID]: found 1 files in public

✔ hosting[プロジェクト名-プロジェクトID]: file upload complete

i database: releasing rules...

✔ database: rules for database プロジェクト名-プロジェクトID released successfully

✔ storage: released rules storage.rules to firebase.storage

i functions: updating Node.js 8 function v1(us-central1)...

✔ functions[v1(us-central1)]: Successful update operation.

i hosting[プロジェクト名-プロジェクトID]: finalizing version...

✔ hosting[プロジェクト名-プロジェクトID]: version finalized

i hosting[プロジェクト名-プロジェクトID]: releasing new version...

✔ hosting[プロジェクト名-プロジェクトID]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/プロジェクト名-プロジェクトID/overview

Hosting URL: https://プロジェクト名-プロジェクトID.web.app

上記のようなメッセージが吐かれて、無事にデプロイされます。

URLにアクセスすればアプリが確認できます。以下構成をみていきます。

使用できるサービスについて

functions

ここにAPIを実装することができます。

functions/index.js

const functions = require('firebase-functions');
const firebase = require('firebase');
const config = require('./config.js');
const Sugar = require('sugar');
const express = require('express');
const cors = require('cors');
const app = express();
const bodyParser = require('body-parser');

firebase.initializeApp(config.firebaseConfig);
const database = firebase.database();

app.use(cors())
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

//新規追加
app.post('/:jname', (req, res) => {

  let jname = req.params.jname;
  let Ref = database.ref(jname);
  let data = req.body;
  Ref.push(data);

  res.header('Content-Type', 'application/json; charset=utf-8');
  res.status(201).json({result: 'ok',res:data});
});

//一覧取得
app.get('/:jname', (req, res) => {

  let jname = req.params.jname;
  database.ref(jname).once('value', (snapshot) => {
    let items = snapshot.val();
    let data = [];

    for(var key in items) {
        let each_item = items[key];
        each_item['key'] = key;
        data.push(each_item);
    }

    res.header('Content-Type', 'application/json; charset=utf-8');

    let res_data = {};
    res_data[jname] = data;
    res.send(res_data);
  });
});

//個別編集
app.put('/:jname/:hash_key', (req, res) => {

  let jname = req.params.jname;
  let hash_key = req.params.hash_key;

  let data = req.body;
  database.ref(jname).child(hash_key).update(data)

  res.header('Content-Type', 'application/json; charset=utf-8');
  res.status(201).json({result: 'ok',res:data});
});

//個別削除
app.delete('/:jname/:hash_key', (req, res) => {
  let jname = req.params.jname;
  let hash_key = req.params.hash_key;
  database.ref(jname).child(hash_key).remove();
  res.header('Content-Type', 'application/json; charset=utf-8');
  res.status(201).json({result: 'delete ', hash_key: hash_key});
});

//全削除
app.delete('/:jname', (req, res) => {
  let jname = req.params.jname;
  database.ref(jname).remove();
  res.header('Content-Type', 'application/json; charset=utf-8');
  res.status(201).json({result: 'ok all delete'});
});


/*ローカルテスト時
app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});
*/

//exports.v1 = functions.https.onRequest(app);

const functions = require('firebase-functions');

const firebase = require('firebase');

const config = require('./config.js');

const Sugar = require('sugar');

const express = require('express');

const cors = require('cors');

const app = express();

const bodyParser = require('body-parser');

firebase.initializeApp(config.firebaseConfig);

const database = firebase.database();

app.use(cors())

app.use(bodyParser.urlencoded({

extended: true

}));

app.use(bodyParser.json());

//新規追加

app.post('/:jname', (req, res) => {

let jname = req.params.jname;

let Ref = database.ref(jname);

let data = req.body;

Ref.push(data);

res.header('Content-Type', 'application/json; charset=utf-8');

res.status(201).json({result: 'ok',res:data});

});

//一覧取得

app.get('/:jname', (req, res) => {

let jname = req.params.jname;

database.ref(jname).once('value', (snapshot) => {

let items = snapshot.val();

let data = [];

for(var key in items) {

let each_item = items[key];

each_item['key'] = key;

data.push(each_item);

}

res.header('Content-Type', 'application/json; charset=utf-8');

let res_data = {};

res_data[jname] = data;

res.send(res_data);

});

//個別編集

app.put('/:jname/:hash_key', (req, res) => {

let jname = req.params.jname;

let hash_key = req.params.hash_key;

let data = req.body;

database.ref(jname).child(hash_key).update(data)

res.header('Content-Type', 'application/json; charset=utf-8');

res.status(201).json({result: 'ok',res:data});

});

//個別削除

app.delete('/:jname/:hash_key', (req, res) => {

let jname = req.params.jname;

let hash_key = req.params.hash_key;

database.ref(jname).child(hash_key).remove();

res.header('Content-Type', 'application/json; charset=utf-8');

res.status(201).json({result: 'delete ', hash_key: hash_key});

});

//全削除

app.delete('/:jname', (req, res) => {

let jname = req.params.jname;

database.ref(jname).remove();

res.header('Content-Type', 'application/json; charset=utf-8');

res.status(201).json({result: 'ok all delete'});

});

/*ローカルテスト時

app.listen(3000, () => {

console.log('Example app listening on port 3000!');

});

//exports.v1 = functions.https.onRequest(app);

一般的な新規作成、一覧、編集、削除(おまけで全削除)のRESTAPIです。とりあえず認証などはかけずに作ってみました。

上記のようなAPIを書いておき、firebaseにデプロイするとRESTAPIができています。

それぞれ対応するHTTPリクエストを書いて起きた時に、しっかりと結果を返してくれます。

ローカルでテストをするときは node functions/index.js とうちnodeのサーバーを立てましょう。

functionsの部分は独立した部分のようでいわゆるバックエンド側になるかと思います。

このディレクトリ自体にpackage.jsonを置いてライブラリをインストールし、このディレクトリ独自で管理することが一般的のようです。

hosting

冒頭でも書きましたが、当初KVSのサーバーだけをかりてファイルなどは別の箇所に置いておくものかと思いました。(そういう使い方ももちろんできますが・・)

.firebaserc

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

{

"database": {

"rules": "database.rules.json"

"hosting": {

"public": "public",

"ignore": [

"firebase.json",

"**/.*",

"**/node_modules/**"

"rewrites": [

{

"source": "**",

"destination": "/index.html"

}

]

"storage": {

"rules": "storage.rules"

}

上記のファイルのhostingの部分がfirebaseのホスティングサービス(hosting)の設定になります。( firebase init 時に作られます。)

一般的にはpublic以下に公開ファイルをおくことが多いかと思います。ここにindex.htmlなどを置いてアクセスしてあげればfirebaseにデプロイした時にアプリを確認することができます。

参考リンク

Firebaseでデプロイしよう！

【第4回】 Firebase Hosting でスタティックな Web ページをデプロイしよう！【はじめてみよう Firebase】

Firebaseでのミニアプリデプロイ

概要

ログイン

プロジェクト作成

デプロイ

使用できるサービスについて

functions

hosting