簡単にWEBページを無料公開する方法｜Firebase ホスティング

皆さんこんにちは！小規模事業者の皆さんのデジタル化をサポートする中で、「自社のWebページを手軽に公開したい」というご要望をよく耳にします。実は、専門的な知識がなくても、コストをかけずにWebサイトを公開する方法があるんです。

Webサイトを公開するには、通常、サーバー契約やドメイン取得など複雑な手続きが必要です。これらの設定は難しく、コストもかかります。さらに、SSL証明書の設定やセキュリティ対策も気になりますよね。Googleが提供する「Firebase ホスティング」を使えば、これらの悩みを一気に解決できます。Firebase ホスティングは、無料で使える高速なホスティングサービスで、SSLやCDNも自動設定されます本記事では、初心者でも迷わずFirebase ホスティングを使いこなせる方法を解説します。

Firebase ホスティングの利点と注意点
Firebase ホスティングでWEBページを公開する手順
Webサイト公開後の管理と活用法
まとめ

Firebase ホスティングの利点と注意点

Firebase ホスティングとは？

Firebase ホスティングは、Googleが提供する静的Webサイト向けのホスティングサービスです。HTML、CSS、JavaScriptで作成したWebページを、高速かつ安全に世界中に配信できます。Googleのインフラを利用しているため、信頼性が高く、大企業から個人開発者まで幅広く利用されています。

特筆すべきは、その使いやすさです。従来のレンタルサーバーでは、FTPでファイルをアップロードしたり、サーバー設定を手動で行ったりする必要がありましたが、Firebase ホスティングではコマンドラインで数回操作するだけでサイトが公開できます。

また、Firebase自体は様々な機能を持つプラットフォームで、ホスティング以外にも認証やデータベースなど多くのサービスを提供しています。将来的にサイトを拡張したい場合にも対応できるのが強みです。

無料枠の魅力

Firebase ホスティングの最大の魅力は、小規模サイトなら完全無料で利用できる点です。具体的には以下のような無料枠が用意されています：

ストレージ容量：1GB（HTML/CSS/JS/画像ファイルの合計）
データ転送量：月10GB（訪問者がサイトを閲覧する際のデータ量）
デプロイ回数：1日あたり最大20回（サイト更新回数）

これは、会社紹介ページやランディングページ、個人ポートフォリオなどの小〜中規模サイトであれば十分な容量です。

また、独自ドメインが不要であれば、Firebaseが提供するサブドメイン（例：https://your-project-name.web.app/）を使って即座に公開できます。独自ドメインを持っている場合も、簡単に連携できる機能が用意されています。

初心者にやさしい仕組み

Firebase ホスティングが初心者に特におすすめな理由は、複雑な設定が不要な点です。従来のホスティングでは面倒だった以下の作業が自動化されています：

SSLの自動設定: HTTPSによる暗号化通信が標準で有効になっています
CDN配信: グローバルCDN（Content Delivery Network）により、世界中どこからアクセスしても高速表示
バージョン管理: デプロイごとに過去バージョンが保存され、問題があれば即座にロールバック可能

特に重要なのは、Googleが提供するCDNによる高速化です。訪問者の地理的位置に最も近いサーバーからコンテンツが配信されるため、表示速度が向上します。これはSEO（検索エンジン最適化）にもプラスに働くポイントです。

注意点：制限と適さないケース

もちろん、Firebase ホスティングにも制限があります。以下のようなケースでは別のサービスを検討した方が良いでしょう：

サーバーサイド処理が必要: PHPやRubyなどのサーバーサイド言語を使用するWebアプリケーションには適していません。サーバサイド処理は、Firebaseの他の機能と組み合わせるか、別のサービスを検討する必要があります
大規模なデータ処理: データベースとの連携が複雑な場合は、こちらもFirebaseの他の機能と組み合わせるか、別のサービスを検討する必要があります
アクセス数が非常に多い: 無料枠の月間転送量10GBを超えると有料プランへの移行が必要です
頻繁な更新: 1日20回以上のデプロイが必要な場合は制限に注意が必要です

