【最新版】Firebaseを使って無料でセキュアなサイトを5分で公開する方法

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

フリーランスや転職活動の際に必要になるポートフォリオサイト。どのようにして公開しますか?

レンタルサーバーを借りてサイトを公開したり、近年はポートフォリオサービスを使って無料で自分の作品を公開することも可能になりました。

しかし、こういったデメリットもあります。

「レンタルサーバーを借りるとお金がかかる」「ポートフォリオサービスは作品を上げるものが多くてオリジナリティがない」

無料で使えるのが正しいとは思いませんが出来る限りコストは抑えたいのが本音です。

今回はこういった悩みを少しでも解決できるFirebaseを使ったサイトの公開方法を紹介します。

Firebaseとは?

FirebaseはGoogleが提供するWeb、モバイルアプリ向けのプラットフォームです。今回紹介するのはHostingの機能のみですがBaas(Backend as as Service)なのでバックエンドが苦手な方でもフロントエンドや開発に専念できるのも魅力の一つです。

機能一覧
  1. Firebase Realtime Database
  2. Firebase Analytics(アプリの解析)
  3. Firebase Cloud Messaging(FCM)
  4. Firebase Crashlytics
  5. Firebase Cloud Firestore
  6. Firebase Hosting(記事で紹介する機能)
  7. Firebase Authentication

Google認証のため、Googleのアカウントがあれば誰でもすぐに始めれます。

「~firebaseapp.com」のドメインと月10GBの通信を超えなければ基本無料で使うことができます。

以下1つでも当てはまる方にオススメです。

こんな方にオススメ!
  • 既存のコードを本番環境で試してみたい
  • これから小規模のサイトを作る予定
  • Node.jsを使ってみたい

https://firebase.google.com/

Firebaseを使ったサイト

先日Firebaseを使ったWebサイトを公開しました。

https://shun-web.design/

こちらのサイトについて更に詳しい紹介記事はこちら。

Adobe AnimateをCanvasに変換する方法 ヌルヌル動く!Adobe AnimateCCを使ってアニメーションをHTML5 Canvasに変換する

料金形態

出典:https://firebase.google.com/pricing/

sparkプランならストレージ10GB、データ転送月10GBまで無料で公開できます。

今回はsparkプランの使い方を説明します。

※2021年9月現在。

料金リンク
https://firebase.google.com/pricing/

Firebaseの設定手順

Node.jsのインストール

Firebaseはnpmを使用するので事前にNode.jsとnpmをインストールする必要があります。

下記を入力してNodeが入っているか確認しましょう。入っていればバージョンが表示されます。

ターミナル
$ node -v
Node.jsをインストールしてないときは

コマンドを入力して見つからない旨が表示された場合は、Node.js公式サイトからダウンロードしてインストールをお願いします。

https://nodejs.org/ja/

参考 Node.js入門とほほのWW入門

Googleアカウントの準備

Firebaseを使用する際にGoogleアカウントが必要になるので事前に登録を済ませておきましょう。

Firebaseのサイトへ移動

プロジェクトを作成するためFirebaseのサイトへ移動してください。
「使ってみる」→「Googleログイン」→「プロジェクトを追加」の順にクリックしてプロジェクト作成画面に移動します。

https://firebase.google.com/

 

プロジェクトの作成

プロジェクトの作成画面に移ります。

プロジェクト名の入力

表示される指示に従ってプロジェクト名を入力します。

プロジェクト名は管理画面上の名称で、入力欄下のプロジェクトIDが固有IDになります。

出典:https://console.firebase.google.com/

Googleアナリティクスの有効

作成するプロジェクトにGoogleアナリティクスを有効にできます。公開したプロジェクトのアクセス解析が可能になるので有効のまま「続行」をクリック。

Googleアナリティクスの構成

Googleアナリティクスのアカウントを作成するのでプルダウンから「Default Account for Firebase」を選択してください。

「プロジェクトの作成」をクリックして完了するまで少し待ちます。

出典:https://console.firebase.google.com/

プロジェクト作成完了

この画面が表示されたらプロジェクトの作成が完了です。「続行」をクリック。

ホスティングの設定

プロジェクトをネット上で閲覧、確認できるようにホスティングの設定を行います。

プロジェクトの作成後に管理画面に移動するので「プロジェクトの概要」から下記画像のボタン(ウェブ)をクリック。

ウェブアプリへのFirebaseの追加

アプリのニックネームを記入し、「このアプリのFirebase Hostingも設定します。」にチェック。
「アプリを登録」をクリックしてください。

Firebase SDK の追加

「npmを使用する」にチェックしFirebaseをインストールします。表示されたプロダクトのSDKコードはコピーのボタンを押して控えておくようにしてください。

お手持ちのパソコンからコマンド画面に入力します。
※「$」は入力の必要はありません。

完了したら「次へ」

ターミナル
$ npm install firebase

Firebase CLI のインストール

サイトをホストするには、Firebase CLI(コマンドラインツール)が必要です。
下記コマンドを入力してインストールしてください。

$ npm install -g firebase-tools

Firebaseにログイン

Firebaseにログインします。

ターミナル
$ firebase login

プロジェクトの開始

Firebase Hotingの初期設定を行います。下記コードを入力してください。

※簡潔に設定をするために下記画像のコマンドを変えています。

ターミナル
$ firebase init hosting

 

どのプロジェクトをホスティングするのか聞かれるので 「Use an existing project(既存プロジェクトの使用する )」を選んでください。

ターミナル
Please select an option:
❯ Use an existing project #既存のプロジェクトを使用するのでこちらを選択
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project

使用するプロジェクトを選択すると公開フォルダーの設定について表示されます。

SPAやGitHubを使用しない場合は「Enter」を押して進んでください。

ターミナル
? What do you want to use as your public directory? public #公開するフォルダー
? Configure as a single-page app (rewrite all urls to /index.html)? No #シングルページアプリとして構成
? Set up automatic builds and deploys with GitHub? No #GitHubによる自動ビルドとデプロイを設定するか?

デプロイ

下記のコードをコマンド入力していきます。

ターミナル
$ firebase deploy

サイト公開確認

管理画面に戻り、サイドメニュー「Hosting」を選択。URLが表示されるのでクリックして確認してみましょう。

公開するまでの手順を紹介しましたが、これからサイトを作ってデプロイしていく人は再デプロイのコマンドを入力してください。

以下コマンドを入力するとデプロイと同時にサイトが表示されます。

ターミナル
$ firebase deploy && firebase open hosting:site

Hostingの使用状況

Hostingの画面をスクロールしていくとプロジェクトのデプロイ履歴を確認できます。
デプロイした時刻、ログインしたアドレス、ファイル数がわかります。

 

「使用状況」のタブから現在までのストレージとダウンロードの状況がグラフ表示され確認できます。

「プロジェクトの概要」からもホスティングの状況を確認することが可能です。

 

まとめ

最後にFirebaseの公開手順をおさらいします。

  1. Node.jsのインストール
  2. Googleアカウントの準備
  3. Firebase上でプロジェクトの作成
  4. Firebase Hostingを設定
  5. 完了

バックエンドが苦手な方でも手軽に使うことができます。Webデザイナー、Webエンジニアの方、これからポートフォリオや小規模のサイトを作成する予定の方は試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA