FirebaseベースのFunctionsを利用した場合の環境変数の設定方法は？

FirebaseベースのFunctionsを利用した場合の環境変数の設定方法は？

2020年11月6日


FirebaseベースのFunctionsを利用した場合の環境変数の設定方法は？

Firebaseベースのファンクションを利用して、バックエンドの処理を実装する場合に環境依存の変数の値をどのように設定するかを解説しています。

環境変数を利用する理由はいくつかあります。実際のコードを特定の環境依存にしないための工夫というのが一番大きな理由です。

環境変数を利用してプログラムを管理しやすくする

環境変数を利用するとプログラムの管理がやりやすくなるという利点があります。

例えば、Webサイトを作る場合サイトのタイトルをプログラム中に直接書いてしまう方法をハードコーディングといいます。

export function Sample() {
    return (
        <h1>Silicon　Valley Super WareValley Super Ware</h1>
        <h3>XXX-XXX-XXXX</h3>
    )
}

のような例です。この例ではこのようにハードコーディングしている場所が二箇所なので余り大きな問題にはなりません。しかし、他にも、住所などいろいろな情報をプログラム中にハードコーディングしている場合、別の組織のWebサイトとして転用する場合に修正が面倒になります。

少し管理しやすいように、サイトによって変わる情報の部分をまとめることができます。

const TITLE = "Silicon Valley Super Ware";
const PHONE = "xxx-xxx-xxxx";
export function Sample() {
    return (
        <h1>{TITLE}</h1>
        <h3>{PHONE}</h3>
    )
}

のようにすると、定数を宣言してる部分にサイトによって変わる情報がまとまっているので少し管理しやすくなります。しかし、実際はプログラムの一部である点は変わりないので、プログラムのソースコードの修正が必要になります。

そこで、こうしたサイトによって変えなければいけない部分をまとめてしまって、その部分だけを変更すればプログラムを修正しなくても、別のサイトに転用ができるようにしたのが環境変数という概念です。

「dotenv」を使う

npmのモジュールで「dotenv」というモジュールがあります。これを利用するとプログラムとは別にこうした、サイトによって変わる情報を設定する事ができます。 インストールは他のnpmのモジュールと同様に、以下のコマンドを実行するだけです。

$ npm install dotenve

利用する際は、プログラムのソースコードで

require('dotenve').config();

の一行を追加するだけです。

あとは、Firebaseのプロジェクトフォルダの下にあるfunctionsの下に「.env」というファイルを作成して必要な情報を設定するだけです。

「.env」ファイルの例です

DB_DEBUG=true
DB_TITLE=Silicon Valley Super Ware
DB_PHONE = xxx-xxx-xxxx

これを先ほどのコードに適用すると

const DEBUG = process.env.DB_DEBUG === "true"? true : false;
const TITLE = process.env.DB_TITLE? process.env.DB_TITLE : "";
const PHONE = process.env.DB_PHONE? process.env.DB_PHONE : "";
export function Sample() {
    return (
        <h1>{TITLE}</h1>
        <h3>{PHONE}</h3>
    )
}

のように書き直すことができます。こうすると、プログラムのソースコードに触れることなく必要な設定を簡単に変えられることになります。「.env」の中身だけ変えればよいので管理が楽になります。

ReactやVueはCLIを使うとあらかじめ組み込まれている

ReactやVueの場合は、ＣＬＩを利用してプロジェクトを作成すると、この「dotenve」の機能が予め組み込まれています。プロジェクトフォルダに「.env」というファイルを作って、同じような要領で設定して変数の値をプログラムから呼び出すことができるようになっています。

「.env」の例

Reactの場合は、「REACTAPP」を最初につけて記述します。

REACT_APP_DEBUG=true
REACT_APP_TITLE=Silicon Valley Super Ware"
REACT_APP_PHONE=Silicon Valley Super Ware"

Vueの場合は、「VUEAPP」を最初につけて記述します。

VUE_APP_DEBUG=true
VUE_APP_TITLE=Silicon Valley Super Ware"
VUE_APP_PHONE=Silicon Valley Super Ware"

読み出し方は同じで、「.env」で宣言した変数名に「process.env.」をつけて呼び出します。

