Firebaseのホスティングのプロジェクト／アプリ開発やサイト作成を立ち上げる 結城永人 - 2018年8月21日 (火) GoogleのWebサービスの一つ、Firebaseを使うとアプリ開発やサイト作成をプロジェクトとして立ち上げてコンテンツを配信できる。 料金は無料のSparkプランで1GBの容量が得られる。他にも機能が幾つもあって例えばデータベースやストレージたと1GBや5GBずつ得られるようになっている（無料で開始）。ホスティング以外に機能を追加して使うならば一つのアカウントで実際に提供されるサーバー容量はもっと大きい。 転送量も機能毎に制限されていてホスティングでは10GBだけれどもアクセスが増えれば有料版へ移行してサーバー容量も含めて許容範囲を広げられる。定額制のFlameプランと従量制のBlazeプランに分かれていてアプリやサイトの稼働状況に合わせて選べる仕組みだ。 今まではアプリ開発とサイト作成はおよそ別々だったけれども一つに明らかに統合したのがFirebaseで、とても面白いWebサービスだと知って好きなGoogleに又新しく衝撃を受けてしまったと感じている。 目次Firebaseでプロジェクトを立ち上げる流れコンソールにプロジェクトを追加するデフォルトの設定にする場合オプションの設定にする場合Firebase CLIでプロジェクトをデプロイするプロジェクトをデプロイする手順手順一：Firebase CLIのインストール手順二：Firebaseアカウントへログイン手順三：ディレクトリーを移動手順四：ホスティングの初期設定手順五：プロジェクトのデプロイ Firebaseでプロジェクトを立ち上げる流れ 事前にGoogleアカウントを取得してFirebaseの利用者に登録する必要がある。 コンソールにプロジェクトを追加する Firebase CLIでプロジェクトをデプロイする 二つの流れからFirebaseのプロジェクトが立ち上げられる。プロジェクトのアプリやサイトは幾つも持てる。毎回、コンソールにプロジェクトを追加して専用のFirebase CLIでプロジェクトをデプロイするとホスティングが使えるようになる。 コンソールにプロジェクトを追加する Firebase console｜Firebase｜Google 後からシステムが更新されて変わるかも知れないけれども現時点では六個から十一個までの要件を満たさなくてはからない。 Firebaseはアクセス解析のGoogleアナリティクスと連携する設定の仕方によってプロジェクトを追加するための要件が増減するんだ。 デフォルトの設定にする場合 プロジェクト名どんなプロジェクトか プロジェクトIDサーバーのURLのサブドメインになる アナリティクスの地域収益データの通貨に反映する Cloud Firestoreのロケーションマルチリージョン（全地域）us-central（アメリカ中央） リージョン（地域）us-east1／アメリカ東部の一つ europe-west3／ヨーロッパ西部の一つ データの保存先を指定する Firebase向けGoogleアナリティクスのデータ共有にデフォルトの設定を使用するGoogleのサービス改善のデータ使用を許可する ベンチマーク他の利用者との匿名データを入手する テクニカルサポート技術担当者のサポートを貰う アカウントスペシャリスト運営専門家のアドバイスを貰う 測定管理者間のデータ保護条項に同意しますGoogleと共に遵守するべきアナリティクスのプライバシーポリシーのようなアクセス解析で取得されるデータの保護に関する法律に基づく取り決めを交わす オプションの設定にする場合 二つのチェックを外すと「次へ」の画面に移動して「Firebase向けGoogleアナリティクスのデータ共有にデフォルトの設定を使用する」の四項目が選択可能に変わる。 新しいプロジェクトのデータ共有のカスタマイズ Googleのサービス測定管理者間のデータ保護条項に同意しますベンチマークテクニカルサポートアカウントスペシャリスト プロジェクトID以外の項目は後から変更できるけど、ただしGoogleアナリティクスに関連していてコンソールのプロジェクトを操作する「Hosting」にはスイッチがなくて「Overview」の歯車／設定の画面のヘッダーのメニューの「データのプライバシー」のアナリティクスの設定から行う。 Firebase CLIでプロジェクトをデプロイする Firebaseのプロジェクトを操作するFirebase CLIにはNode.js（ネットワークアプリケーションのJavaScript環境）のバージョン5.10.0以降とnpm（Node.jsのパッケージ管理ツール）が必要なんだ。 デバイスになければメインサイトから予めダウンロードしておかなくてはならない。Node.jsのファイルにはnpmも含まれているからさらにダウンロードしなくて構わない。両方とも無料で使用できる。 パッケージマネージャを利用した Node.js のインストール LinuxやMacやWindowsなど、OSを含めてパッケージ毎にNode.jsとnpmのインストールの仕方は異なる。 プロジェクトをデプロイする手順 firebase -h｜Firebase｜Google コンピューターのターミナルエミュレーター／プロンプト画面からnpmやFirebase CLIのコマンドを入力して行く。 手順一：Firebase CLIのインストール $ npm install -g firebase-tools Firebaseのプロジェクトを追加／編集するためのFirebase CLIをインストールする。 後から繰り返すとFirebaseのバージョンアップにも使える。 Firebase CLIで、どんなコマンドが使えるかは「firebase -h」か「firebase --help」によってリストが表示できる。加えて「firebase help」に「コマンド内容」を付けると個別に調べられる。他にもFirebase CLI リファレンスにコマンドの詳細が載っている。 手順二：Firebaseアカウントへログイン $ firebase login Firebaseのアカウントへのログインを行う。 二回目以降のログインで、バージョンアップされていたら「Updated available」（利用可能なアップデート）のメッセージが出るので、手順二の「npm install -g firebase-tools」のコマンドでインストールできる。 バージョンを確認するには「firebase -V」か「firebase --version」を入力する。 手順三：ディレクトリーを移動 $ cd ディレクトリー Firebaseのホスティングのデプロイに使用するデバイスのストレージのディレクトリーへ移動する。 汎用的なコマンド cd / ルートディレクトリーへ移動 cd ホームディレクトリーへ移動 cd .. 親ディレクトリーへ移動（一つ前に戻る） 何も入力しなければ現在のディレクトリーがプロジェクトのファイルを保存する対象になる。 Firebaseのために「mkdir フォルダ名」でフォルダを新しく作成しても良いと思う。フォルダを削除する場合は「rmdir フォルダ名」を実行する。 手順四：ホスティングの初期設定 $ firebase init Firebaseの初期設定を行う。 Firebase init｜Firebase｜Google Firebaseの機能の選択肢が幾つか出て来るので、プロジェクトIDが付いた「Hosting」をチェックして確定する。 デフォルトのプロジェクトの質問 Select a default Firebase project for this directory [don't setup a default project] Firebase Demo Project (fir-demo-project) プロジェクト名 (プロジェクトID) [create a new project] このディレクトリーのデフォルトのFirebaseプロジェクトを選ぶ ［デフォルトのプロジェクトを立ち上げない］ Firebaseのデモプロジェクト（fir-demo-project） プロジェクト名（プロジェクトID） ［新しいプロジェクトを作成する］ 初期設定なので、「プロジェクト名（プロジェクトID）」を選んでエンターキーを押す。 複数のプロジェクトを使い分ける 他のプロジェクトを新たに追加する場合は事前に「firebase use --add」からプロジェクトIDを選択してさらにエイリアス（別名）を付けてデフォルトのプロジェクトと識別しなくてはならない。 コマンドでエイリアスを付けるのは「firebase use --add エイリアス」で、後から「firebase use --unalias エイリアス」で削除できる。 初期設定が完了すればプロジェクトのエイリアスは.firebasercの隠しファイルから書き換えられもする。 Firebase CLIの複数のプロジェクトの切り替えは「firebase -P エイリアスかプロジェクトID」か「firebase use --project エイリアスかプロジェクトID」で行う。 複数のプロジェクトは「firebase list」（要ログイン）で確認できて「current」（現行）が表示されたプロジェクト名とプロジェクトIDがデプロイの対象になっている。 使用中のプロジェクトを解除するには「firebase use --clear」を実行する。 公開するディレクトリーの質問 What do you want to use as your public directory? パブリックディレクトリーに何を使いたいか Firebaseのデフォルトでは「public」になっている。他に必要なディレクトリー（ビルト済みなど）があれば差し替えて良いと思う。 シングルページアプリの質問 Configure as a single-page app (rewrite all urls to /index.html)? シングルページアプリ（/index.htmlへURLを全て書き換える）に設定するか シングルページアプリ：SPAはページ毎にhtmlの一部／メインコンテンツなどを配信してそれ以外の共通する部分は一つに纏めてブラウザの読み込みを簡略化する方法なんだ。 構築するにはフレームワークが必要で、ReactやAngularやVue.jsなどを使ってサイト作成を行う。そうしたプロントエンドに対してバックエンドでFirebaseのホスティングを使うにはシングルページアプリを選択するのが適している。 エラーページの上書きの質問 File public/404.html already exists. Overwrite? ファイルのpublic/404.htmlがもうある。上書きするか Firebaseのデフォルトのエラーページを変更する場合は使用するディレクトリーに404.htmlを用意しなくてはならない。 カスタマイズしないと一般的に「Page Not Found」（ページが見つかりません）だけではなくて「Why am I seeing this?」（なぜこれを見ているのですか）で「edit the 404.html file in your project's configured public directory」（publicディレクトリーで設定されたプロジェクトの404.htmlを編集します）と管理者向けのメッセージも表示されてしまう。 後から編集しても良いと思う。 トップページの上書きの質問 File public/index.html already exists. Overwrite? ファイルのpublic/index.htmlがもうある。上書きするか Firebaseのデフォルトのトップページを変更する場合は使用するディレクトリーにindex.htmlを予め用意しておかなくてはならない。 四つの質問に回答するとホスティングの初期設定が完了する。 手順五：プロジェクトのデプロイ $ firebase deploy ホスティングのファイル／コンテンツが予定通りに揃っていてヘッダーの設定が大丈夫ならばプロジェクトのデプロイを行う。 ホスティング｜Firebase｜Google トップページが未編集だと「Firebase Hosting Setup Complete」（Firebaseホスティングのセットのセットアップ完了）と「OREN HOSTING DOCUMENTATION」（ホスティング文書を開く）のボタンなどが表示されている。 そしてFirebaseのコンソールのHostingにも反映するようになる。 コマンドでホスティングを確認する firebase open 選択肢の「Hosting: Deployed Site」から一般的に確認する。 firebase serve ローカルホストの「http://localhost:5000」で試験的に確認する。 二つの仕方でホスティングサイトを表示できる。 ホスティングの基本的なディレクトリー構成 firebase（ホーム） ├database.rules.json ├firebase.json ├.firebaserc（隠しファイル） └public ├index.html └404.html 所定のディレクトリーにコンテンツのフォルダとファイルだけではなくてFirebaseのデータベースのための「database.rules.json」（データベース ルールを使ってみる）やリダイレクトやリライトやヘッダーを操作するための「firebase.json」（Hosting 動作をカスタマイズする）や環境設定のための「.firebaserc」もホスティングの初期設定のところから取り込まれている。 .firebasercからエイリアスを書き換える projectsについてエイリアスとプロジェクトIDを指定する。 { "projects": { "エイリアス①": "プロジェクトID①", "エイリアス②": "プロジェクトID②" } } ※エイリアスの初期値は「default」になっている。 複数のプロジェクトを使い分けるにはエイリアスとプロジェクトIDのセットを半角コンマで区切って最後だけは付けずにファイルを保存する。編集作業はFirebaseの「use --add」などのコマンドでも可能だけれどもプロジェクトが多いと.firebasercを使った方が手早いかも知れない。 デプロイコマンドの四種類のオプション Firebase CLIの「firebase deploy」に四種類のオプションがある。何れも半角スペースで区切って後ろに付け加える。複数でも同様に入力して一度に実行可能になっている。 -p ディレクトリー／--public ディレクトリー パブリックディレクトリーに別のディレクトリーの内容を置き換えてデプロイ -m メッセージ／--message メッセージ コンソールのデプロイ履歴にメッセージを追加する --only 機能 Firebaseの「hosting」と「functions」と「detabase」と「storage」と「firestore」の機能を指定してデプロイ（複数は半角コンマで区切る。「functions」は半角コロンで関数を、半角ピリオドでグループと関数を繋げられる） --except 機能 Firebaseの「hosting」や「detabase」などの機能を除外してデプロイ デプロイ済みのプロジェクトはFirebaseのコンソールのHostingからいつでもロールバックできる。 ホスティングの選択したプロジェクトのダッシュボードの「デプロイの履歴」から項目を押すと出て来るメニューからロールバックと削除（項目を消す）が含まれている。 参考サイトFirebase Hosting を使ってみる便利なパッケージ管理ツール！npmとは【初心者向け】Firebase Hostingを用いてHTMLホームページをインターネットに完全無料で公開するFirebaseでホスティングしてみたシングルページアプリケーション（SPA）の導入メリット＆デメリットFirebase Hosting での複数環境へのデプロイ コメント 新しい投稿 前の投稿
結城永人
結城永人
コメント