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がネイティブサポートされたし、今後の展開に期待です。以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介