Functionsの場合はあらかじめ組み込まれていない！

Firebaseのファンクション（functions）の場合は、あらかじめ設定されていないため、「dotenv」をインストールして呼び出すようにします。

バックエンドで利用する場合に有効なのが、利用するサービスの秘密鍵（API key / Secrete key）などの情報です。これらの情報は利用者ごとに違うのでそのたびに設定を変更する必要があります。これを、環境変数で定義しておけば、プログラム自体は変更しないで多くの利用者に対応することができます。

このように、「ハードコーディング」を避けるとプログラムの管理が非常に効率的にできるようになります。

Firebaseには独自の環境変数を設定する機能がある！

この「dotenv」を利用した環境変数の設定はとても便利です。実はFirebaseは独自に別の方法で環境変数を設定する方補法を提供してます！この機能は、テスト環境と実際に利用する環境を簡単に切り替えることができるので、「dotenv」の設定と合わせて利用すると便利です。

設定はコマンドラインから行います。

$ firebase functions:config:set [Name].[Subname]="value"

のように設定します。 例えば、以下のように利用します。

$ firebase functions:confg:set Stripe.key="0123456789"

のように設定すると、

$ firebase function:config:get
{
    "Stripe": {
        "key": : "0123456789"
    }
}

のように設定されます。上の例は「get」コマンドで設定を読み取っています。

この情報にプログラムからアクセスする場合は以下のように記述します。

return request({
    headers: {
      'Authorization': `Bearer ${functions.config().Stripe.key}`
    },
  });

また設定を解除したい場合は、

$ firebase functions:config:unset Stripe.key

で設定を削除できます。

この機能の便利なところは、コマンドラインから設定を変更できる点にあります。

例えば、Stripeのオンライン決済サービスの場合、開発用に実際に決済を行わないテスト用の秘密鍵（Secret key）の利用が可能です。この機能を使うと、最初にまずデプロイしてテストモードで機能を確認後に、実際の秘密鍵に置き換えることが可能になります。再度、公開用のイメージを作成しなおして、再度デプロイする必要はありません。

このように上手く利用するととても便利な機能です。

開発用のPCでローカルのサーバーでテストする場合は別途設定が必要です！

この機能便利ですが、コマンドラインで設定した内容は実際のインターネットで稼働しているFirebaseのサーバーに適用されています。これを、テスト用のローカルサーバーで利用するにはFirebaseのプロジェクトフォルダに設定情報が入ったファイル(.runtimeconfig.json)が必要になります。 これは、Firebaseのサーバーに設定されている情報をリダイレクトで取り込んで作成するのが簡単です。

$ firebase functions:config:get > .runtimeconfig.json

Windows Power Shellで実行する場合はリダイレクトの設定が少し違いますので注意してください。 Windows Power Shellで実行する場合は以下のコマンドを実行します。

$ firebase functions:config:get | ac .runtimeconfig.json

また、実際の稼働中の環境とは別に、開発・テスト目的で同じようなプロジェクトを作成した場合は、別のプロジェクトに設定をコピーすることもできます。

$ firebase functions:config:clone --from <fromProject>

コピー先のプロジェクトフォルダで実行します。

まとめ

環境変数を活用するとプログラムの保守性が大きく向上します。 プログラム自体に変更を加えなくても、別の設定での再利用が簡単にできるのが大きな理由です。 Firebaseのバックエンドで環境変数を利用する場合、Firebaseも独自の環境変数の設定機能を提供しています。 これは、稼働中のシステムでも設定の変更が可能なので、うまく活用すると非常に強力な機能です。

テスト用と本番用の機能の切り替えのほかに、デバッグ用のメッセージの表示、非表示の切り替えなどにも利用可能です。実際に稼働中のシステムで問題が起きた場合など、デバッグ用のメッセージを表示できるように切り替えることができると、デバッグにも利用できます。

Firebaseは、実際に活用する本質的な機能の他にも、こうした開発者や運営者を支援するような機能も実装しています。こうした部分もFirebaseを活用する大きなメリットです。

Copyright(c) 2017-2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea...
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。 ...
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text...
続きを読む