使用部署在GitHub页面上的Gatsby网站中的环境变量

Question

说明

我正在尝试在GitHub页面上部署的Gatsby站点中使用环境变量，但它仅在本地工作，而不在实时站点上工作。显然，这是因为Gatsby需要一个.env.production文件来访问变量。如何使用GitHub工作流程创建此代码并维护变量的保密性，使其不会公开显示？

我已经阅读了这个相关问题，但无法弄清楚如何将其转换为与我的情况相关的代码。 How to use environment variables in Github Page?

复制步骤

我在github存储库设置中添加了一个秘密变量，创建了一个工作流文件，以便可以将其作为环境变量进行访问，在我的gatsby-config.js文件中添加了dotenv要求和路径配置，然后部署了网站使用npm运行deploy。

可以从.env.development文件在本地访问环境变量，但是不能在已部署的站点上访问。下面是我一直想弄清楚的github repo。链接指向我在dev分支上的最新提交，因此可以更轻松地找到我试图在哪里启动并运行带有环境变量的工作流。

https://github.com/spk2dc/spk2dc.github.io/tree/62d6078dffba4feb1ec3fd85c952e10eb0787017

预期结果

可在GitHub页面上部署的实时Gatsby网站访问环境变量，并保持变量的保密性。

环境

System:  
OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)  
CPU: (2) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz  
Shell: 4.4.20 - /bin/bash  
Binaries:  
Node: 14.6.0 - /usr/local/bin/node  
Yarn: 1.22.5 - /usr/bin/yarn  
npm: 6.14.8 - /usr/local/bin/npm  
Languages:  
Python: 2.7.17 - /usr/bin/python  
Browsers:  
Chrome: 85.0.4183.121  
npmPackages:  
gatsby: ^2.4.2 => 2.24.50  
gatsby-image: ^2.0.41 => 2.4.16  
gatsby-plugin-feed: ^2.2.0 => 2.5.11  
gatsby-plugin-google-analytics: ^2.0.19 => 2.3.13  
gatsby-plugin-manifest: ^2.4.21 => 2.4.24  
gatsby-plugin-netlify: ^2.0.17 => 2.3.13  
gatsby-plugin-offline: ^2.1.0 => 2.2.10  
gatsby-plugin-postcss: ^2.0.7 => 2.3.11  
gatsby-plugin-purgecss: ^3.1.1 => 3.1.1  
gatsby-plugin-react-helmet: ^3.0.12 => 3.3.10  
gatsby-plugin-sharp: ^2.6.24 => 2.6.28  
gatsby-remark-copy-linked-files: ^2.0.12 => 2.3.12  
gatsby-remark-images: ^2.0.6 => 2.0.6  
gatsby-remark-prismjs: ^3.2.9 => 3.5.11  
gatsby-remark-responsive-iframe: ^2.1.1 => 2.4.12  
gatsby-remark-smartypants: ^2.0.9 => 2.3.10  
gatsby-source-filesystem: ^2.0.33 => 2.3.25  
gatsby-transformer-remark: ^2.3.12 => 2.8.29  
gatsby-transformer-sharp: ^2.5.12 => 2.5.13  
npmGlobalPackages:  
gatsby-cli: 2.12.87  

Answer 1

您无需在生产环境中推送.env文件，只需在Secrets菜单选项中将密钥添加到存储库中即可：

然后，您只需通过在代码中调用process.env.REACT_APP_APIKey之类的环境变量即可将Gatsby应用程序链接到这些环境变量。

当然，我建议添加一个.env.development并通过gatsby build程序在本地测试您的变量。

此外，请记住，您需要在GATSBY_前面加上Environment variables documentation所解释的浏览器需要访问的所有那些变量。