Firebaseを使って静的サイトを公開してみる
おはようございます。こんにちわ。こんばんわ。まっすです。
仕事でFirebaseを使って静的サイトを公開することがあったので、手順をまとめてみました。
スポンサードサーチ
目次
Firebaseとは？
Googleが提供しているモバイルおよびWebアプリケーションのバックエンドサービスです。
mBaaS(mobile backend as a Service)の一つでスマホ向けのウェブアプリ機能を提供するサービスです。
FirebaseのようなmBaaSでは、バックエンドで動く汎用的な機能はあらかじめ提供されています。なので、アプリ開発の納期の短縮、開発コストの削減も可能です。
提供されている機能は、サイトのトップページにに記載してあります。
保存しておけるデータは1GBまで、転送量は10GB/月です。
公開までの手順
今回は、静的ホスティングサービスの「Firebase Hosting」を使って、静的サイトを公開してみたいと思います。
早速手順をみていきます。
Firebaseのアカウント作成
Firebaseのサイトにいき、画面右上の「ログイン」からログインを行います。
ログイン後、画面右上の「コンソールへ移動」から管理画面へアクセスします。
プロジェクトの作成
コンソールの「新規プロジェクトを作成」からプロジェクトの作成を選択します。
「プロジェクト名」と「アナリティクスの地域」を選択、その他項目にチェックを入れて次へ進みます。
プロビジョニングが完了して、
「新しいプロジェクトが準備できました」と表示されれば、完了です。
ここまでで、初期設定が完了しました。
Firebase Toolsの導入
ここからは、コマンドライン上での操作を行っていきます。
まずは、Firebaseをコマンドライン上で扱えるようにします。
npm install -g firebase-toolsインストールが完了したら、コマンドラインからログインを行います。
firebase loginアカウント情報を聞かれますが、自身のアカウント情報を登録してください。
アプリケーションの作成
ここからが本番です。
まずはアプリケーションの作成を行います。
下記のコマンドを入力します。
firebase initこれを入力すると、下記のような画面が表示されます。
123456789101112131415161718192021
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/path/project
Before we get started, keep in mind:
* You are initializing in an existing Firebase project 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
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules今回は、Hostingを選択します。
次は、先ほど作成したプロジェクトを選択します。
12345
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.
i .firebaserc already has a default project, using fir-test-7382c.あとは、全てEnterを押せば完了です。
問題なければ、
✔ Firebase initialization complete!
と表示されます。
これでローカルにプロジェクトのディレクトリが完成し、中にはpublicディレクトリと、設定が記載されているfirebase.jsonが作成されました。
publicフォルダには、「index.html」と「404.html」が入っています。
デプロイする
作成したプロジェクトをデプロイしてみます。
以下のコマンドを入力します。
firebase deploy && firebase open hosting:site
12345678910111213141516171819=== Deploying to 'fir-test-507b0'...
i deploying hosting
i hosting[fir-test-507b0]: beginning deploy...
i hosting[fir-test-507b0]: found 2 files in public
✔ hosting[fir-test-507b0]: file upload complete
i hosting[fir-test-507b0]: finalizing version...
✔ hosting[fir-test-507b0]: version finalized
i hosting[fir-test-507b0]: releasing new version...
✔ hosting[fir-test-507b0]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/fir-test-507b0/overview
Hosting URL: https://fir-test-507b0.firebaseapp.com
Opening Hosting: Deployed Site link in your default browser:
https://fir-test-507b0.firebaseapp.comデプロイに成功したら、自動的にこのような画面が表示されます。
ファイルの追加を行う場合、publicフォルダ内にcssやjsファイルを作成すればOKです。
作成後に再度、
firebase deploy && firebase open hosting:siteを入力すると、ファイルが追加されています。
ファイルの変更を行った場合も同様です。
スポンサードサーチ
おわりに
今回は、Firebaseを使って静的サイトを公開してみました。
独自ドメインも設定できるようなので、ページ数の少ないサイトを置いておくにはちょうど良さそうです。
