こんにちは！こー(@910zKoh)です。
今回は私のリアルの知人が記事を寄稿してくれました。普段、私が書く記事よりも数段読みやすいし記述的にもしっかりしていると思います。それではご覧ください。
超初心者向けの説明です。小難しい内容は適当な言葉という名のシュウマイの皮に丸めてコネコネして書きます。
Contents
Firebaseとは何か？
Googleが提供しているサービスの名前です。
超多機能で、データベース機能や認証機能（ログイン機能）、スマホアプリならPUSH通知などの
いろいろなサービスを基本無料で提供してくれます。
データ量が一定量になると有料になります。課金してください。
Hosting機能とは何か？
FirebaseのHostingとは平たく言ってしまうと「無料レンタルサーバー」のことです。
Googleの用意したサーバーにHTMLファイル等をアップロードすると、URLがGoogleから発行されて
Webページを公開することができます。
これも一定量までであれば無料なので、初心者や個人の小さなWebサイトを作る場合には便利だと思います。
独自ドメインも使用できます。
えっFirebaseなのにDatabase機能もAuth機能も使わないのかって？
そういうのは賢い人にお任せします！
どういった手順でWebページ公開までたどり着くのか？
- Firebaseに登録する
- Firebase Hostingサービスを有効にする
- Firebaseのツールをインストールする
- Firebaseの設定を行う
- Webページを作る
- Webページをアップロードする
大まかな流れは以上のとおりです。
１～３はFirebase関連の作業、４～５はHTML関連の作業です。
（１～３はバックエンドの準備、４～５はフロントエンドの準備ってことです）
前提環境
Windows7
Firebaseに登録する
Googleアカウントが必要です。
Firebase Consoleの画面でログインします。
今回用のプロジェクトを作成します。
なお、この プロジェクト名がそのままURLになる のでご注意ください。
新規プロジェクトを作成する。名前をつけるだけ、簡単！
※アナリティクスとの連携は本記事の主題とは関係ないので説明省略します。
Firebase Hostingサービスを有効にする
Firebase Console画面から「Hosting」サービスを有効にします。
表示される画面にこの後のインストール～デプロイまで全て
説明されています。
ひとりでできるもん！な人は画面のとおりに操作しましょう。
ひとりでできないもん！な人は、画面の内容を無視して「次へ」を押しましょう。
次の画面もスキップして、最終的に「デプロイ待ち」画面になればOKです。
この後の記事を引き続き読んでください。
Firebaseのツールをインストールする
事前準備として、先にNode.jsをインストールします。
また、Power Shellも必要です。
Firebase-toolsのインストールですが、コマンドプロンプトからはできません。
ファイルのパスが通りません。素直にPower Shellを使ってください。
（この辺、理屈と原因は未検証です。よくわかってない）
Windows7以降なら標準でインストールされているはずです。
Power Shellを立ち上げて、以下のコマンドを打ち込みます。
npm install -g firebase-tools
このとき、Power Shellの現在フォルダはどこでも良いです。
-gをつけることで「グローバル」領域にインストールするため、現在のフォルダがどこであっても影響は出ません。
Firebaseの設定を行う
今回、作業するためのフォルダを作ります。
場所はどこでも良いですが、日本語や半角スペースなどが入らない、いたって普通の名前がいいんじゃないかと思います。
C:\Project みたいな。
Power Shellで準備したフォルダに移動します。
※PowerShellの詳しい使い方は本記事の主題とズレますので、省略します。
まずはFirebaseにログインします。インターネット環境必要です。
firebase login
を打ち込むと、「Allow Firebase to collect anonymous CLI usage and error reporting information?」と聞かれます。
使用状況の収集を許可しますか？なので、YでもNでもどちらでも良いです。
よくわからん人は、このままEnter押すと自動でデフォルト（Yes）が選択されます。
ブラウザが立ち上がって自動でGoogleアカウントのログイン画面が表示されます。
Firebaseを使いたいGoogleアカウントでログインしてください。
いろいろな機能の連携許可を求められるので、「許可」をクリック。
しばらくするとSuccessfulyの表示がでます。
このページはもう使わないので、閉じても大丈夫です。
これでインストールしたfirebase-toolsとアカウントの連携が終わりました。
同じフォルダで
firebase init
を打ち込みます。
よくわからないかっこよさげなアスキーアートが表示されたら、設定を実施します。
基本的にEnterで次々設定していけばどうにかなります。
デフォルトでも十分に動きます。
（設定内容が気になる人は他の紹介記事でどうぞ）
注意しなければならないのは以下の2点のみです
・Hostingを選択する
・さきほど作ったプロジェクトを選択する
Hostingを選択するには、Hostingのところまでカーソルを移動してスペースキーを打てば、アスタリスクが点灯して選択したことになります。
プロジェクトを選択する画面も同様です。
先ほど、Firebase Consoleで新しく作ったプロジェクトの名前を選択します。
しばらくするとinitが完了します。
Webページを作る
今回の作業用フォルダの中に、publicというフォルダができていると思います。
この中に、Webページを作っていきます。
デフォルトでindex.htmlと404.htmlが入っているはずです。
上書きOKです。
このフォルダの中にあるファイルが全てアップロードされます。
一度アップロードすると、削除に結構手間がかかるので気をつけてください。
Webページをアップロードする
Webページをアップロードします。
アップロードした瞬間に 「世界中に公開される」 ことになります。
まあ、早々簡単に外部から流入があるとは思えませんが、一応注意してください。
なので、ローカルでデバッグしたいという人は
firebase serve
のコマンドをPower Shellに打ち込むと、以下のように内部用のURLが発行されます。
ローカルではなく普通に公開したい！という人は
firebase deploy
でOKです。
アップロードしていろいろ全部処理して、URLを発行してくれます。
ちなみにデフォルトでSSL対応してくれているのでありがたい限りです。
もし、間違ってアップロードしてしまって非公開にしたい！という人は
firebase hosting:disable -y
で非公開にすることができます。
あくまでも非公開どまりで、ファイルの削除ではないことに注意です。
（ファイルの削除はどうやらめんどくさそうな予感……少なくとも、Firebase ConsoleからGUI操作はできないようです。）
ここまでで、簡単にWebサイトを構築できました。
超簡単ですね。これで月のデータ通信量10GBまでは無料なので、驚きです。
実績
こんな感じで簡単に作ってしまったアホなページがこちら（ダイマ）
あむろ★がちゃ
https://amurogatya.firebaseapp.com/
コメント