[Firebaseでサーバレス] ウェブサイトをすばやく簡単にホスティング

2020/10/02

ローカルから簡単に自分のwebサイトをホスティングする方法としてfirebaseを利用する方法があります。

料金　無料プランもある

GCP側ですでにクレジットカードの登録がされて、課金が有効の場合には、firebaseのプロジェクトはデフォルトで従量プランのblazeプランが選択されるようです。
料金プランを変更したい場合は、Firebaseプロジェクトを作成した後に変更してください。無料のSparkプランと従量のBlazeプランのふたつがあります。
サービス料金について https://firebase.google.com/pricing?authuser=0

利用

FirebaseのプロジェクトはGCPのプロジェクトと紐づいて作成されます。既存のGCPプロジェクトからプロジェクトを選択して、Firebaseを利用します。そのため,Googleアカウントが必要になります。
こちらからFirebaseにアクセスして、右上のコンソールへ移動を選択してください。
https://firebase.google.com/

FirebaseをCLIで利用するにはnode.js (npm)が必要です。事前にインストールしておきましょう。

ホスティングしたいフォルダを準備

デスクトップに下記のようにファイルを準備しましょう。

Desktop/
├ sample_project/
└ public/
└ index.html

Firebaseホスティングでは、publicというフォルダに入っているindex.htmlを公開します。

CLI toolsのインストール

npm install -g firebase-tools

Firebaseへログイン

firebase login

Firebaseのprojectを列挙

firebase projects:list

結果から自分のFirebaseと紐づけたGCPのプロジェクトのproject IDを確認します

Firebaseの設定初期化

firebase init --project=”project id”

project idにはfirebase projects:listで確認した値を入力します

下記のように設定画面がたちあがります

You're about to initialize a Firebase project in this directory:

/Users/xxx/Desktop/sample_project

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Ente
r to confirm your choices. (Press to select, to toggle all, to invert selection)
◯ 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
◯ Emulators: Set up local emulators for Firebase features
◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

=== Project Setup

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 Using project your GCP project

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public publicを選択
? Configure as a single-page app (rewrite all urls to /index.html)? No Noを選択
✔ Wrote public/404.html
? File public/index.html already exists. Overwrite? No　Noを選択
i Skipping write of public/index.html

i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...

✔ Firebase initialization complete!

Webサイトをデプロイ

firebase deploy

=== Deploying to 'yourgcpjroject'...

i deploying hosting
i hosting[yourgcpjroject]: beginning deploy...
i hosting[yourgcpjroject]: found 3 files in public
✔ hosting[yourgcpjroject]: file upload complete
i hosting[yourgcpjroject]: finalizing version...
✔ hosting[yourgcpjroject]: version finalized
i hosting[yourgcpjroject]: releasing new version...
✔ hosting[yourgcpjroject]: release complete

✔ Deploy complete!

Project Console:https://console.firebase.google.com/project/yourgcpproject/overview
Hosting URL: https://yourgcpproject.web.app

Hosting URLをクリックすると、publicのフォルダの中がホスティングされているはずです。標準でSSLのセキュアなサイトであるのもありがたいですね。