Firebaseのデプロイまでをまとめた

自分のポートフォリオ作成やちょっとした実験の場が欲しくてFirebaseでデプロイする方法を調べてみました。以前みたいにレンタルサーバーを借りなくてもかんたんに自分のサイトが公開できるのすごい便利…。

前提条件

これより下の作業は下記が済んでいることが前提となっています。

・Node.jsインストール済。
・Firebaseのアカウントは取得済。
・Firebaseの管理画面からプロジェクトを作成済。
作業環境はmacですが、windowsでも特に変わらないと思います。

作業用ディレクトリの作成

まずはデプロイしたいファイルを置くための作業ディレクトリを作成します。

my-mac:htdocs sample$ mkdir app-test
my-mac:htdocs sample$ cd app-test/

Firebase CLIのインストール

Firebase CLIをインストールしますグローバルオプションをつけないとうまくインストール出来ないっぽいので-gをつけてインストールします。

usr-mac:~ app-test$ npm install -g firebase-tools

Firebaseにgoogleアカウントでログインする

usr-mac:~ app-test$ firebase login

Firebaseを初期化する

作業ディレクトリ内で初期化コマンドを実行します。

my-mac:app-test app-test$ firebase init

初期化すると、以下のようにでっかくFIREBASEの文字が表示されます。

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

ここで作業ディレクトリを覗いてみると、firebase.jsonが生成されており、jsonファイルの中身は以下のようになっています。ドキュメントルートとなるディレクトリ名についてはfirebase.jsonで管理されているみたいです。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

使用用途を選択する

今回はローカルで作業したファイルをデプロイしたいだけなのでHostingを選びました。
矢印キーでカーソルを移動させて、スペースキーでHostingを選択してからEnterキーで選択します。
（最初スペースキーで選択するってわからなくて10分位ハマりましたが、ちゃんと英語で書いてありました…。）

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 (●) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules

使用するプロジェクトの選択

次にプロジェクトを選択します。Firebaseの管理画面ですでにプロジェクトを作成してあるのでUse an existing projectを選択しました。新規で作成する場合はCreate a new projectを選択します。

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: app-dev (app-dev)
i Using project app-dev (app-dev)
? Create a new project
? Add Firebase to an existing Google Cloud Platform project
? Don't set up a default project

ドキュメントルートの設定

ドキュメントのフォルダは先程jsonファイルで確認した通り、デフォルトではpublicになっています。特に変更する必要がなければそのままエンターを実行します。

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No

デプロイを実行します

ここまで来たら、いよいよデプロイを実行してFirebase上にホスティングします。
デプロイするには、下記コマンドを実行します。

my-mac:app-test app-test$ firebase deploy

デプロイが実行されて…

=== Deploying to 'app-dev'...

i  deploying hosting
i  hosting[app-dev]: beginning deploy...
i  hosting[app-dev]: found 2 files in public
✔  hosting[app-dev]: file upload complete
i  hosting[app-dev]: finalizing version...
✔  hosting[app-dev]: version finalized
i  hosting[app-dev]: releasing new version...
✔  hosting[app-dev]: release complete

✔  Deploy complete!

Deploy complete!と表示されたら成功です！！
デプロイが成功するとホスティングされたURLとコンソール画面のURLが表示されます。

Project Console: https://console.firebase.google.com/project/sample-dev/overview
Hosting URL: https://sample-dev.web.app

デプロイまでの手順は以上になります。

参考にさせていただいた記事

デプロイまでたどり着くまでに下記の記事をめちゃくちゃ参考にさせていただきました。
管理画面の使い方などもわかりやすく説明されていて助かりました。
Firebaseでデプロイしよう！
Firebase Hosting を使ってみる
 Nuxt.jsとFirebaseを使って簡単なWebサービスを作る＜導入編＞

公開する場所を確保したのでなにか作ろう。