プログラミング

Firebaseで簡単HelloWorld

  /

HTML、css、javascriptは何とかマスターしたんだけど、サーバサイドまで手が回らない。
サーバーサイドを簡単に作れるBaasなんかあるんだけど、どんな感じか知りたい。

こんな事を考えている方にBaaSとして有名なFirebaseはどんなものか簡単に説明します。

BaaSってそもそも何？

まず、最近よく耳にするBaaSってそもそも何のことなんでしょうか。

BaaSとは Backend as a service の略で、別名MBaaSとも呼ばれます。

MBaaSとは Mobile Backend as a service の略です。

直訳すると、サービスとしてのモバイルバックエンドってなるんですが、要はバックエンドサーバーで必要になるであるろう機能一式をサービスとして提供しますよって事です。

例えば、自作したHTML、CSS等をアップロードして、インターネットを通して見れるようにできたり、データベースにデータを保存したり、認証機能が使用できたり等機能は豊富です。

これが無いと、どんな形態のサーバーを借りるかにもよりますが、クラウドサーバーを借りた場合は、webサーバー構築、データベース構築、API作成等サイトの公開までにしなければならないことが沢山出てきます。

Firebaseを使ってみる

Firebaseでサイトを公開する手順は下記です。

  1. Firebaseにユーザー登録
    ※Googleアカウントを持ってれば新たに登録しなくても大丈夫です。
  2. プロジェクトを登録する
  3. 自分のパソコンにFirebase CLIをインストールする
  4. HTML、cssを作る
  5. Firebaseにソースをアップロードする

これだけで自分が作ったHTMLとcssをインターネットを通して公開することができます。一つづつ順を追って説明していきます。

Firebaseにユーザー登録

下記サイトにアクセスし、ユーザー登録を行います。

https://firebase.google.com/?hl=ja

プロジェクトを登録する

登録が完了するとコンソール画面に遷移しますので、そこで「プロジェクトを追加」をクリックし新規プロジェクトを登録します。

コンソール画面に遷移しない場合は、下記から直接アクセス可能です。

https://console.firebase.google.com/?hl=ja

自分はHelloWorldというプロジェクト名で登録しました。

自分のパソコンにFirebase CLIをインストールする

ここはwindowsとMacで多少違うんですが、やってることは同じでnpmコマンドを自分のパソコンにインストールして、npmコマンドを使用し、Firebase CLIをインストールしているだけです。
※npmをインストールする基本的な方法を記載していますが、その他のインストール方法もあります。

Macの場合

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
$ echo 'export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"' >> ~/.bash_profile
$ echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh' >> ~/.bash_profile
$ source ~/.bashrc
$ nvm install v8.16.0

Windowsの場合

下記から最新版のnvm-setup.zipをダウンロード、解凍しnvm-setup.exeをダブルクリックしてインストールを実行します。

ダウンロードサイト： https://github.com/coreybutler/nvm-windows/releases

すでにnode.jsが自分のパソコンにインストールされている場合は、インストールの途中で既存のnode.jsをnvm-windowsの管理下に置くかどうか確認されます。どちらでも良いですが、僕は「はい」をオススメします。

インストールが完了したら、コマンドプロンプトかPowerShellを起動し、下記を実行します。

$ nvm install v8.16.0

これでnpmコマンドがインストールされたので、次にFirebase CLIをインストールします。

Mac, Windows共通

FirebaseCLIをインストールします。

$ npm install -g firebase-tools

先程２で作成したプロジェクトに紐づけます。

$ firebase login

下記のような事を聞かれますが、Yesにしておけば大丈夫です。

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

プロジェクトの紐づけが成功したか確認します。

$ firebase list

※出力にHelloWorldが含まれてればオッケーです。

プロジェクト用のディレクトリを作ってそこに移動します。

$ mkdir helloworld && cd helloworld

プロジェクトを初期化します。

$ firebase init

FirebaseCLIのどの機能を使うか聞いてくるので、Hostingを選びます。
(Spaceキーで選択することができます)

その後、デフォルトのFirebaseプロジェクトを聞かれますので、先程作ったhelloworld-XXXXXを選択します。その後も色々と聞かれますが、基本的にはEnterでデフォルト値を設定しておけば良いかと思います。

HTML、cssファイルを作る

何でもよいのでHTML、cssファイルを作成します。
自分は作成したのは下記です。単純にHelloWorldだけ出力させてます。
ファイルはpublicディレクトリ以下にhelloworld.html、helloworld.cssという名前で保存します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="helloworld.css" rel="stylesheet" type="text/css">
<title>Firebase Hosting Test</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
p {
    color: yellow;
    background-color: black;
}

Firebaseにソースをアップロードする

$ firebase deploy

これで完了です。下記ページにアクセスするとHelloworldが表示されていると思います。

https://firebase-project-id.firebaseapp.com/helloworld.html
※project-idは自分のhelloworldのプロジェクトIDに変更する

Firebase以外のBaaSサービス

Firebase以外にも下記のようなサービスがありますので、興味を持った方は調べてみてはどうでしょうか？

  • ニフティクラウド mobile backend
  • AppPot
  • IGAWorks

まとめ

これで自分が作成したHTMLやCSSを自由に外部に公開することができます。

ただ、独自ドメインにしたり、データストアと連携したりするには、もうちょっと色々と設定やコーディングが必要になります。ステップ・バイ・ステップで一歩ずつ進んでいきましょう。

また、自分は現在Firebaseを使用しサイトを構築中で、ノウハウも溜まってきたので、また別に機会に紹介できればと思います。

楽しい開発ライフを楽しみましょう！

firebase
RELATED POST