【ドメイン・サーバ費不要】Firebaseを使って無料でWEBサイトを公開する方法

HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

HTML,CSSなどでポートフォリオサイトや、自分の実績を公開する簡単なサイトを作ったが、公開するのにドメイン、サーバー費用がかからない方法はあるのでしょうか？

今回はプログラミング初心者の方向けに、サーバー、ドメイン費用不要、つまり無料で作成したページを無料で全世界に公開する方法をご紹介します！

自分の実績作りにオリジナルサイトをいくつか作っている方も多いかと思いますが、公開する度にドメインを取得しお金をかけるのは勿体無いと思われている方もいる事でしょう。

ユーザー向けのサイト：独自ドメイン取得して公開
自分の実績やポートフォリオ：独自ドメイン取得せずに公開

ではどの様にして無料でサイトを公開するかと言うと、タイトルにもある通り天下のGoogleが提供しているFirebaseと言うサービスを使ってサイトを公開します。

ほんとGoogleさまさまですね。。。

✔︎こんな方にオススメ

お金をかけずにサイトを公開したい方
ポートフォリオサイトや、成果物をサクッと公開したい方
firebaseについて知りたい方

本記事では、firebaseとは何かメリット、デメリット、サイトの公開方法まで解説していきます！

Firebaseとは

Firebaseとはモバイルアプリケーションを開発するためのバックエンドサービスで、アプリケーションを素早く開発するための様々な機能が利用できます。

アプリを開発する際には、データベースサーバーの構築やAPIの構築など、とても手間のかかる作業が必要になりますが、Firebaseをしようすると面倒な作業を省き、エンジニアはアプリ開発に専念できると言う事です。

✔︎Firebaseの３つの大きなサービス

より優れたアプリを作成：主にファイルの保存や同期（開発がより快適に）
アプリの品質を改善する：アプリにバグが発生してないかテストする
ビジネスの成長を測る：アプリの統計情報やユーザーの動向などを調べる

これだけの沢山の機能がありますが、この記事の目的である「サイトを無料で公開する」事はできるの？と思われるでしょう。

Firebaseは主にアプリ開発のサービスですが、その中にあるHosting （ウェブアプリ資産をすばやく安全に配信）と言うサービスを利用する事で、アプリの公開だけでなく静的なサイトもサクッと公開できます。

サイトを無料で公開するにはfirebaseのサービスの一つであるHostingと言うサービスを利用します。

Firebaseでサイトを公開するメリット

サイトを無料で公開する方法はherokuやgithubなど他にもありますが、firebaseでサイトを公開するメリットは以下の8つです。

✔︎メリット

無料でサイトを公開できる
SSL認証が組み込まれセキュリティー面で安全
CSS,HTMLファイルだけでなく、Express.js マイクロサービスや API も公開可能
コンテンツを高速で配信できる
簡単に新しいバージョン（リニューアル）にできる
失敗しても簡単にロールバック（元に戻せる）
Googleの安心感
後から独自ドメインに切り替え可能

沢山ありますが、簡単にまとめると「安全で高速で簡単に失敗も恐れずサイトを世界に公開することができるサービス」になります。

firebase最強のサービスですね。。。

firebaseの料金プラン

冒頭では無料で使用できるとご紹介しましたが、firebaseには3つの料金プランがあります。

Spark プラン（無料）：趣味に熱中する人のための寛大な制限
Flameプラン（$25/月）：アプリの拡大で予測可能な料金
Blazeプラン（従量制）：無制限の容量でどんなアプリにも対応可能

個人的にはHTML,CSSで作られた、サイトでそれほどページ数が多くなければSparkプランで十分かと思います。

容量を越えるとエラーが出て公開されなくなるので、そうなればFlameプランに切り替えればいいかと思います。

Firebaseを使って無料でサイトを公開する方法

1.Hostingにログインしてプロジェクトを作成

まず始めに https://firebase.google.com/products/hosting/?hl=ja にアクセスして新しくプロジェクトを追加します。

※Googleアカウントを持っていないと利用できません。

ログインすると、このような画面に切り替わるので「プロジェクトを追加」をクリックします。

