Stripe Appsの環境変数を本番・テスト・ローカル環境でそれぞれ設定する

この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 17日目の記事です。

昨日の記事で少し紹介しましたが、Stripe Appsでは環境ごとに定数や設定を変更できます。

また、environmentプロパティを利用して、本番環境・テスト環境の区別も可能です。

この記事では、本番・開発・ローカルの３環境で値を切り替える方法を紹介します。

ローカル環境とテスト・本番環境で値を変更する方法

まずはローカル環境とそれ以外での切り替え方を確認しましょう。

stripe-app.jsonで、定数を設定する

stripe-app.jsonを編集して、constantsを追加しましょう。

    "actions": [],
    "content_security_policy": {
      "connect-src": [
        "https://api.publicapis.org/"
      ],
      "image-src": null,
      "purpose": "Load api data"
    }
  },
  "post_install_action": null,
+  "constants": {
+    "API_BASE": "https://api.publicapis.org"
+  }
}

stripe-app.local.jsonを生成する

ローカル環境のプレビューでは、stripe-app.jsonを上書きする設定ファイルが作れます。

stripe-app.local.jsonを作成し、次のように設定しましょう。

{
  "extends": "stripe-app.json",
  "ui_extension": {
    "content_security_policy": {
      "connect-src": ["http://localhost:3000/api/"]
    }
  },
  "constants": {
    "API_BASE": "http://localhost:3000/api"
  }
}

　作成したマニフェストファイルで、プレビュー環境を立ち上げる

Stripe CLIで、ローカル環境用のマニフェストファイルを指定して、アプリを起動させましょう。

$ stripe ap start --manifest ./stripe-app.local.json 
[18:58:04] ERROR ./stripe-app.local.json
found violations for connect-src "http://localhost:3100/api/": protocol has to be https, publicsuffix: cannot derive eTLD+1 for domain "localhost"
[18:58:04] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview First Stripe App in your Stripe account.

environmentを利用して、上書きした環境変数にアクセスする

src/views/以下に作成したコンポーネントファイルで、environmentプロパティから値を受け取ります。

import { useEffect, useState } from 'react'
+import { ExtensionContextValue } from "@stripe/ui-extension-sdk/context"

...

-const App = () => {
+const App = ({environment}: ExtensionContextValue) => {
  const [items, setItems] = useState<Array<PublicAPI>>([])

  useEffect(() => {
  useEffect(() => {
-    fetch("https://api.publicapis.org/entries")
+    fetch(`${environment?.constants.API_BASE}/entries`)

この方法で、「ローカル環境では、APIをlocalhostにする」ことや「ローカル環境では、開発者ごとに割り当てられたAPIキーを利用する」ことなどが可能です。

テスト環境と本番環境で値を変更する方法

続いてテスト環境と本番環境で設定や値を変更する方法を確認しましょう。

environmentプロパティを利用して、環境を判定する

environmentプロパティには、「テスト環境か本番環境か」を判定するためのmodeが含まれています。

この値を利用することで、「Stripeダッシュボード内のリンクを、テスト・本番環境で変更する」などの実装が可能です。

  const createInvoiceLink = [
    environment.mode === "test" ? "test" : null,
    "invoices/create"
  ].filter(Boolean).join("/")

environmentを利用した、３環境での変数切り替え方法

最後に、この2つの方法を組み合わせて、本番・開発・ローカルの３環境で値を切り替える方法を紹介します。

変化する値を、environment.constantsから取得させる

ローカル環境での変更に対応するため、対象となる値はすべてenvironment.constantsから取得します。

この際、本番環境用のプロパティを{変数名}_LIVEなどで設定しましょう。

stripe-app.json

    "actions": [],
    "content_security_policy": {
      "connect-src": [
        "https://api.publicapis.org/"
      ],
      "image-src": null,
      "purpose": "Load api data"
    }
  },
  "post_install_action": null,
+  "constants": {
+    "API_BASE": "https://api.publicapis.org",
+    "API_BASE_LIVE": "https://api.publicapis.org"
+  }
}

stripe-app.local.json

{
  "extends": "stripe-app.json",
  "ui_extension": {
    "content_security_policy": {
      "connect-src": ["http://localhost:3000/api/"]
    }
  },
  "constants": {
    "API_BASE": "http://localhost:3000/api",
+    "API_BASE_LIVE": "http://localhost:3000/api"
  }
}

stripe-app.local.jsonで_LIVEを使用することはありませんが、念の為同じ値を設定します。

environment.modeで本番・テスト環境を判別する

あとは変数を取得する際に、environment.modeでAPI_BASEとAPI_BASE_LIVEどちらを利用するかを判定しましょう。

const App = ({environment}: ExtensionContextValue) => {
  const apiURL = environment.mode === "test" ? environment?.constants.API_BASE : environment?.constants.API_BASE_LIVE

これでテスト・本番環境での値の切り替えをenvironment.modeで行いつつ、ローカル環境では--manifestオプションによる値の上書きが行えます。

Stripe Appsひとりアドベントカレンダー 2022

今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。

そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。

ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。