シークレットと環境変数
Amplify Gen 2 は、すべてのフルスタックブランチのシークレットと環境変数を一元管理できます。シークレットを使用すると、ソーシャルサインインキー、関数環境変数、関数シークレット、およびアプリケーションが環境全体で必要とするその他の機密データなど、環境固有の値を安全に構成できます。
FAQこれは Amplify Gen 1 とどう違うのですか?
Amplify Gen 1 では、CLI を使用して環境変数とシークレットを定義し、キーを AWS Parameter Store とローカル team-provider.json ファイルの両方に保存する必要があります。Amplify Gen 2 では、このワークフローを簡素化し、Amplify コンソールでシークレットと環境変数の管理を一元化しました。
シークレットの設定
フルスタックブランチのデプロイメントまたはローカル開発サーバーのシークレットを設定できます。
ブランチ環境
Amplify コンソールでブランチデプロイメント用のシークレットを追加できます。アプリホームページから、ホスティング > シークレットに移動し、シークレットを管理ボタンを選択します。すべてのデプロイされたブランチに適用されるシークレットキーまたは値、または特定のブランチのみに適用されるシークレットを追加できます。
シークレットは AWS Systems Manager Parameter Store に以下の命名規則で保存されます。
- すべてのブランチに適用されるシークレット:
/amplify/shared/<app-id>/<secret-key> - 特定のブランチに適用されるシークレット:
/amplify/<app-id>/<branchname>-branch-<unique-hash>/<secret-key>
ローカル環境
ローカルで機能をテストする場合、実際のシークレットを使用してテストすることをお勧めします。クラウドサンドボックスを実行中に、以下のコマンドを使用してシークレットを追加できます。
npx ampx sandbox secret set foo? Enter secret value: ###Done!
> npx ampx sandbox secret set bar? Enter secret value: ###Done!シークレットへのアクセス
シークレットを設定したら、secret() 関数を呼び出してコード内の値にアクセスできます。次の例は、アプリケーションで認証を使用してソーシャルサインインを設定する方法を示しています。環境に応じて、Amplify は追加設定なしで正しいシークレット値を自動的に読み込みます。
import { defineAuth, secret } from '@aws-amplify/backend';
export const auth = defineAuth({ loginWith: { email: true, externalProviders: { facebook: { clientId: secret('foo'), clientSecret: secret('bar') } } }});シークレットの削除
ブランチ環境
ブランチデプロイメントで使用されるシークレットは、Amplify コンソールで直接管理できます。シークレット管理で削除を選択して削除できます。
ローカル環境
ローカル環境でシークレットを削除するには、ターミナルで以下のコマンドを実行します。
npx ampx sandbox secret remove foo環境変数の設定
環境変数はキーバリューペアとして機能し、開発、ステージング、本番環境を含むさまざまなデプロイメント環境全体で設定可能な設定を管理するのに役立ちます。機密データを保存するシークレットとは異なり、環境変数は通常は非機密であり、異なる環境でのアプリケーション動作の制御に使用されます。もう 1 つの重要な違いは、環境変数が Amplify マネージドサービスによって保存および管理されることです。Amplify コンソールで環境変数を設定できます(詳細な手順については AWS Amplify ホスティングユーザーガイドを参照してください)。
環境変数へのアクセス
フルスタックブランチデプロイメントまたはローカル開発サーバーのために環境変数へのアクセスを有効にできます。
ブランチ環境
Amplify コンソールを通じてブランチ環境アクセスを管理できます。
-
まず、Amplify コンソールで環境変数を作成します(この例では、
REACT_APP_TEST_VARIABLEという名前を付けます) -
次に、コンソールで ビルド設定に移動するか(または
amplify.ymlファイルに移動し)、ビルド設定を更新して環境変数をファイルにパイプします。以下は.envファイルに書き込む例です。
build: commands: - echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env - npm run buildこれで、.env はクライアントコードで process.env を使用して環境変数にアクセスできます。
console.log('REACT_APP_TEST_VARIABLE', process.env.REACT_APP_TEST_VARIABLE);ローカル環境
ローカルマシンで作業する場合、サンドボックスの環境変数を手動で読み込む必要があります。まず、.env.local ファイルに環境変数を追加します。その後、@dotenvx/dotenvx などのライブラリが環境変数を読み込み、process.env で参照できます。
npx dotenvx run --env-file=.env.local -- ampx sandbox