すると、プロジェクト名を入力する画面に移動するので自分の好きな名前にして作成します。

プロジェクトの管理画面に移動して、なんか沢山項目がありますが、今回しようするのは「Hosting」です。

Hostginをクリックして、「始める」をクリックしましょう。

するとホスティング（サイト公開）をする流れが書かれているので、その通りにすればOKですが、、、

Node.jsってどうやってインストールする？
Firebaseツールのインストール？？
コマンドツールってどうやって使うの？

このように疑問点が多くあると思いますので一つずつ解説していきます。

※基本的にはmac環境での解説となります。

2.Node.jsをインストール

✔︎Node.jsとは

Node.jsはJavaScriptの環境の一つであり、JavaScriptはブラウザ上で動く為の言語ですが、Node.jsを使うとPHPと同じようにサーバーサイドでも動くことができます。

簡単に言うと、サーバーサイド側JavaScriptです。

なぜ必要かと言うと、このNode.jsを使用しないとfirebaseのコマンドが機能しないので、まず始めにインストールします。

✔︎Node.jsのインストール方法参考記事

 $ node -v
v11.14.0

ターミナルに「$ node -v」と入力し、バージョンが表示されればOKです。

2.Firebaseツールをインストール

次にFirebaseツールをインストールします。

npm install -g firebase-tools

ターミナルにこれをコピペしてEnter。するとインストールが始まります。

インストールエラーの場合

インストールするとこのようにエラーが出てきた場合は、「nmpのアクセス権の変更」が必要となります。

export PATH=$PATH:`npm bin -g`

その際はインストールする前にこのコマンドを入力します。

それで解決できない場合は、npm のアクセス権の変更 ←このページのコマンドを試してみてください。

3.firebaseにログイン

firebaseツールのインストールが完了したら、ターミナルを使ってfirebaseにログインします。

firebase login

上記をターミナルに入力し
PCのパスワードを入力
firebaseのサイトに移動しログインボタンをクリック

このように「Already logged in 」と表示されればOKです。

4.プロジェクトを開始

firebase init

上記のコマンドをターミナルに入力すると、、、

このように大きくFIREBASEと表示されます。

◯ 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

次にこの5つのどれを実行するか聞かれるので、4つめの「Hosting」を選択します。

上下の選択移動は矢印キーを使用

選択はspaceキーで選択できます。

? What do you want to use as your public directory? (public)

次に「どのディレクトリをfirebaseにデプロイ（公開）しますか？」と聞かれるので、ディレクトリの場所を指定するか、publicのままの場合はそのままEnterを押します。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

次に「全てのurlをindex.htmlに書き換えますか？」と聞かれるので「N」と入力してEnter。

すると、このようにpublic フォルダに「index.html」と「404.html」が作成されます。

5.publicフォルダに作成したフォルダを置く

今、publicフォルダに「index.html」と「404.html」があると思いますが、

publicフォルダ内にimageファイルやCSSファイルを追加したり、index.htmlの中身を作ったhtmlに変えていきます。

6.firebaseにデプロイする

ファイルの書き換えが終わったら、、、

firebase deploy

をターミナルに入力します。

このように表示されればデプロイ（公開）が成功です！！！

7.公開されたサイトをみる

ターミナルに記載されている、

Hosting URL: https://test-84eaf.firebaseapp.com

このURLにアクセスするか、firebaseのプロジェクト管理画面に移動すると、ドメインが表示されていると思うので、クリックするとサイトを見ることができます。

Firebaseを使ってWEBサイトを公開する方法まとめ

ネコ君

firebaseで公開するのとっても簡単だね！

いかがでしたでしょうか！！

firebaseを活用すると、サイトを無料で公開できるだけでなく、自動的にSSL認証もしてくれるので、とってもオススメです！

サイトを新しくする際には、ファイルを編集して、同じように「firebase deploy」をするだけでサイトを更新することも可能です！

ぜひこの記事を参考に簡単なHTML、CSSでできたサイトを無料公開してみてください！

最後までご覧いただきありがとうございました！

IT・テクノロジーで生活と仕事をもっと豊かに