如何正确引用秘密环境变量（process.env.secrets）

Question

我已经设置了一个 AWS amplify 应用程序并导入了我的 github 项目（一个使用 Vue/Vite 和 Supabase 作为数据库的 Web 应用程序）。

为了保护我的 supabase 地址和密钥，我将这两个值存储在秘密环境变量中，如下所述：官方文档

我使用了 AMPLIFY_SIWA_CLIENT_ID 和 AMPLIFY_SIWA_PRIVATE_KEY 变量，并为我的 supabase 项目输入了各自的值。

当我构建项目时，构建成功运行，并且我在后端过程中看到终端消息：

[INFO]: # Retrieving environment cache...
[INFO]: # Retrieved environment cache
[INFO]: ---- Setting Up SSM Secrets ----
[INFO]: SSM params {"Path":"/amplify/[MY_PROJECT_ID]/staging/","WithDecryption":true}
[INFO]: No live updates for this build run

在我的应用程序中，我导入 process.env.secrets 文件：

import { createClient } from '@supabase/supabase-js'

interface Secrets {
    AMPLIFY_SIWA_CLIENT_ID?: string;
    AMPLIFY_SIWA_PRIVATE_KEY?: string;
}

let secrets: Secrets = {};
if (process.env.secrets) {
    secrets = JSON.parse(process.env.secrets);
}

const supabaseUrl = secrets.AMPLIFY_SIWA_CLIENT_ID;
const supabaseAnonKey = secrets.AMPLIFY_SIWA_PRIVATE_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error("Supabase URL or Anon Key is missing");
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

当我运行此程序时，网站会加载，但随后崩溃，并显示找不到该进程的错误消息。

我希望 process.env.secret 文件在构建期间可用，并且我可以简单地导入它，如上所示。您知道如何缩小范围吗？

Answer 1

好吧，在再次查看文档并使用 ChatGPT 后，我找到了一种可行的方法。

首先，我的 AWS Amplify 构建设置在构建时缺少秘密变量的正确导出，这是正确的命令（注意，我已经为名为“staging”的应用程序创建了一个后端，您可以在下面的调用中看到）：

build:
      commands:
        - export VITE_APP_SUPABASE_URL=$(aws ssm get-parameter --name "/amplify/[MY_PROJECT_ID]/staging/VITE_APP_SUPABASE_URL" --with-decryption --query "Parameter.Value" --output text)
        - export VITE_APP_SUPABASE_ANON_KEY=$(aws ssm get-parameter --name "/amplify/[MY_PROJECT_ID]/staging/VITE_APP_SUPABASE_ANON_KEY" --with-decryption --query "Parameter.Value" --output text)
        - yarn run build
        - npm run build

其次，Vite 需要 .env 变量在标准配置中以“VITE_”开头，因此我在 Prameter Store 中创建了新的 Secretstring 变量。最后，需要上面显示的 --with-decryption 语法来获取解密的字符串。