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 での複数環境へのデプロイ コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
コメント