JavaScriptに関するお知らせ

SINCE2019
>
FirebaseのプレビューチャネルのURLをCIで取得

FirebaseのプレビューチャネルのURLをCIで取得


こんにちは!CLI大好きMizutani(@sirycity)です。CUI沼はまり中。

今日はFirebaseのCLIの仕様変更についてです。ちなみにFirebaseHostingについての内容なのでFirebaseって書いてあったら全部FirebaseHostingのことです。

結論

基本はデプロイ時に--json指定するだけでOK!

firebase hosting:channel:deploy 【ハッシュ値】 --expires 1d --json

これが無理ならこんな感じ

res=$(firebase hosting:channel:open 【ハッシュ値】)
url=$(grep -Eo "http(s?)://(\w|:|%|#|\$|&|\?|\(|\)|~|\.|=|\+|\-|/)+" <<< "$res" | tail -1)

FirebaseのCLIについて

Firebaseへのデプロイとかを担うCLIとしてfirebase-toolsがあります。普通にnpmとかyarnでこんな感じにインストールできます↓

npm install --save-dev firebase-tools
yarn add --dev firebase-tools

CLI使うの?

FirebaseはNetlifyとかVercelの競合たちと違ってCI付いてないのでCLI使ってCIでデプロイすることになります。まあFirebaseのメインHostingじゃないしね。

プレビューチャネルについて

Firebaseにはプレビューチャネルっていうハッシュ値を指定して一時的に立ち上げとける環境があります。用途としてはプルリク立ったら立ち上げるみたいな感じ。CLIではこんな風にできます。

// このハッシュ値で1日だけ立ち上げ
firebase hosting:channel:deploy 【ハッシュ値】 --expires 1d
// このハッシュ値の環境をブラウザで開く
firebase hosting:channel:open 【ハッシュ値】

CLIでハッシュ値をもとにURL取得

deploy時に指定する方法

デプロイ時にhosting:channel:deployに加えて--jsonを指定すると戻り値に作られたURLが返ってきます。これを参照することでハッシュ値をもとにそのハッシュ値で作られたURLを取得することができます。通常はこれでOK。こんな感じでデプロイすると、

firebase hosting:channel:deploy 【ハッシュ値】 --expires 1d --json

こんな感じでjsonが返ってくるので、

{
  "status": "success",
  "result": {
    "fb": {
      "target": "***",
      "site": "***",
      "url": "***",
      "version": "",
      "expireTime": "***"
    }
  }
}

jqとかでパースしてURLを参照すればいけるはず。

一方、この方法はデプロイとURL取得を同じ箇所で行う必要があります。別の箇所でしたい場合は次の方法をとる必要があります。

open時に指定する方法

openを押すとハッシュ値をもとにそのハッシュ値で作られたURLの環境をブラウザで開けます。これが主な用途...なんですが実はこのコマンド、ブラウザで開けない環境で実行することで戻り値に開くURLを含んだ文字列が返ってきます。つまりCIの中とかで実行すればこの文字列から正規表現でURLを抽出することで同じようにURLを取得することができます。ただし本来想定された用途ではないです。

こんな感じで戻り値の文字列が取得できるので...

res=$(firebase hosting:channel:open 【ハッシュ値】)

これを正規表現にかけてURLを抽出します。

res=$(firebase hosting:channel:open 【ハッシュ値】)
url=$(grep -Eo "http(s?)://(\w|:|%|#|\$|&|\?|\(|\)|~|\.|=|\+|\-|/)+" <<< "$res" | tail -1)

なお、末尾の| tail -1は複数個URLが取得された場合に末尾のURLを取得する意味合いです。なんか最近openの戻り値が変更されて、プレビューチャネルのURLの前にGCPのURLhttps://cloud.google.com/docs/authentication/getting-startedが入るようになってしまった。のでそれ対策です。

さいごに

Firebaseのプレビューチャネル、便利なのでもっと知ってほしい!でもちょっと機能が貧弱です。まだベータ版とはいえハッシュ値をもとにURLを取得する関数くらいは欲しいですね。最近Nextがネイティブサポートされたし、今後の展開に期待です。以上。



PREV
2022-11-04
GitHubの新しい個人と組織のpersonal access tokensを解説

NEXT
2022-11-08
新しいFirebaseの認証を解説とGitHubActionsの実装例