manbetxapp

从@ nuxtjs / dotenv移动到运行时配置

2020年6月15日9分钟阅读
拍摄者Norris Niman.

是时候从@nuxtjs/dotenv模块迁移到使用我们的新运行时配置了,它已经在next v2.13中发布了。

什么是环境变量

在我们的前端应用程序中,我们经常使用API​​和第三方集成,该集成要求我们使用环境变量通常提供的配置数据。由于所有访问者访问浏览器环境,这些变量不应暴露于前端。相反,我们可以在受密码保护的CI工具或部署管道中存储敏感信息,如键和秘密。但是,当我们在本地开发应用程序时,我们可能无法访问部署管道,因此需要某处存储这些环境变量。

误解

如果将密钥放在源代码之外的地方,比如.env文件,这使得向客户端包公开密钥非常容易。添加你的.env文件到.gitignore.意味着此文件不会被推到您的版本控制,因此如果您的回购是公共的,则无法看到这是一个重要的。但是,.env文件未加密,因此在环境变量中放置秘密并不真正为我们提供安全性,并且真的它只是使敏感数据远离透明的视野。一种.env选项很容易误导开发人员将密钥暴露给客户端包,所以一定要确保将此文件添加到.gitignore中。

为什么我们需要webpack

同构应用程序,也称为通用应用程序,需要在服务器和客户机之间共享代码。Babel是用来编译我们的现代ES6 JavaScript代码到ES5 JavaScript,以便它可以在所有平台上工作。Node.js是一个异步事件驱动的JavaScript运行时,可以在浏览器环境之外的计算机和服务器中使用,它使用模块系统。使用node.js中的模块使用equired.g.需要('lodash')。但是,对模块的浏览器支持仍然不完整,因此我们需要捆绑工具,例如WebPack将这些模块转换为浏览器可以读取的代码。WebPack基本上使客户端开发更加“节点状”,具有相同的模块系统语义。这意味着需要语句或ES6导入语句将同样解析。随着我们的应用程序不仅是JavaScript,而且还可以使用WebPack的加载器来要求这些CSS和图像。

环境变量如何工作

在运行时,Node.js会自动将环境变量加载到process.env.以便在应用程序中使用它们。对环境变量的引用被替换为正确的值。例如,如果你有api_secret.钥匙值“我的秘密”然后在应用程序中使用process.env.API_SECRET这将被我的秘密的价值所取代。值在构建时读取并持久化到webpack包中。因此如果我们改变我们的api_secret.我们需要重新构建应用程序,以便它能够读取新值。

介绍Nuxt.js运行时配置

使用Nuxt.js 2.13+,我们有运行时配置和内置Dotenv支持,提供更好的安全性和更快的开发!您的两个新选项已添加到您的nuxt.config.js文件将允许传递运行时配置,然后可以使用美元配置从上下文。尽管env.选项中,运行时配置被添加到next有效负载中,因此在开发或使用服务器端呈现或单页应用程序时,不需要重新构建以更新运行时配置。不过,对于静态站点,您仍然需要重新生成站点以查看这些更改。

nuxt.config.js
出口默认{publicruntimeconfig{}privateRuntimeConfig{}}

新的运行时配置值是:

  • publicruntimeconfig应该保存所有公开的env变量,因为它们将在前端公开。例如,这可能包括对公共URL的引用。
  • privateRuntimeConfig应该持有私有的所有env变量,不应暴露在前端。例如,这可以包括对API秘密令牌的引用。

⚠️privateDimeConfig始终覆盖服务器端上的publicruntimeConfig。美元配置在服务器模式下是{... public,...私有},但仅用于客户端模式{...公共}

从@nuxtjs/dotenv迁移到Nuxt.js运行时配置

如果你有@ nuxtjs / dotenv安装了模块,然后您可以通过卸载它并从NuxT.Config文件的模块部分删除此模块来删除此模块。然后,您可以通过将新属性添加到umxt.config.js文件来迁移到umxt.js运行时配置。然后你可以从你的变量添加你的变量.env这样Nuxt.js就可以在运行时访问这些变量。如果你的.env文件看起来像这样:

.env
base_url = https://www.lycasleep.com api_secret = 1234

然后将其迁移到新的运行时配置将看起来像:

nuxt.config.js
出口默认{publicruntimeconfig{baseurl.过程env.base_url.}privateRuntimeConfig{apiSecret过程env.api_secret.}}

