Firebase を使ってサイトを無料で公開してみる | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

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

今回は、Google のホスティングサービス Firebase を使って静的なサイトを公開する方法をお伝えします。
サクッとウェブサイトを公開したいけど、Google サイトのようにテンプレートからではなく、自分で書いた HTML・CSS を使いたい、という方に特にお薦めです。

Firebase とは?

Firebase は Google が提供する mBaas サービスです。
モバイルアプリを作る際にバックエンドで必要になる機能をまとめて提供してくれます。

静的ウェブサイトのホスティングも可能で、HTTPS 対応のウェブサイトが無料から公開できるのが嬉しいところです。

最近、Cloud Functions にも対応し、できることの幅がまた広がりました。

主な機能

・リアルタイムデータベース
・ユーザー認証
・クラウドストレージ
・ホスティング
・Cloud Functions

など、開発系の主要な機能だけピックアップしても色々と揃っています。
今回はその中の一つであるホスティング機能を使って、サイトを公開する手順を説明します。

料金

本題に入る前に、気になる料金を確認しておきましょう。
無料でホスティングできる条件は、容量が 1GB までで、月間の転送量は 10GB までとなっています。
また、独自ドメインや SSL の利用も無料でできます。

ちなみに、容量が超えた場合の料金はこちらからご覧ください。

転送量などの利用状況は、Firebase の管理画面からいつでも確認できます。

事前準備

Firebase は Google アカウントさえあれば、すぐに利用できます。
アカウントを取得してログインしておきましょう。

また、Firebase でホスティングするには、Firebase CLI(コマンドライン インターフェース)を使用する必要があります。
npm からインストールするので、もしまだの場合は Node.js と npm をインストールしておいてください。

Node.js

プロジェクトの作成

まずは、Firebase コンソールにアクセスして、プロジェクトを作成します。
「プロジェクトを追加」ボタンを押すと、作成ポップアップが出てきます。

プロジェクト名と国を設定して作成ボタンを押せば、プロジェクトが新しく追加されます。

Firebase CLI のインストール

$ npm install -g firebase-tools

上記を実行して、Firebase ツールをインストールします。

インストールが完了したら、

$ firebase login

を実行します。

これを行うことで Firebase アカウントと接続され、先ほどブラウザ上で作成したプロジェクトにアクセスすることができるようになります。

$ firebase list 

を実行すれば、作成したプロジェクトがリストに表示されるはずです。

プロジェクトの設定

プロジェクトを作成したいディレクトリに、移動して下記のコマンドを実行します。

$ firebase init

すると、上記のような熱い表示とともにプロジェクトの設定ステップへと進みます。

まず、このプロジェクトで使用する Firebase の機能を聞かれるので、今回は「Hosting」にチェックを入れてください。
他の機能はチェックしてもしなくても構いません。

次に、どのプロジェクトを紐付けるかを聞かれますので、先ほど作成したプロジェクトを選択してください。

後は、公開ファイルを置くディレクトリや、シングルページアプリケーションとして動作させるかなどを聞かれますが、そのままエンターキーを押していけばOKです。

デプロイ(公開)してみる

これで、プロジェクトのディレクトリ直下に
・firebase.json
・/public/
が生成されたかと思います。

public の中には index.html が含まれていますので、これを編集すれば準備は完了です。

$ firebase deploy

を実行して、サイトを公開しましょう!

「Hosting URL: https://~」というように表示されているのがサイトの URL になります。
ブラウザに打ち込めば、実際に公開されているページが確認できるはずです。

まとめ

Firebase を使うと、お手軽に静的サイトのホスティングが可能です。
コマンドラインを少し使う必要はありますが、FTP ソフトが要らないので更新も簡単ですね。
よかったら一度お試しください!

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
プロモーション事業部、プロダクト開発、メディア事業部
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

SiTest の革新的な機能を、
1か月間無料でお試しいただけます。
利用規約

お名前【必須】
メールアドレス【必須】
電話番号【必須】