プログラミング

Firebaseで簡単HelloWorld

投稿日:2019年5月31日 更新日:

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をインターネットを通して公開することができます。一つづつ順を追って説明していきます。

1,Firebaseにユーザー登録

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

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

2,プロジェクトを登録する

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

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

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

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

3,自分のパソコンに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

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

$ 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でデフォルト値を設定しておけば良いかと思います。

4,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;
}

5,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を使用しサイトを構築中で、ノウハウも溜まってきたので、また別に機会に紹介できればと思います。

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

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

プログラミング教育必修化を考える。プログラミング的思考はなぜ必要なの?

2020年からプログラミング必修化されることは皆さんご存知だと思います。 文部科学省から出された「学習指導要領解説」によると「プログラミング的思考」を育むためというのが一つの指針としてあるようです。 …

初めて学ぶプログラミング言語は何がよい?

こんにちは、はんぺらです。 2020年からプログラミングが小学生の必修科目になりますね。そう、世の中はプログラミングブームです。このビッグウェーブに乗っかろうと学習を始めようと思った人もいるでしょう。 …

JavaScriptフレームワークは何使ってる?自分はReact使ってます

HTML、CSSの勉強が一通り終わり、次はそろそろJavascriptに手を出そうと思っている人は多いと思います。また、これまでPHPやRails等サーバーサイドをメインでやってきた人が、フロントエン …

プログラミング学習で行き詰まってる人。現状を打破する方法教えます

プログラミング学習をはじめようと決意して、実際に本を買って始めたは良いものの、今一理解できてる気がしない。 本は取り敢えず読み進めてるけど、意味不明なエラーが全然解決できない。心が折れそう。。。 その …

僕が個人開発でサービスを作る理由と継続するためにしている事

こんにちは、はんぺらです。 皆さんはプログラミングを学んで何をしたいのでしょうか AIの開発チームに加わりたいのか、ロボットを作りたいのか、ただ、何となくエンジニアとして就職できればよいのか。 僕は今 …

はんぺらのプロフィール

神奈川県在住、30代web系プログラマー

情報系の大学卒業後、工場勤務、引っ越し業者、アパレル販売員等を得て、web系のエンジニアに落ち着く。その後海外で3年ほど働き、帰国後日本でエンジニアを行いつつ、フリーランスになる機会を伺っている。