Firebaseのホスティング-デプロイしたい。

#はじめに
制作したサイトをfirebaseで公開しようと利用したので、その手順や注意を忘れないよう自分なりにまとめた記事です。

##準備
・ Googleアカウント
・ デプロイするサイト
・ firebaseのプロジェクト作成(公開するサイト1つにつき1つ作る。)
・ node.jsをインストール(推奨版)

ターミナルでnode.jsがインストールされているか確かめる。

$ node -v

続いてnpmも一緒にインストールされているか確認してみる。

$ npm -v

##firebase-toolsのセットアップ

firebaseのコマンドラインツールのインストール

$ sudo npm install -g firebase-tools

インストールされているか確認する。

$ firebase -V

インストールが終わったら、firebaseにログイン

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information?(Y/n)
  ↓Yを選択後
✔  Success! Logged in as <mail address>

Success! が出たらログイン完了。

##プロジェクトの初期化

アップしたいファイルに移動し、初期化する。

$ cd <アップしたいファイルまで移動>
<ファイル名>$ firebase init

矢印キーで移動、スペースキーで選択、リターンで決定。
Hostingを選択。

? Which Firebase CLI features do you want to setup for this folder?
❯◉ Hosting: Configure and deploy Firebase Hosting sites

どのフォルダを公開用のフォルダにしますか?
publicディレクトリを使用するので、Enter。

? What do you want to use as your public directory? (public)

publicフォルダの中のHTMLを上書きしますか?
Nを選択。絶対No。注意!!!!
complete!と出たら、初期化ができました。

? File public/index.html already exists. Overwrite? (y/N)
↓Nを選択
✔︎ Firebase initialization complete!

続いてファイルの中身を確認。
・ firebase.jsonが作成されている。
・ publicフォルダの中に404.htmlが作成されている。

##サイトを公開(デプロイ)

デプロイするときに、初期化したファイルに移動しているか確認してから行う。

<ファイル名>$ firebase deploy

Hosting URL: <公開したかったサイトのURL>

URLをコピーしてブラウザに貼り付けると、https:で表示される。

##ログアウト
firebaseにログインしている状態なので、ログアウトして終了。

<ファイル名>$ firebase logout

##デプロイしているサイトを更新したい。
編集したファイルに移動し、firebaseにログインした後、そのままデプロイすればOK!

$ cd <アップしたいファイルまで移動>
$ firebase login
<ファイル名>$ firebase deploy

##メモ

プロジェクトの一覧を確認

<ファイル名>$ firebase projects:list

ターミナルのクリア
control + l

firebaseサイトの自分のダッシュボードに行くと現在公開しているサイトと履歴を確認できる。ロールバックもダッシュボードでできる。
※ロールバック:以前公開したサイトに戻す事。

##参考