Firebaseを使って静的サイトを公開してみる

おはようございます。こんにちわ。こんばんわ。まっすです。

仕事でFirebaseを使って静的サイトを公開することがあったので、手順をまとめてみました。

スポンサードサーチ

Firebaseとは?

Googleが提供しているモバイルおよびWebアプリケーションのバックエンドサービスです。

mBaaS(mobile backend as a Service)の一つでスマホ向けのウェブアプリ機能を提供するサービスです。

FirebaseのようなmBaaSでは、バックエンドで動く汎用的な機能はあらかじめ提供されています。なので、アプリ開発の納期の短縮、開発コストの削減も可能です。

提供されている機能は、サイトのトップページにに記載してあります。

Firebase

保存しておけるデータは1GBまで、転送量は10GB/月です。

公開までの手順

今回は、静的ホスティングサービスの「Firebase Hosting」を使って、静的サイトを公開してみたいと思います。

早速手順をみていきます。

Firebaseのアカウント作成

Firebaseのサイトにいき、画面右上の「ログイン」からログインを行います。

ログイン後、画面右上の「コンソールへ移動」から管理画面へアクセスします。

プロジェクトの作成

コンソールの「新規プロジェクトを作成」からプロジェクトの作成を選択します。

「プロジェクト名」と「アナリティクスの地域」を選択、その他項目にチェックを入れて次へ進みます。

プロビジョニングが完了して、

「新しいプロジェクトが準備できました」と表示されれば、完了です。

ここまでで、初期設定が完了しました。

Firebase Toolsの導入

ここからは、コマンドライン上での操作を行っていきます。

まずは、Firebaseをコマンドライン上で扱えるようにします。

インストールが完了したら、コマンドラインからログインを行います。

アカウント情報を聞かれますが、自身のアカウント情報を登録してください。

アプリケーションの作成

ここからが本番です。

まずはアプリケーションの作成を行います。
下記のコマンドを入力します。

これを入力すると、下記のような画面が表示されます。

今回は、Hostingを選択します。

次は、先ほど作成したプロジェクトを選択します。

あとは、全てEnterを押せば完了です。

問題なければ、
✔ Firebase initialization complete!
と表示されます。

これでローカルにプロジェクトのディレクトリが完成し、中にはpublicディレクトリと、設定が記載されているfirebase.jsonが作成されました。

publicフォルダには、「index.html」と「404.html」が入っています。

デプロイする

作成したプロジェクトをデプロイしてみます。

以下のコマンドを入力します。

デプロイに成功したら、自動的にこのような画面が表示されます。

ファイルの追加を行う場合、publicフォルダ内にcssやjsファイルを作成すればOKです。

作成後に再度、

を入力すると、ファイルが追加されています。

ファイルの変更を行った場合も同様です。

スポンサードサーチ

おわりに

今回は、Firebaseを使って静的サイトを公開してみました。
独自ドメインも設定できるようなので、ページ数の少ないサイトを置いておくにはちょうど良さそうです。

コメントを残す

*