Edited at

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

More than 1 year has passed since last update.


まえがき

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

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


対象読者


  • Googleアカウントを持っている

  • HTMLの初歩がわかる

  • ターミナル(コマンドプロンプト)を触ったことがある


この記事が扱うトピック


  • Firebaseのはじめかた

  • Firebase Hostingで静的サイトを公開する方法


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

https://console.firebase.google.com/

に行けば、すぐにプロジェクトを作れます。

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

これで、

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