ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

firebase hosting入門

前回からfirebaseを使い始めました。

yuzu441.hateblo.jp

今回は第2弾ということでfirebase hostingを使ってみたいと思う。

tl;dr

  • firebase-toolsインストール
  • firebaseコマンドでログイン
  • firebase consoleでプロジェクト作成
  • firebaseコマンドで雛形作成
  • firebaseコマンドでデプロイ
  • firebaseにデプロイしたものを確認

インストールとか

まずはfirebaseのCLIツールをインストールしてログイン。 今回はfirebaseの説明だけをしたいと思うのでNode.jsのインストールは省略します。

npm i -g firebase-tools
firebase login

firebase loginを実行すると 「Allow Firebase to collect anonymous CLI usage information?」と出て来ると思いますが これはよくある「匿名の情報を収集して良いか」なのでY or N好きな方を選べばいいと思います。

firebase hostingでプロジェクトを作る

firebase consoleにアクセスしてテストプロジェクトを作成する。

適当にプロジェクト名を入力して、「国/地域」は日本を選択。

プロジェクト作成からアップロードまで

インストールと準備が終わったので、プロジェクト以下コマンドでプロジェクトを作成する。

firebase init

f:id:yuzu441:20170227225420p:plain

そこから選択肢をポチポチしていきます

  • 「Hosting: Configure and deploy Firebase Hosting sites」を選択
  • 「What Firebase project do you want to associate as default?」上で作成したプロジェクト名を選択
  • 「What file should be used for Database Rules?」そのままEnter
  • 「What do you want to use as your public directory?」そのままEnter
  • 「Configure as a single-page app (rewrite all urls to /index.html)?」nを選択

初期化が終わったら以下コマンドでデプロイする

firebase deploy

これでdeploy完了!

hostingされているページを確認する

firebase consoleで作成したプロジェクトを選び、hostingのページを選ぶと <project名>-<なんかID>.firebaseapp.comと書かれたものがあるので、それをクリックすると以下のようなページが表示される

f:id:yuzu441:20170227225453p:plain

ちなみに

<project名>-<なんかID>.firebaseapp.com/foo.htmlのような存在しないページにアクセスすると404.htmlが呼ばれます。 これは存在しないページにアクセスしようとした時に404.htmlが決め打ちで返されるようになっているみたい。

firebase hosting document