まえがき
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
