未来電子テクノロジーでインターンをしている田島一毅です。プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

プログラミング初心者の方で、

「自分で作ったページを全世界に公開したいなあ」

と考えている方は多いでしょう。

自分もそんなうちの一人でした。
どうしても自分の作ったページを公開したかった僕は、ググって、失敗してもがきながら、なんとかFirebaseというサービスで自分のプロダクトを公開しました。

そこで今回は、Firebaseでサイトを公開する方法を、初心者目線で解説します。

Firebaseとは？

プログラミング初心者の方には、
「FIrebaseってそもそも何ぞや」
という方が多いと思うので、Firebaseとは何か簡単に説明しますね。

Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスで、いろいろなことができるめちゃくちゃすごいサービスです。
今回の場合だったら、サイトの公開が、Firebaseの「ホスティング」というサービスを利用することでできてしまうのです！！

実際にどうやって公開するの？

FirebaseはGoogleのサービスですから、まずはGoogleのアカウントを作成する必要があります。

FirebaseにGoogleアカウントでログインしたら、Firebaseのサイトページにある「コンソールへ移動」をクリックします。

すると、「新しいプロジェクト」という表示が見えると思うので、そこをクリックしてプロジェクトを作成します。

プロジェクト名は、公開するサイトの内容に合ったものであればなんでもいいと思います。
(ちなみに僕は、ポートフォリオサイトを公開する際、profire-tajimaという名前を付けました。)

ローカルのデスクトップにFirebaseで作成したプロジェクトと同じ名前のディレクトリを作成し、作成したディレクトリの下に公開したいサイトのディレクトリの名前を、「public」に変更して入れます。

node.jsとnpmをインストールします。
下記サイトからインストールしてください。

なんだかよくわからないけど、とりあえずインストールしました(-_-;)

ここまで来たら、次はFirebaseのセットアップをしていきます。
Macならターミナル、WindowsならWindows Powershellなどのターミナル画面で、まずは、

npm install -g firebase-tools

と入力してFirebaseをインストールします。

その後、cd(change directory)して、ローカルのプロジェクトのディレクトリに入ります。
ローカルのプロジェクトのディレクトリに入れたら、

$ firebase init

と入力して、Firebaseプロジェクトを初期化します。

この時、いくつか質問されるので、まずはHostingを選択、その後の質問はEnterキーを押して、どのプロジェクトを使うか聞かれたら、使うディレクトリを指定しましょう。

使うディレクトリの指定ができたら、次は、サイトにデプロイします。

$ firebase deploy

と入力して実行すると、サイトが公開され、そのサイトのURLが表示されるので、そのURLで検索をしたら、自分のサイトが公開されているはずです。

その際、「Firebase Hosting Setup Complete」と表示され、自分のサイトが公開されない方が多いとは、思いますが、少し時間が経てばすぐにサイトが公開されるので、安心してください。

これで、サイトの公開は完了です！！

内容の更新や削除については、また今後に載せようかと思っているので、楽しみにしていてください！