FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

React Nativeでキーを隠蔽する

f:id:mbaasdevrel:20180306160753p:plain

mBaaSを操作する際にはアプリケーションキーとクライアントキーを利用します。これらのキーは重要なものであり、コードに直書きするのはお勧めしません。そこで別ファイルなどにキーを書いておくのですが、アプリケーションの実行環境に応じてキーを使い分ける必要もあります。

今回はexpoを使っている場合のキーの隠蔽方法について紹介します。

ファイルの用意

まずキーを記述するファイル(今回は environment.js )を用意します。内容は次の通りです。各環境(開発環境:dev、ステージング:staging、本番環境:prod)ごとに変数を定義します。

import { Constants } from "expo";

const ENV = {
 dev: {
   ncmb: {
     applicationKey: 'b34...01e',
     clientKey: '489...462'
   }
 },
 staging: {
   ncmb: {
     applicationKey: '',
     clientKey: ''
   }
 },
 prod: {
   ncmb: {
     applicationKey: '',
     clientKey: ''
   }
 }
};

const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  if (__DEV__) {
    return ENV.dev;
  } else if (env === 'staging') {
    return ENV.staging;
  } else if (env === 'prod') {
    return ENV.prod;
  }
};

export default getEnvVars;

そして getEnvVars 関数によって、それぞれ必要な環境の変数が得られるようにします。

使い方

使い方は以下のようになります。実行環境ごとに定義した変数が取得できます。

import getEnvVars from './environment';
const config = getEnvVars();
const ncmb = new NCMB(config.ncmb.applicationKey, config.ncmb.clientKey);

ステージングを使う場合

デフォルトで開発環境を使いますが、ステージングを使う場合には次のようにして実行します。

expo publish --release-channel staging

リリースビルドする場合

リリースは本番環境を利用しますので、次のように実行します。

expo build:ios --release-channel prod
expo build:android --release-channel prod

コード

SDKはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。

まとめ

environment.js は .gitignore を使ってバージョン管理の対象外にしておくと安全でしょう。重要なキーを隠蔽する際のテクニックとしてお使いください。

via Environment Management in Expo | Alex Martinez

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。