🐈

Nuxt3+Amplifyで環境変数を設定・呼び出す

2023/03/04に公開

Amplify

Nuxt 3

tech

こんな人向け

.envに環境変数を設置し、process.env.VARIABLEでVARIABLEを呼び出そうとしてみたけど上手くいかないぞ...となった人
localhostでは環境変数を設定できたけど、いざAmplifyへデプロイしようとして手が止まった人

`.env`に環境変数を設定

ルート配下に、.envファイルを作成し、以下のように環境変数を記入します。

PRIVATE_KEY = "xxxxx"
PUBLIC_KEY = "yyyyy"

Nuxt3で環境変数を設定

Nuxt3では、上記の環境変数をprocess.env.PRIVATE_KEYで呼び出すことはできません。

`nuxt.config.ts`に`runtimeConfig`を設置

export default defineNuxtConfig({
  runtimeConfig: {
    privateKey: process.env.PRIVATE_KEY,
    public: {
      publicKey: process.env.PUBLIC_KEY,
    },
  },  
})

runtimeConfigのなかで、そのまま定義すると非公開（サーバーサイドのみから呼べる）、publicの中で定義すると公開（クライアントサイドのみから呼べる）となります。

サーバーサイドとは、server/api配下などで記述されているコードです。
クライアントサイドとは、app.vueやpages配下などで記述されているコードです。

クライアントサイドから環境変数を呼び出す

pages配下のvueファイル等で呼び出すときは、typescriptの中で

const config = useRuntimeConfig();

を呼び出し、config.PUBLIC_KEYのようにして使用します。
先にも述べたように、nuxt.config.tsのpublicに記載してある環境変数のみが呼び出せます。

サーバーサイドから環境変数を呼び出す

例えばwebhook等を使用する際、server/api配下にtypescriptファイルを設置します（←サーバーサイドの説明）。ここで環境変数を呼び出す際も

const config = useRuntimeConfig();

を呼び出し、config.PRIVATE_KEYのようにして使用します。
nuxt.config.tsのpublicに記載してある環境変数は呼び出せません。

Credentialsを呼び出したい

.envの環境変数とは別に、.aws配下に記載してあるような、Amplifyのcredentialsが必要になる場合もあると思います（aws-sdkを使う場合など）。

localhostで試す場合

npm install @aws-sdk/credential-providers

でインストールして、

import { fromIni } from "@aws-sdk/credential-provider-ini";

const credentials = await fromIni({ profile: "profile-name" })();

とすると、

credentials.accessKeyId
credentials.secretAccessKey

というかんじで呼び出せます。
ここでprofile-nameは、.aws/configで記載しているprofileの名前です。

本番環境

上記の方法は本番環境では使えません。デプロイしても、セキュリティ上の問題があるのでAmplifyに止められます。下に書いたように、AWS System ManagerかAWS Secrets Managerを使います。

Amplify側で環境変数を設定

Publicな環境変数

.envの情報はgitignoreしてあるはずなので（そのためにベタ書きではなく環境変数として設定しているはずなので）、デプロイしたときには当然それらの情報はAmplify上にありません。

公開可能な（publishable~などの名前が付いている）キーやIDについては、Amplify consoleに行って、「環境変数」→「変数の管理」で.envの内容を書き込みます。

Privateな環境変数

AWS System ManagerかAWS Secrets Managerを使います。
AWS Secrets Managerは、実際に使ったことがないのでパスします。

AWS System Managerを使うには、まずnpmかyarnで以下をインストールをします。

npm install @aws-sdk/client-ssm
yarn add @aws-sdk/client-ssm

ブラウザからAWS System Managerにアクセスし、パラメーターストアで値をセットします。
- パラメータの名前は /amplify/[アプリID]/[環境の名前]/[パラメータ名] の形にします。環境の名前は、devとかprodとかです。パラメータ名は任意です。
- タイプは、安全な文字列（SecureString）にしておきます。
クライアントサイドでもサーバーサイドでも、以下のようにしてパラメーターストアで保存した値を取得できます。

import { SSMClient, GetParameterCommand } from "@aws-sdk/client-ssm";

const client = new SSMClient({ region: 'ap-northeast-1' }); //リージョンを適切に設定してください
const command = new GetParameterCommand({
Name: '/amplify/[アプリID]/[環境の名前]/[パラメータ名]', // AWS System Managerで作成したパラメータストアのパス
WithDecryption: true, // trueに設定すると、暗号化された値を復号化できます
});
const { Parameter } = await client.send(command);
const secretAPIKey = Parameter.Value;

パラメーターストアで、値をJSON形式で書いておけば、上記の呼び出しから複数の環境変数を一度に取得することができます。その場合は、JSON.parseを使って

const { firstKEY, secondKEY } = JSON.parse(Parameter.Value);

というようにして取得します。{ firstKEY, secondKEY }は、それぞれパラメーターストア内で記述したJSONのキーです。