Firebaseで静的サイトをデプロイ

簡単だと聞いていたfirebaseでの静的サイトのデプロイを試してみました！

簡単ではあったのですが、始めて挑戦する際はいくつか引っ掛かる点もありました。(英語きちんと読めば引っ掛かることはないと思います。。。)

なのでfirebeseにおけるデプロイまでの流れを自分なりにまとめてみました。

一度やり方がわかればとても簡単です！

動的なサイトも簡単にデプロイできるようなので、今後そちらにも挑戦してみたいです。

デプロイまでの流れ

＊firebaseを使うための準備

npsとnode.jsが入っていなければインストールする。

自分は以下の記事を参考にしました。

qiita.com

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

$ npm install -g firebase-tools

これでfirebaseコマンドが使えるようになる。

2.firebaseにログイン

$ firebase login

3.必要なファイルやフォルダを生成する

デプロイしたいプロジェクトのディレクトリに移動し、以下のコマンドを実行。

$ firebase init

すると、以下のようなメッセージがでる。

   🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥

   🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥

   🔥🔥🔥🔥🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥

   🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥 🔥🔥

   🔥🔥 🔥🔥🔥🔥 🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥 🔥🔥 🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥

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

/Users/hay/projects/html-projects/star

Before we get started, keep in mind:

* You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.

(Press <space> to select)

❯◯ 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

何を選択するか聞かれるので、使うものにカーソルを合わせ、スペースキーを押して、エンター。

(自分はここでスペースキー押してなくて何回かミスった。英語きちんと読まないといけないと反省。)

静的サイトのデプロイなら、Hostingを選択する。

続いてどのfirebase projectを使うか聞かれるので選択する。

? Select a default Firebase project for this directory: star-42ec5 (star)

star-42ec5を選択し、このままエンターすると、

i Using project star-42ec5 (star)

=== Hosting Setup

このようになる。

この時点でデプロイに必要なファイル等々を生成してくれている。

4.ルートディレクトリの選択

以下のようにルートディレクトリは何にするか聞かれる。

何も書かずにエンターを押すとpublicというディレクトリが生成され、それがルートディレクトリになる。

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

続いてシングルページアプリか聞かれる。シングルページならYesでエンター。

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

すると、publicディレクトリ配下にindex.htmlが生成され、それがトップページで表示されるようになっている。

index.htmlに色々表示させたいものを書いていけば良い。

5.デプロイ

以下のコマンドを打ってデプロイ。

$ firebase deploy

すると以下のメッセージが出てくる。

=== Deploying to 'star-42ec5'...

i deploying hosting

i hosting[star-42ec5]: beginning deploy...

i hosting[star-42ec5]: found 1 files in public

✔ hosting[star-42ec5]: file upload complete

i hosting[star-42ec5]: finalizing version...

✔ hosting[star-42ec5]: version finalized

i hosting[star-42ec5]: releasing new version...

✔ hosting[star-42ec5]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/star-42ec5/overview

Hosting URL: https://star-42ec5.firebaseapp.com