在Amazon S3和CloudFront上托管的Vue Quasar应用程序中的管理环境变量 我面临着在S3和CloudFront上托管的静态VUE Quasar应用中使用环境变量的问题。 虽然我确实知道静态网站不应该包括环境变量，但我是

Question

myEnvVariablesFunction

等）。

尽管我已经成功删除了敏感键（例如秘密和访问键）并找到了适当的解决方法来处理它们，但我仍在寻找一个可靠的解决方案来管理键值，例如API基础URL，可以方便地跨不同的不同环境

如果您遇到过类似的问题，我希望能得到您的帮助。

将是一种在Web应用中动态注入环境变量的一种方法，以保持跨环境构建的same

构建，这是我到目前为止发现的最干净的方法。这有点复杂，但是如果您有动力，则以下解决方案是使用

cloudfrontfunctions

使用

cloudfrontkeyValuestore

Answer 1

SECURED

SESSIONSESSIONCOOKIE.。 创建新的云范围函数 名称 选择Cloudfront-js-2.0能够访问kvs.

1. 在下一页上，您可以单击创建新的keyValuestore
   • 名称

     您不需要存储在

     myEnvVariablesKVS
   存储桶中，您可以直接单击
   • S3按钮
创建了，您可以通过单击
2. CreatemyEnvVariablesKVS
   添加以下示例，然后添加以下示例：
   • Add key value pairs

     注意：在进入下一个字段之前，请不要忘记单击“小检查”按钮或按“ Enter”。
     然后，您可以

     Add pair
   并添加另一个示例：

   • - Key: d123.cloudfront.net
     - Value: { "env": "test", "backend": "https://test-mybackend.com", "videos": "https://test-third-party-videos.com" }

     单击

     go tofunctions
   并打开
   Edit
函数

3. 单击

   - Key: dmycloudfrontprodid.cloudfront.net
   - Value: { "env": "prod", "backend": "https://prod-mybackend.com", "videos": "https://prod-third-party-videos.com" }

   ，然后选择

   myEnvVariablesFunction

   在

   Associate existing KeyValueStore

    /

   myEnvVariablesKVS

   选项卡上，您可以粘贴以下代码：
   

   Build
4. the the tab，您可以 在

   Development

   下拉下选择

import cf from 'cloudfront';

async function handler(event) {
    const kvsHandle = cf.kvs();
    const domain = event.context.distributionDomainName;
    var response = event.response;
    var cookies = response.cookies;

    let dataEnv;
    try {
        const value = await kvsHandle.get(domain);
        dataEnv = JSON.parse(value);
    } catch (err) {
        const errorMessage = `Error reading ${domain}: ${err}`;
        console.log(errorMessage);
        return {
            statusCode: 500,
            statusDescription: 'Error',
            body: {
                encoding: 'text',
                message: errorMessage
            }
        };
    }
    if (!cookies) {
        cookies = [];
    }
    const keys = Object.keys(dataEnv);
    for (var i = 0; i < keys.length; i++) {
        cookies[`${keys[i]}`] = {
            "value": `${dataEnv[keys[i]]}`,
            "attributes": "Secure; Path=/"
        }
    }
    return response;
}

5. 单击

   Test
在底部的测试成功运行的the the
6. Viewer response

   上
   

   go在

   Event type

   tab上
7. 单击

   Test function

   按钮
   1. 单击

      Execution result

      按钮 分布：选择您的分发
   2. event类型：选择

      Publish

   3. 漏行为：选择

      Publish function

      注意：此设置与直接在您的分布配置 /
   Add association
   /编辑默认行为 /以及底部选择
Viewer response
8. 中的

   Default (*)

   Behaviors
   1. Viewer response

   2. myEnvVariablesFunction

      中相同
      • 单击

        Add assocation

        按钮

      • 一个人，您应该能够用包含前端环境变量的cookie加载您的网站，此处

        backend

        ，

        env

        和

        videos
      。
      在前端侧，您可以从应用程序中的任何地方获得cookie值，例如：
   3. document.cookie.split('; ').find((row) => row.startsWith('backend='))?.split('=')[1]; 如果您想更新KV中的任何值，则可以进行更新，保存，并且应该能够在一分钟左右的时间内进行更改而无需任何缓存清除。
   一些文档：

官方

amazon cloudfrontkeyvaluestore

文档

CloudFrontKeyValuestore

2023年12月12日介绍了一个URL重定向的演示

另一个Ananthe

demo

用于URLshortener