私たちの経験では、典型的な会社紹介サイトやブログサイトであれば、これらの制限に悩まされることはほとんどありません。しかし、ECサイトや会員制サイトなど機能が複雑なものには、別の選択肢も検討すべきでしょう。

Firebase ホスティングでWEBページを公開する手順

それでは、実際にFirebase ホスティングを使ってWebページを公開する方法を紹介します。

手順1：Firebaseプロジェクトを作成

まずはFirebaseのプロジェクトを作成します。このプロジェクトが、あなたのWebサイトの基盤となります。

Firebase Consoleにアクセスします（Googleアカウントでのログインが必要です）
「プロジェクトを追加」をクリックします
プロジェクト名を入力します（例：「my-company-website」）
- このプロジェクト名がURLの一部になるので、覚えやすいものがおすすめです
- 半角英数字とハイフンのみ使用可能です
Google アナリティクスの設定を選択します（必要に応じて有効化）
「プロジェクトを作成」をクリックします

プロジェクトの作成には数分かかることがあります。完了したら、プロジェクトのダッシュボードが表示されます。ここからさまざまなFirebaseのサービスにアクセスできますが、今回は「Hosting」を使用します。

手順2：Firebase CLIのインストール

次に、Firebase Command Line Interface（CLI）をインストールします。これは、ローカルで開発したWebサイトをFirebaseにアップロードするために使用するツールです。

まずNode.jsがインストールされていることを確認します
- Node.jsがインストールされていない場合は、Node.js公式サイトからダウンロードしてインストールしてください
- インストール済みかどうかは、コマンドプロンプト（Windows）またはターミナル（Mac）で node -v を実行して確認できます
Node.jsがインストールできたら、コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行してFirebase CLIをインストールします：

npm install -g firebase-tools

インストールが完了したら、バージョンを確認

firebase --version

バージョン番号が表示されれば、正常にインストールされています。

このステップでつまずくことがよくありますが、大抵はNode.jsのインストールが正しく行われていないか、環境変数のパスが正しく設定されていないことが原因です。もしエラーが出る場合は、Node.jsの再インストールを試してみてください。

手順3：プロジェクトの初期化

Firebase CLIをインストールしたら、次はプロジェクトを初期化します。これにより、ローカルのWebサイトファイルとFirebaseプロジェクトが関連付けられます。※プロジェクトのルートディレクトリで実行します。

まず、Googleアカウントで認証を行います：

firebase login

ブラウザが開くので、Firebaseプロジェクトを作成したのと同じGoogleアカウントでログインしてください。

Webサイトのファイルが保存されているフォルダに移動します：

cd path/to/your/website

まだWebサイトのファイルがない場合は、新しいフォルダを作成してそこに移動しましょう。

Firebase Hostingの初期化を行います：

firebase init hosting

いくつかの質問に答える必要があります：
- 「既存のプロジェクトを使用しますか？」→「Yes」を選択し、先ほど作成したプロジェクトを選びます
- 「公開ディレクトリはどれですか？」→通常は「public」と入力（既存サイトの場合は、HTMLファイルがあるディレクトリを指定）
- 「シングルページアプリケーションとして設定しますか？」→通常のWebサイトなら「No」
- 「GitHub Actions によるデプロイを設定しますか？」→通常は「No」
初期化が完了すると、以下のファイルが作成されます：
- .firebaserc: プロジェクトの設定
- firebase.json: ホスティングの設定
- public/index.html: サンプルのHTMLファイル（既存のファイルがある場合は上書きされません）

この「public」フォルダ（または指定したディレクトリ）に、Webサイトのファイル（HTML、CSS、JavaScript、画像など）を配置します。既にファイルがある場合は、そのまま使用できます。

手順4：WEBページをデプロイ

いよいよ最後のステップ、Webサイトをインターネット上に公開します。

デプロイの前に、正しいファイルが「public」フォルダ（または指定したディレクトリ）にあることを確認してください。
- 少なくとも index.html ファイルは必要です
- CSSファイルやJavaScriptファイルも必要に応じて配置します
以下のコマンドを実行してデプロイします：

firebase deploy

デプロイが成功すると、以下のような出力が表示されます：

=== Deploying to 'your-project-name'...

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

✔  Deploy complete!

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