我无法在 netlify 中访问我的环境变量
I can not access my environment variables in netlify
我用 Gatsby 和 Netlify 编写了一个应用程序。
我在 html.js
中通过环境变量使用 Snipcart public API 密钥( 有测试密钥在 dev 和 prod).
中的 live 密钥
import React from 'react'
import PropTypes from 'prop-types'
export default class HTML extends React.Component {
render() {
return (
<html lang='en' {...this.props.htmlAttributes}>
<head>
<meta charSet='utf-8' />
<meta httpEquiv='x-ua-compatible' content='ie=edge' />
<meta
name='viewport'
content='width=device-width, initial-scale=1, shrink-to-fit=no'
/>
{this.props.headComponents}
{/* Snipcart */}
<script
defer
src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'
/>
<script
defer
src='https://cdn.snipcart.com/scripts/2.0/snipcart.js'
id='snipcart'
data-api-key={process.env.SNIPCART_API_KEY}
/>
<link
href='https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css'
type='text/css'
rel='stylesheet'
/>
</head>
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={'body'}
id='___gatsby'
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
}
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array
}
本地一切都适用于我的 .env.development
和 env.production
。
当我在本地构建和提供应用程序时,我没有遇到任何问题。当我调用时变量是正确的:
process.env.SNIPCART_API_KEY
在 Netlify 中,我在构建参数中指出了我的生产变量:
SNIPCART_API_KEY = PROD_VALUE
但是在站点部署时没有考虑变量。
(.env 文件在 .gitignore 中)
我想我在 Netlify 设置中做错了什么,但我不知道是什么。
站点部署后如何访问此变量?
好的,经过一些研究,我只需要在变量前加上 GATSBY_
。
文档中有更多内容:https://www.gatsbyjs.org/docs/environment-variables/#client-side-javascript
我用 Gatsby 和 Netlify 编写了一个应用程序。
我在 html.js
中通过环境变量使用 Snipcart public API 密钥( 有测试密钥在 dev 和 prod).
import React from 'react'
import PropTypes from 'prop-types'
export default class HTML extends React.Component {
render() {
return (
<html lang='en' {...this.props.htmlAttributes}>
<head>
<meta charSet='utf-8' />
<meta httpEquiv='x-ua-compatible' content='ie=edge' />
<meta
name='viewport'
content='width=device-width, initial-scale=1, shrink-to-fit=no'
/>
{this.props.headComponents}
{/* Snipcart */}
<script
defer
src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'
/>
<script
defer
src='https://cdn.snipcart.com/scripts/2.0/snipcart.js'
id='snipcart'
data-api-key={process.env.SNIPCART_API_KEY}
/>
<link
href='https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css'
type='text/css'
rel='stylesheet'
/>
</head>
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={'body'}
id='___gatsby'
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
}
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array
}
本地一切都适用于我的 .env.development
和 env.production
。
当我在本地构建和提供应用程序时,我没有遇到任何问题。当我调用时变量是正确的:
process.env.SNIPCART_API_KEY
在 Netlify 中,我在构建参数中指出了我的生产变量:
SNIPCART_API_KEY = PROD_VALUE
但是在站点部署时没有考虑变量。 (.env 文件在 .gitignore 中)
我想我在 Netlify 设置中做错了什么,但我不知道是什么。
站点部署后如何访问此变量?
好的,经过一些研究,我只需要在变量前加上 GATSBY_
。
文档中有更多内容:https://www.gatsbyjs.org/docs/environment-variables/#client-side-javascript