今すぐ始めるFirebase Hostingチュートリアル - Windows編

6101 ワード
Windows FirebaseHosting チュートリアル Firebase 初心者 Windows テキストリンク

はじめに

この記事では、最近よく利用されているFirebase Hostingを使ってサイトをホスティングする方法について解説していきます。今回題材にするのは、データベースとの連携を含んでいないものですが、Firebase Realtime DatabaseなどFirebaseから提供されているものを利用すれば、非常に簡単にデータベースを使ったWebアプリを作成することができます。また、今回はあくまでもホスティングについてのお話ですので、HTML、CSS、JSなどの解説は行いませんので、あらかじめご了承ください。

Firebaseプロジェクトの作成

Step.1 Firebaseにログインする

Firebase: https://console.firebase.google.com
まず、上記のサイトにアクセスしGoogleのアカウントでログインする。

Step.2 新しいプロジェクトを作成する


ログインが終わったら「プロジェクトの作成」よりプロジェクトの作成画面に移動し、適当なプロジェクト名を付けて「Firebaseの規約に同意します」にチェックを入れたら「続行」をクリックする。

次に遷移した画面では、Google アナリティクスを利用するかどうか問われるので、今回は利用しないので無効にしておく。無効にすると「プロジェクトを作成」というボタンが出てくるのでクリックする。

※Google アナリティクスを有効にした場合には、この後にGoogle アナリティクスの設定があります。
少し待って表示される「続行」のボタンをクリックすると、Firebaseの管理画面に遷移する。これでFirebaseプロジェクトの作成は完了した。

Firebase Hostingにホスティングする

Step.1 Firebase CLIをダウンロードする

Firebase CLI リファレンス: https://firebase.google.com/docs/cli?hl=ja#install-cli-windows
上記のページのWindowsの「スタンドアロン バイナリ」のタブから「Windows 用の Firebase CLI バイナリ」をダウンロードしてください。

Step.2 Firebase CLIでログインする

ダウンロードしたexeファイルを実行すると、専用のターミナルが起動し、データの収集を許可する旨の質問がされるので、どちらかを選んで答える。
※yと入力してEnterを押すとYes、nと入力してEnterを押すとNoが選ばれる。

ブラウザが立ち上がりGoogleのログインページに遷移するので、自分のGoogleアカウントでログインする。下記のような画面に遷移すれば成功。

Step.3 ホスティングするサイトのソースを準備する

今回はCドライブの直下にQiita-test-projectという名前のディレクトリを作成した。
※ディレクトリ名は任意。Firebaseのプロジェクト名と合わせる必要もない
その中にpublicというディレクトリを作成し、その中にソースを置く。ホスティングするもののディレクトリ構造の一例を下に示しておく。

Qiita-test-project
└public
   ├index.html
   ├404.html
   ├scripts
   │  └script.js
   └styles
      ├index.css
      └404.css

Step.4 Firebase CLIでホスティングの設定をする

ソースの配置が終わったら、Firebase CLIのターミナルに戻り、cdコマンドで先程ソースを配置したディレクトリへ移動する。ただし、移動するのはpublicではなく、その1階層上のQiita-test-projectまで。
それが終わったらfirebase initコマンドを実行、下記のような画面が表示されるので、ディレクトリが正しいものかを確認し、正しければYesを選択する。

次に利用するFirebaseの機能を聞かれるので、Hostingを選択する。方向キーでカーソルを移動し、Spaceで選択する。
※取り敢えず全部選択とかやると、めんどくさいことになるので注意

選択が完了するとプロジェクトの選択画面が出るので、Use an existing projectから先程作成したFirebaseのプロジェクトを選択する。

プロジェクトを選択するとどのディレクトリをデプロイするか聞かれるので、そのままで続ける。

次にシングルページアプリケーションとして設定するかを聞かれるので、今回はNoを選択する。

次はGitHubと連携するかを聞かれるので、Noを選択する。

それから404.htmlとindex.htmlを上書きするか聞かれるので、Noを選択、ここでYesを選択すると問答無用で上書きされてしまうので慎重に。

設定が完了すると、ホスティングに必要なファイルが自動で生成される。

Step.5 Firebaseへデプロイする

それが終わったらfirebase deployコマンドを実行。少し待ってDeploy complete!と表示されればデプロイが完了している。
Hosting URLからホスティングされたページを確認できるので、正しくホスティングされているか確認しよう。

参考記事

Firebase Hostingに静的サイトをデプロイする手順のメモ
https://qiita.com/rubytomato@github/items/b83caa01fc9c4993f526