Firebase Hostingを用いてHTMLホームページをインターネットに完全無料で公開する

まえがき

FirebaseというサービスにはHTMLで作ったホームページをインターネット上に公開できる機能があります。しかも、Googleアカウントさえあれば、現在のところ誰でも無料で使えます。クレジットカードの登録も要りませんので、理論上は、子供でも使えます。

より正確には、Firebaseというサービスには、色々と機能があるわけですが、今回はそのひとつ、静的サイトのホスティング(Hosting)を利用しようというわけです。

対象読者

• Googleアカウントを持っている
• HTMLの初歩がわかる
• ターミナル(コマンドプロンプト)を触ったことがある

この記事が扱うトピック

• Firebaseのはじめかた
• Firebase Hostingで静的サイトを公開する方法

1. Firebaseのプロジェクトをつくる

に行けば、すぐにプロジェクトを作れます。
Googleアカウントにログインされている状態であれば、アカウント作成すら不要です。

2. CLIツールを入れ、ログインする

Node.js が入っていない人はここからインストールします。
https://nodejs.org/ja/

Firebaseの操作は、ターミナル(コマンドプロンプト)のコマンドでやるのが基本です。
インストールも、コマンドです。

npm install -g firebase-tools

ログインします。

firebase login

3. 公開するHTMLを用意する

公開したい index.html はこうなっているとします。

<h1>Hello Firebase!</h1>

このようなフォルダ構成であるとします。

├── firebase.json
└── public_dir
    └── index.html

firebase.json の中身は次のようにします。

{
  "hosting": {
    "public": "public_dir"
  }
}

4. デプロイする

さっき作ったプロジェクトの、IDを確認します。

$ firebase list
┌──────┬───────────────────────┬─────────────┐
│ Name │ Project ID / Instance │ Permissions │
├──────┼───────────────────────┼─────────────┤
│ neko │ neko-dcaa9            │ Owner       │
└──────┴───────────────────────┴─────────────┘

IDを指定して、デプロイします。

$ firebase deploy --project neko-dcaa9

=== Deploying to 'neko-dcaa9'...

i  deploying hosting
i  hosting: preparing public directory for upload...
✔  hosting: 1 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

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

これで、

に公開されました。

5. ホームページ内容の更新

かわいい写真をつけたくなったとします。
写真のjpgファイルをimgフォルダの中に置きます。
それから、写真のためのタグを追記します。

<h1>Hello Firebase!</h1>
<img src='img/neko.jpg'>

フォルダ構成が、このようになりました。

├── firebase.json
└── public
    ├── img
    │   └── neko.jpg
    └── index.html

いよいよ更新です。といっても、同じコマンドです。

firebase deploy --project neko-dcaa9