通过使用默认值,而不是在运行时配置和.env使用非敏感值时的文件。

nuxt.config.js
出口默认{publicruntimeconfig{baseurl.过程env.base_url.||'//www.lycasleep.com'}}

这也是一个更好的替代.env.example.默认值可以指向暂存键/ configs。

nuxt.config.js
出口默认{publicruntimeconfig{baseurl.过程env.node_env.===.“生产”'//www.lycasleep.com''https://dev.www.lycasleep.com'}}

从env属性迁移到Nuxt.js运行时配置

如果您将env变量存储在您的Nuxt.config中,则可以通过将其添加到Nuxt.config文件来迁移这些来使用新的运行时配置。如果你的环境变量在你的下次。配置如下所示:

nuxt.config.js
出口默认{env.{base_url.'//www.lycasleep.com'api_secret.“1234”}}

然后将其迁移到新的运行时配置将看起来像:

nuxt.config.js
出口默认{publicruntimeconfig{baseurl.'//www.lycasleep.com'}privateRuntimeConfig{apiSecret过程env.api_secret.}}

⚠️记住秘密密钥不应放在您的核心文件中,因此如果您确实在您的env变量中有它们,那么您应该删除它们。如果需要,您可以创建.env文件,否则您的秘密密钥可以存储在托管环境中。

env属性v运行时配置

您仍然可以使用env属性,它对于构建时而不是运行时需要的env变量(如NODE_ENV=staging或VERSION=1.2.3)仍然有用。然而,对于运行时env变量,运行时配置是首选的,因为使用env属性可能与使用不正确的dotenv模块一样危险。

使用配置值

在公共或私有运行时配置中存储您的值之后nuxt.config.通过使用页面,存储,组件和插件中的上下文,您可以在任何位置访问这些值美元配置。上下文。$ config反而。

页面/ index.vue
<脚本>Asyncdata.{美元配置{baseurl.}}{const的帖子=等待获取`$ {baseurl.}/职位`然后res.=>res.杰森}脚本>

在您的模板内,您可以直接访问它{{$ config。*}}

页面/ index.vue
<模板><P.>我们的URL是:{{$ config.baseurl}}P.>模板>

在脚本标记中迁移配置值

如果您已经在脚本标记中使用了env变量,例如在异步数据中

异步Asyncdata.{env.}{

然后,当传入上下文时,你可以将env替换为$config。这里我们还传入了我们想要访问的配置中的键。在这里是baseURL。

异步Asyncdata.{美元配置{baseurl.}}{

而不是使用env.apiUrl

const的帖子=等待获取`$ {env.baseurl.}/职位`

你可以在你的代码中直接使用baseURL,因为我们已经把它传递到上面的配置选项中,因此我们不必在我们的fetch中引用$config。

const的帖子=等待获取`$ {baseurl.}/职位`

在模板中迁移配置值

如果您有使用使用env变量的代码,则可以使用$ config选项迁移。例如,如果在您的代码中

<P.>{{process.env.baseURL}}P.>

您可以使用$ config更改此功能

<P.>{{$ config.baseurl}}P.>

展开/插值支持

只有当已经有一个键时,才会展开运行时配置。

.env
api_secret.=1234.
nuxt.config.js
出口默认{privateRuntimeConfig{api_secret.''}}

插值允许嵌套env变量。

.env
base_url.=/ apipublic_url.=//www.lycasleep.com
nuxt.config.js
出口默认{privateRuntimeConfig{baseurl.“$ {PUBLIC_URL} $ {BASE_URL}”}}

ℹ️也可以为publicRuntimeConfig和privateRuntimeConfig使用函数,但不推荐。

最佳实践:

不要将敏感值或密钥提交给git不要在umxt.config或敏感值存储秘密密钥或敏感值.env除非是有趣的✅使用runtimeConfig的默认值,例如process.env.baseurl ||'//www.lycasleep.com'✅使用托管平台(如Heroku或NetWify等)正确存储密钥✅遵循JS的命名约定(secretKey而不是SECRET_KEY)✅更喜欢使用runtimeConfig而不是env.选项

下一步怎么办?

Nuxt env.

NuxtJS通讯

将最新的NuxtJS新闻发送到你的收件箱,由NuxtJS团队策划。