在 React.js 中使用环境变量
Managed Runtime 环境变量允许您将变量添加到环境中运行的应用程序进程,而无需更改代码。环境变量被安全存储,使其非常适合以下用例:
- 调用受 API 密钥保护的第三方资源
- 有条件地更改 React.js 渲染
有关详细信息,请参阅环境变量。
在本教程中,我们将在不更改代码的情况下使用环境变量更改 React.js 渲染。您可以通过 process.env
访问环境变量,这仅在 Node.js 中可用,在浏览器中不可用。PWA Kit 渲染是同构的,因为它在客户端和服务器上渲染。因此,要使环境变量在 React.js 中可用,您可以将它们添加到PWA Kit配置文件中,如本教程所示。
在此示例中,我们将使用环境变量在您的站点上启用功能。例如,在有限的时间内,您可以测试一项新功能,例如快速结账。然后,您可以监控购物者对该功能的参与度,以了解其影响。
要完成本教程,首先:
- 获取对 Managed Runtime 和 Runtime Admin 的访问权限。请参阅 Managed Runtime 管理。
- 拥有使用 Managed Runtime API 的 API 密钥。要查找您的 API 密钥,请登录 Runtime Admin 工具并转到帐户设置页面。
- 在要为其设置环境变量的项目中具有开发人员或管理员角色。如果您没有访问权限,请具有 Managed Runtime 管理员角色的人员为您提供帮助。
在运行本教程中的命令之前,请将所有占位符替换为实际值。占位符的格式如 $PLACEHOLDER
。
在您的项目中,创建您选择的内容或功能。例如,在主页上创建主推横幅。
-
要在当前会话中设置环境变量,请打开终端并运行以下命令:
- Windows:
set ENABLE_FEATURE='true'
- 大多数类 Unix 操作系统,包括 macOS:
export ENABLE_FEATURE=‘true’
- Windows:
-
通过运行以下命令检查环境变量是否设置正确:
- Windows:
echo %$ENABLE_FEATURE%
- 大多数类 Unix 操作系统,包括 macOS:
echo $ENABLE_FEATURE
该命令返回以下输出:
true
- Windows:
-
将此 JavaScript 代码添加到项目 — 的配置文件中
config/default.js
:
- 将此 JavaScript 代码添加到项目 — 的主页
app/pages/home/index.jsx
:
- 使用
npm start
启动开发服务器,然后在本地导航到主页以查看渲染的功能。
建议在非生产环境中测试这些步骤,然后再将更改部署到生产环境。
在运行本教程中的命令之前,请将所有占位符替换为实际值。占位符的格式如 $PLACEHOLDER
。
- 使用 cURL 调用 projects_target_env_var_partial_update API 端点,并将功能标志设置为环境变量。这将部署您的捆绑包。等待环境重新部署,然后再在您的代码中使用环境变量。您还可以使用 Runtime Admin 来管理环境变量。请参阅环境变量。
- 将捆绑包从本地计算机部署到所选环境。