WindowsでFirebaseプロジェクトを作成してホスティングする

WindowsでFirebaseプロジェクトを作成してホスティングする

Firebaseプロジェクトを作成します。ログインしてからinitコマンドを実行します。

C:\test>firebase login
~省略~
C:\test>firebase init

initコマンドでインタラクティブにプロジェクトを作成することが出来ます。

※ホスティングだけ使用する場合はfirebase init hostingコマンドで良いです

WindowsでFirebaseプロジェクトを作成する

ここではサービスは以下1つを選択しました。

  • Firebase Hosting

ディレクトリ構成

WindowsでFirebaseプロジェクトを作成する

Firebase Hosting1つだけにしたのでディレクトリ構成は上記の通りになります。

コンソール画面から確認

プロジェクトが作成されたかをコンソールから確認します。

WindowsでFirebaseプロジェクトを作成する

プロジェクト名：projectx、プロジェクトID：takahashipj、でプロジェクト作成できていることが確認できます。

CLIから確認

firebase projects:listコマンドでプロジェクトのリストを確認することが出来ます。

C:\test>firebase projects:list
√ Preparing the list of your Firebase projects
┌──────────────────────┬───────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID            │ Project Number │ Resource Location ID │
├──────────────────────┼───────────────────────┼────────────────┼──────────────────────┤
│ test                 │ test                  │ 1065478106842  │ [Not specified]      │
├──────────────────────┼───────────────────────┼────────────────┼──────────────────────┤
│ Sample               │ sample                │ 987079349754   │ [Not specified]      │
├──────────────────────┼───────────────────────┼────────────────┼──────────────────────┤
│ projectx             │ takahashipj (current) │ 392913569890   │ [Not specified]      │
└──────────────────────┴───────────────────────┴────────────────┴──────────────────────┘

3 project(s) total.

（current）となっているのが現在アクティブなプロジェクトになります。

firebase useコマンドでもアクティブなプロジェクトを表示する事ができます。

C:\test>firebase use
Active Project: takahashipj

Project aliases for C:\test:

* default (takahashipj)

Run firebase use --add to define a new project alias.

C:\test>

ローカルテスト

デプロイする前にローカルで起動して動作確認します。以下コマンドを実行します。

C:\test>firebase serve

または以下コマンドを実行します。

C:\test>firebase emulators:start

http://localhost:5000/でアクセスして確認することが出来ます。

どちらのコマンドでも起動しますが、serveコマンドは非推奨となっています。

Firebase ホスティングのデフォルトポートは5000ですが、firebase.jsonでポートは変更することが出来ます。

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "emulators": {
    "hosting": {
      "port": 5001 // これでhttp://localhost:5001/に変更される
    }
  }
}

プレビュー

デプロイする前にプレビューして開発者で画面を共有して評価します。

C:\test>firebase hosting:channel:deploy <チャンネルID>

チャンネルIDを指定して上記コマンドを実行します。今回はチャンネルIDをtestとしました。

プレビューチャンネルのURL体系は以下になります。

https://<プロジェクトID>--<チャンネルID>-<ランダム値>.web.app/

このプレビューチャンネルはデフォルト7日で有効期限が切れます。

--expires 1mなどをオプション指定すれば1分で有効期限が切れます。

オプション有効期限
1m1分
2d2日
3h3時間

全てのチャンネルのリストはfirebase hosting:channel:listコマンドで確認できます。

C:\test>firebase hosting:channel:list

Channels for site takahashipj

┌────────────┬─────────────────────┬────────────────────────────────────────────┬─────────────────────┐
│ Channel ID │ Last Release Time │ URL │ Expire Time │
├────────────┼─────────────────────┼────────────────────────────────────────────┼─────────────────────┤
│ test       │ 2021-06-18 09:21:57 │ https://takahashipj--test-2ryhte3b.web.app │ 2021-06-25 09:21:51 │
├────────────┼─────────────────────┼────────────────────────────────────────────┼─────────────────────┤
│ live       │ 2021-06-17 17:25:43 │ https://takahashipj.web.app                │ never               │
└────────────┴─────────────────────┴────────────────────────────────────────────┴─────────────────────┘

Firebaseコンソールからも確認することが出来ます。

WindowsでFirebaseプロジェクトを作成してホスティングする

ローカルからデプロイ

ローカルに存在するプロジェクトのpublic配下をデプロイします。

C:\test>firebase deploy --only hosting

デプロイURLは以下形式のURLにデプロイされます。（無料）

https://<プロジェクトID>.web.app

https://<
<
プロジェクトID>.firebaseapp.com

プレビューからデプロイ

ローカルからデプロイするのではなく、プレビューチャンネルからクローンしてデプロイします。

C:\test>firebase hosting:clone <プロジェクトID>:test <プロジェクトID>:live
√ Cloning site content...
+ Site takahashipj channel test has been cloned to site takahashipj channel live.
+ Channel URL (live): https://takahashipj.web.app

これでtest環境をlive環境へデプロイすることが出来ます。

phpが動かない

試しにphpを配置してみたのですがダウンロードされるだけで動作しませんでした。SPA向きのホスティングサービスなのかもしれません。

Quick Start

Firebase Hosting を使ってみる
firebase.google.com

Blog

The biggest Firebase Hosting update ever? Preview channels, GitHub Actions, and more!
Get ready! We have a huge set of updates landing for Firebase Hosting! Today we are announcing preview channels, an official GitHub Action, and clonin
firebase.googleblog.com

コメント

タイトルとURLをコピーしました