Firebaseを使ってWebサイトを無料で公開してみる

はじめまして。D2C dot沖縄 エンジニアの上原です。

今回は、Firebaseを使ってWebサイトを無料で簡単に公開してみようと思います。

■Firebaseとは

Firebaseは、Googleが運営しているmBaaSのことです。
Firebaseを使うことで、バックエンドの機能を簡単に用意することができ、サーバサイドの開発コストを大幅に減らすことができます。
Firebase：https://firebase.google.com/

■Firebaseを使う前に…

Firebaseを使うにはGoogleアカウントが必要です。事前にアカウントを取得してログインしておきましょう。
また、Webサイトをホスティングするために使用するツールは、npmでインストールすることができます。
なので、Node.jsとnpmも事前にインストールしておきましょう。
インストール手順はGoogleで検索してください。

■Firebaseコンソールにアクセスし、用意したGoogleアカウントでログイン

用意したGoogleアカウントでFirebaseにログインします。

■プロジェクトの作成

「プロジェクトの追加」から各項目を入力して進めていきましょう。

■Firebase CLIツールのインストール

ターミナルで下記コマンドを実行することでインストールされます。

＄ npm install -g firebase-tools

// バージョン確認のコマンド
＄ firebase --version

■Firebase CLIからFirebaseにログイン

$ firebase login

■Firebase Hostingのための初期化設定

各作業フォルダを作成し、作成したフォルダへ。
下記コマンドを実行し、設定を行います。

$ firebase init

実行すると、Firebase CLIと対話が始まります

今回はFirebase Hostingのみ利用するので、Hosting:に矢印をあわせてスペースキーを押下。選択されたらエンター押下で次に進みます。

次に、使用するプロジェクトを聞かれるので、プロジェクト名を選択してエンター押下。

? Select a default Firebase project for this directory: (Use arrow keys)

次に、公開するコンテンツのディレクトリを聞かれます。今回はデフォルトのpublicのまま行うのでそのままエンター押下。

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

次に、SPAに適した設定にするかどうかを聞かれます。今回はNを入力してエンター押下。

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

✔  Firebase initialization complete!

上記が表示されたら初期設定は完了です！

では、実際に公開してみましょう！

■デプロイ

$ firebase deploy

上記コマンドでデプロイできます。(今回は初期設定時に生成されたindex.htmlが公開します)

デプロイが完了すると「Hosting URL: https: //xxx.firebaseapp.com」が表示されるので、ブラウザでアクセスして確認してみましょう。

このような画面が表示されたら成功です！

■まとめ

サーバーの準備も不要なので、とても簡単にWebページを公開することができました。
シンプルなサイトだと無料枠でも十分運用できてしまえそうですね！
また、ユーザ認証も簡単に実装できるので、それらを使ったサービスを展開するのもありかもしれません。

さらに詳しく知りたいときは公式ページをご確認ください。
https://firebase.google.com/