ファイル置き場・Webページ公開に Firebase Hosting をお試し
Firebase について
Firebase は mBaaS（mobile Backend as a Service）と呼ばれる、モバイルアプリを運用する際などに必要となるサーバサイドの機能を、一括で提供するサービスだそうで、アプリ開発者にとっては、サーバーサイドのユーザ認証などを、自分で開発せずに mBaaS に任せることができる利点があるようです。
Firebase Hosting について
今回は、Firebase の Hosting 機能を使います。HTMLファイルなどもアップロードできるので、静的なホームページを作ることもできそうです。
料金については、クレジットカード登録なしで利用できる無料プラン (Sparkプラン) があります (2019年5月現在)。
- アップロードできるファイルの合計は、1GB まで
- 月当たりのデータ転送量は最大で 10GB まで
に制限されているものの無料で使用することができます (Sparkプランでは 転送量の 10GB を使い切ると 配信が自動で止まるようです)。
Firebase Hosting へファイルをアップロードする手順
まずは、Firebaseにアクセスして、Googleアカウントでログインしましょう。
コンソールに移動すると以下のような画面が出ると思いますので、プロジェクトを追加をクリック。
プロジェクト名とプロジェクトIDを半角英数で設定します。
プロジェクトID は Firebase Hosting ではhttps://プロジェクトID.firebaseapp.comのようなサブドメイン部分になります。
その他、設定をして、プロジェクトを作成をクリック。
まずは Node.js を入手
プロジェクトを作成したら、Firebase のコンソール画面 左横の開発＞Hostingへと移動しましょう。
始めるをクリックすると現れる指示に従って進めていきます。
Firebase コマンドライン ツール をインストールするには、Node.js を先に入手しておく必要があります。
Windows の場合は、Node.js をインストーラによるインストール作業無しで ポータブルにはじめる方法もあります。
個人的には、ポータブルに Node.js を使うのがおすすめです。
Firebase コマンドライン ツール をインストール
Node.js を使う環境が整ったら、Firebase コマンドライン ツール をインストールします。
Windows の場合は コマンドプロンプトや、PowerShell などを開いて以下を入力しEnterで実行します (文頭の > マークは入力する必要はありません)。
> npm install -g firebase-tools
しばらく待っていると、Firebase コマンドライン ツールが自動でインストール (ダウンロード) されるはずです。
Firebase Hosting で使用するフォルダを作成 & 移動
コマンドプロンプトや、PowerShell などのコマンドラインで 現在自分がどこにいるのかを確認しておきましょう。
例えば
C:\Users\hogehoge\Desktop\node-v10.15.3-win-x64 >
のように表示されている場合は、Cドライブのhogehogeという名前のユーザーのデスクトップにあるnode-v10.15.3-win-x64フォルダに現在自分はいます。
ここに Firebase の作業用フォルダを作りたい場合は、
> mkdir firebaseTEST
などと入力しEnterで実行します (firebaseTEST部分はお好きな名前でOK)。
続いて、今作成したfirebaseTESTフォルダに移動します。以下のように入力しEnterです。
> cd firebaseTEST
firebaseTESTフォルダに無事に移動できていれば、以下のように表示されているはずです (黄色文字部分)。
C:\Users\hogehoge\Desktop\node-v10.15.3-win-x64\firebaseTEST>
このfirebaseTESTがカレントディレクトリ (現在自分がいる場所) です。
Firebase のプロジェクトを開始
Firebase 作業用のフォルダ (上の例ではfirebaseTESTフォルダ) に移動した状態で以下を入力しEnterで実行します。
> firebase login
すると以下のような表示が出るかもしれません。
? Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)
Firebase に 匿名使用情報等の送信を許可したくない場合はnと入力しEnterで続行です。
Windows セキュリティの重要な警告 が出た場合はアクセスを許可するを選択します。
追記
Windows セキュリティの重要な警告 のアクセスを許可するを選択しなくても、デプロイできました。
続いて、以下のように表示されると思いますので
Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=～～～
表示されたブラウザの選択画面から もしくは 表示された URL をブラウザに入力して Google のページにアクセスし、許可を選択します。
その後、以下を入力して実行してください。
> firebase init
しばらく待つと以下のように表示されますので、yと入力しEnterで続行します。
You're about to initialize a Firebase project in this directory:
C:\Users\hogehoge\Desktop\node-v10.15.3-win-x64\firebaseTEST
? Are you ready to proceed? (Y/n)
続いて以下のような画面になります。キーボードの矢印キー(上下) を使ってHostingにカーソルを合わせ、スペースキーで選択状態にしてから、Enterで続行します。
次に、先ほどブラウザから作成した プロジェクトにキーボードの矢印キー(上下) を使ってカーソルを合わせEnterで続行します。
その後は以下のように尋ねられます。今回はそのままEnterで続行します。
? What do you want to use as your public directory?(public)
最後に以下のように尋ねられます。single-page app を作る場合はyと入力、静的なホームページやファイルをアップロードするだけの場合はnと入力しEnterで完了です。
? Configure as a single-page app (rewrite all urls to /index.html)?
これでfirebaseTESTなどの作業フォルダに、firebase.jsonやpublicフォルダが生成されたはずです。
public フォルダにファイルを配置してアップロード (デプロイ)
いよいよ、ファイルをアップロードする準備が整いました。
先ほど Firebase の作業フォルダ (firebaseTESTなど) の中に作成されたpublicフォルダにアップロードしたいファイルを配置していきましょう (フォルダを配置してもOKです)。
このpublicフォルダ内のファイルをアップロードするときは、Firebase 作業用のフォルダ (上の例ではfirebaseTESTディレクトリ) にいる状態で以下のコマンドを実行してください。
> firebase deploy
デプロイが完了すると以下のように表示されます。
Hosting URLの欄に表示されているURLにアクセスして、アップロードしたファイルが表示されるか確認してみましょう。
例えばpublicフォルダの中にimgフォルダを作り、そこにaaaa.jpgという画像ファイルを配置していた場合はhttps://プロジェクトID.firebaseapp.com/img/aaaa.jpgにアクセスすることで画像が表示されるはずです。
Firebase Hosting のデプロイの仕様
publicフォルダの中身を総入れ替えして新しくデプロイを行うと、以前あったファイルにはアクセスできなくなります。つまり、あくまでもデプロイ時にpublicフォルダにあったファイルのみが表示されます。
一方で、Firebase Hosting では、以前デプロイされた内容をまるごと保存する設定となっています。
Firebase のコンソール画面 左横の開発＞Hostingへと移動して確認できます。
以下のように、デプロイした時間ごとに履歴が表示され、以前デプロイしたものにマウスオーバーすると表示されるメニューから、以前の状態に戻すことのできるロールバックや、以前デプロイした内容の削除を選択できます。
しかし、現時点では以前デプロイした内容をファイル一覧として確認したり、ダウンロードしたりすることはできないようなので、ロールバックを行うよりは、ローカルにあるpublicフォルダの中身を修正して新規にデプロイする方が確実なのではないかと思います。ロールバックを使わない場合は、過去にデプロイした内容を Firebase 上に保存しておく必要は特にないので、容量圧迫を避けるため削除していくことをおすすめします。
# 概要 待望？の旧バージョンの自動削除機能がリリースされた模様。 それまでリリースしたら、もうロールバックしないだろうバージョンは手動でポチポチ削除していました:weary: これを設定すればもう旧バージョンの管理は基本的に不要に...
現在デプロイしているファイルやWebページをすべて削除したくなった場合は...
以下のように入力すればOKでした (プロジェクトID部分は読み替えてください)。
> firebase hosting:disable --project プロジェクトID
もしくは、Firebase 作業用のフォルダ (上の例ではfirebaseTESTディレクトリ) がカレントディレクトリとなっている状態で以下のコマンドを実行してください。
> firebase hosting:disable
すると以下のように尋ねられるので、削除する場合はyを入力しEnterです。
? Are you sure you want to disable Firebase Hosting?
This will immediately make your site inaccessible! (Y/n)
public フォルダを 公開する前に ローカルで開発・チェック
> firebase serve
と入力して実行後、http://localhost:5000 にアクセスすることで、publicフォルダの中にあるファイル や HTML など をローカルで確認できます。
チェックを終了する場合は、コマンドプロンプトなどのコマンドラインでCtrlとcキーを同時押しすると、ジョブを終了しますかという選択肢がでるはずです。
