2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズのTwilioエバンジェリストの高橋です。

Twilio Flex Advent Calendar 2021 16日目の記事です。

シナリオ

Flexプラグインを使っていて、外部のAPIサービスなどを利用したい場合に、APIキーを環境変数として扱いたいことが結構あります。
Reactで環境変数を扱うには、dotenv-webpack - npmを利用するのが一般的で、Flexプラグインでもこちらを使います。
ただ、Flexプラグインでは、webpack.config.jsが以下のようになっています。

module.exports = (config, { isProd, isDev, isTest }) => {
  /**
   * Customize the webpack by modifying the config object.
   * Consult https://webpack.js.org/configuration for more information
   */

  return config;
};

うーん。これにpluginsを追加するにはどうしたらいいのかしらん。
というのがこの記事の主題です。

ハンズオン

dotenvライブラリのインストール

dotenvライブラリは、Webpackの中で使われるので、以下のようにしてインストールします。

% npm i -D dotenv-webpack

これでpackage.jsonのdevDependenciesに追加されます。

.envファイルを作成する

Flexプラグインフォルダの直下に.envという名前でファイルを作成します。
中に変数を記載するのですが、このときに変数名の頭にFLEX_APP_もしくはREACT_APP_を指定しないとWebPack実行時に以下のメッセージが出てしまいます。

Unsupported variable XXXXXXXXXXXX provided in .env file. Variables must start with either FLEX_APP_ or REACT_APP_.

なので、以下のように先頭にプレフィックスを付けるようにしましょう。

.env

FLEX_APP_API_KEY=XXXXXXXXXXXXXXXX

webpack.config.jsの変更

最後にwebpack.config.jsファイルを修正します。

const DotEnvWebpack = require('dotenv-webpack');
module.exports = (config, { isProd, isDev, isTest }) => {
  /**
   * Customize the webpack by modifying the config object.
   * Consult https://webpack.js.org/configuration for more information
   */

  const envPath = '.env';
  config.plugins.push(
    new DotEnvWebpack({
      path: envPath,
    }),
  );
  return config;
};

こんな感じで設定すればOKです。

環境変数の読み込み

プラグインのソースコード内から環境変数を読み込むには、以下のようにコーディングします。

const API_KEY = process.env.FLEX_APP_API_KEY;

ビルド

twilio flex:plugins:startもしくは、twilio flex:plugins:buildを実行すると、WebPackが実行されるので、環境変数が利用できるようになります。

環境変数を切り替える

たとえば、開発用、ステージング用、本番用と環境を複数利用している場合についても説明します。

まずは、環境ごとに.envファイルを作成します。たとえば、今回のように開発用、ステージング用、本番用の3つを作る場合は、

.env.dev
.env.stage
.env.prod

のように、それぞれ別の環境設定ファイルを作成します。

このとき、.envファイルが残ったままですと、それが優先的に利用されてしまうので、.envは削除して、それぞれの環境ごとにファイルを作成するようにしましょう。

webpack.config.js は以下のように記述します。

webpack.config.js

const DotEnvWebpack = require('dotenv-webpack');
module.exports = (config, { isProd, isDev, isTest }) => {
  /**
   * Customize the webpack by modifying the config object.
   * Consult https://webpack.js.org/configuration for more information
   */
  // We dynamically change the path to the .env that contains the file corresponding to our profile
  let envPath;
  switch (process.env.TWILIO_PROFILE) {
    case 'StageProfile':
      envPath = '.env.stage';
      break;
    case 'ProductionProfile':
      envPath = '.env.prod';
      break;
    default:
      envPath = '.env.dev';
  }
  // If path was set, use the dotenv-webpack to inject the variables
  if (envPath) {
    config.plugins.push(
      new DotEnvWebpack({
        path: envPath,
      }),
    );
  }
  return config;
};

ビルドやデプロイするときに、以下のようにそれぞれの環境ごとの Twilio プロファイルを指定することで、それぞれの環境変数が読み込まれるようになります。

ステージング用のビルド

twilio flex:plugins:build -p StageProfile

本番用のビルド

twilio flex:plugins:build -p ProductionProfile

StageProfileやProductionProfileは、事前にtwilio profiles:createで作成しておく必要があります。

まとめ

Twilioのドキュメントにも同様の記載がありますが、プロファイルで切り替えする必要がない場合は、上記のようにシンプルに実装することもできます。
また、FlexプラグインでWebPackのオプションを使いたいときなども今回の手法が役に立つかもしれません。

★次の記事
Flexプラグイン Tips（顧客住所を地図表示）

Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilioは音声通話、メッセージング（SMS/チャット）、ビデオなどの様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウドAPIサービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

自己紹介

高橋克己（Katsumi Takahashi）自称「赤い芸人」
グローバル・インターネット・ジャパン株式会社　代表取締役
株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト

2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。
2019 Twilio Champions