見出し画像

Firebase Hosting を試す

npaka

「Firebase Hosting」を試したので、まとめました。


前回

1. Firebase Hosting

「Firebase Hosting」は、Firebaseのホスティングサービスです。ホスティングは、Webページ (HTML、CSS、JavaScript、メディアファイルなど) の公開場所を借りることです。静的なWebページを配置するだけでなく、「Cloud Functions」や「CloudRun」と連携して動的なWebアプリも開発できます。

2. 使用料金

使用料金は、次のとおりです。試すための無料枠もあります。

現在の使用料金は、Firebaseプロジェクトの「歯車アイコン→使用量と請求額」で確認できます。

3. プロジェクトの準備

プロジェクトの準備の手順は、次のとおりです。

(1) Firebaseコンソールで、Firebaseプロジェクトを作成。

(2) PCのコンソールで「Node.js」をインストール。

(3) 「firebase-tools」のインストール。

$ npm install -g firebase-tools

(4) Firebaseにログイン。
ブラウザのログイン画面が開くのでログインします。

$ firebase login

(5) プロジェクトフォルダを作成。

$ mkdir helloworld
$ cd helloworld

(6) プロジェクトの初期化の開始。

$ firebase init hosting

(7) プロジェクトの作成で、「既存プロジェクトの使用」(Use an existing project)を選択。
上下キーとEnterで選択します。

? 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

(8) プロジェクトの選択で、先程作ったFirebaseプロジェクトを選択。

? Select a default Firebase project for this directory: (Use arrow keys)
❯ test-123456 (Test)

(9) 公開ディレクトリとして、デフォルト(public)を選択。
Enterキーのみでデフォルトになります。

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

(10) シングルページアプリとして設定するか (すべての URLを /index.html に書き換えるか)で、デフォルト(N)を選択。

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

(11) GitHubの自動ビルドとデプロイを設定するかで、デフォルト(N)を選択。

? Set up automatic builds and deploys with GitHub? (y/N)

次のような構成のプロジェクトフォルダができます。

・firebasejson
・public
        ・404.html
        ・index.html

4. Webページの作成

Webページの作成手順は、次のとおりです。

(1) 「public/index.html」を以下のように編集。
アクセス時に"Hello from Firebase Hosting!"という文字列を表示するWebページになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>helloworld</title>
    </head>
    <body>
        Hello from Firebase Hosting!
    </body>
</html>

5. Webページのローカルでの動作確認

Webページのローカルでの動作確認の手順は、次のとおりです。

(1) ローカルサーバの起動。
起動成功すると、アクセス先URLが表示されます。

$ firebase serve
Local server: http://localhost:5002

(2) ブラウザでアクセス先URLを開く。

6. Webページのデプロイ

Webページのデプロイの手順は、次のとおりです。

(1) Webページのデプロイ。

$ firebase deploy --only hosting

完了すると次のようなログが表示されます。

Hosting URL: https://test-XXXXXX.web.app

(2) 「Hosting URL」をブラウザで開く。
Webページの表示を確認します。

7. デプロイしたWebページの削除

デプロイしたWebページの削除の手順は、次のとおりです。

(1) ホスティングの非アクティブ化。

$ firebase hosting:disable

(2) Firebaseプロジェクトの「構築 → Hosting」で削除するWebページの「︙」から「削除」を選択。



この記事が気に入ったらサポートをしてみませんか？