FooBar

note to self

Firebaseで静的サイトをホスティングする方法

こんにちは。本日はFirebase(https://firebase.google.com/?hl=ja)を使って静的サイトを公開する方法についてです。

Firebaseを使って公開すれば原則無料でサイトを公開できます。 (リクエスト量が多いと有料プランに移行します)

同じようなサービスとしてGitHub PagesやAWSのS3、最近だとNetlifyがありますが、今回はFirebaseのHosting機能を使ってスタティックサイトを公開してみます。

プロジェクト作成

FirebaseのHP(Firebase)からプロジェクトを作成していきます。 (コマンドラインからも作成できますが、今回はサイト上で作成します)

サイト上の使ってみるボタンか右上のFirebase consoleを押すとプロジェクトを追加という部分があるので、そこから指示通りにプロジェクトを作成していきます。

作り終わったらホーム画面に自分が作ったプロジェクトが表示されていたら作成成功です。

Firebase CLI をインストールする

Firebase CLI(ターミナル上からFirebaseを操作するツール)をインストールしていきます。

CLIを使うにはNode.jsとnpmのインストールが必要となります。 (インストールに関しては過去記事を参照してください。)

blog.otsukasatoshi.com

Node.jsとnpmのインストールが終わったらCLIをインストールしていきます。

$ npm install -g firebase-tools

インストールが終わったらコマンドを叩いてログインします。

$ firebase login

するとブラウザが開いてGoogleアカウントでログインする許可をします。 指示通りに進めていけばOKです。

ターミナルに戻って以下のようなメッセージが表示されていればログイン成功です。

$ Success! Logged in as ○○○○○○@gmail.com

次にfirebase listというコマンドを打つと作成したプロジェクトのリストが表示されます。

$ firebase list

This command is deprecated. Instead, use 'firebase projects:list' command to list your projects.
┌──────────────┬───────────────────────┬─────────────┐
│ Name         │ Project ID / Instance │ Permissions │
├──────────────┼───────────────────────┼─────────────┤
│ My Project │ my-project-0000a    │ Owner       │
└──────────────┴───────────────────────┴─────────────┘

これでデプロイする下準備が完了です。

デプロイする

では作成したプロジェクトをデプロイしていきましょう。

ターミナル上でデプロイしたいAPPまでディレクトリを移動してください。

$ mkdir My Project
$ cd My Project

移動したら対象APPを初期化します。

$ firebase init

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

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

  /Users/username/My Project

初期化中にいくつか質問されるので、それぞれ答えていきます。

まずはFirebaseの何のサービスを使うか言われるのでHostingを選びます。 一点注意なのは選択するときにスペースを押してからエンターキーを押してください。

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ 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プロジェクトを選択します。 今回は既存のプロジェクトを選択します。

  ? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

最初に作ったプロジェクト名(My Project)を指定します。

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: my-project-abcdefg (My Project)
i  Using project my-project-abcdefg (My Project)

そうしたらどこのフォルダをルートに指定するか聞かれるのでデフォルトの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

最後に今回のプロジェクトはSPA(シングルページアプリケーション)なのか聞かれます。 今回はSPAではないのでNoを選択。SPAサイトのひとはYesを選択してください。

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

次のようなメッセージが表示され、最後にcomplete!の文字が出ていれば成功です。

✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

全部終わったら初期化が終わったプロジェクトにfirebase.jsonが作成されます。

最後に以下のコマンドを叩けばデプロイ完了です。

 $ firebase deploy

=== Deploying to 'my-project-abcdefg'...

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

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/my-project-abcdefg/overview
Hosting URL: https://my-project-abcdefg.firebaseapp.com

払い出されたURLに行くとFirebaseの初期画面が表示されていると思います。 (ApacheとかNginxの初期画面のようなものですね)

あとはルートに指定したpublicフォルダのなかにindex.htmlなど実際に表示したいファイルを移動します。

きちんと表示されてるかテストできるコマンドも用意されてます。

$ firebase serve

=== Serving from ' /Users/username/My Project'...

i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

これでlocalhost:5000を叩けばローカル環境で表示確認ができます。

問題なければ再びfirebase deployコマンドを叩けば完了です。

ちょっと長くなりましたが、Firebaseを使えば簡単にスタティックページをデプロイすることができました。 Googleがやっているサービスなので安心感があり、しかも無料で独自ドメインやSSL化に対応してます。

自分のポートフォリオサイトやサービスを公開する手段としてかなり有用なサービスですね。

本日は以上です。