API 密钥在使用 create-react-app 构建的 HEROKU 应用程序中不起作用
API Key not working in HEROKU app built with create-react-app
我刚刚在 HEROKU 上部署了一个 React 应用程序（该应用程序是由 create-react-app 制作的）。
我的应用文件在 Github 上，我将 HEROKU 设置为指向那个 github 存储库。
我的应用使用 API 密钥。通常（当我在本地启动项目时）从根级别的 .env 文件访问 API 密钥，我使用 dotenv 包访问它。但是我没有将这个 .env 文件提交给 github（.env 在 gitignore 中）。
我知道 HEROKU 需要知道这个 API 密钥。因此，我转到了我的 HEROKU 应用程序的设置页面，并在那里添加了 API 键。但是我不确定我这样做是否正确，因为 API 不工作。
这就是我在 HEROKU 的设置中输入 API 键的方式（我也尝试过仅使用 REACT_APP_LASTFM_API_KEY - 而不是 process.env. 在它之前）：
这就是 API 键在应用程序中的使用方式（变量是 process.env。REACT_APP_LASTFM_API_KEY）
const url = `http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${artist}&api_key=${process.env.REACT_APP_LASTFM_API_KEY}&format=json`;
在 Heroku 设置中声明的环境变量特定于 Heroku 本身 运行 的进程。
由于您的应用程序将 运行 在客户端的浏览器上，因此 React 应用程序将在客户端的浏览器中查找这些环境变量。
Heroku 的唯一工作是托管和提供静态文件。 Heroku 提供的这些静态文件必须嵌入这些环境变量，这正是 CRA react-script 为您所做的。
请注意，这不仅仅适用于 Heroku，Azure 或云也是如此 运行。
我刚刚在 HEROKU 上部署了一个 React 应用程序（该应用程序是由 create-react-app 制作的）。
我的应用文件在 Github 上，我将 HEROKU 设置为指向那个 github 存储库。
我的应用使用 API 密钥。通常（当我在本地启动项目时）从根级别的 .env 文件访问 API 密钥，我使用 dotenv 包访问它。但是我没有将这个 .env 文件提交给 github（.env 在 gitignore 中）。
我知道 HEROKU 需要知道这个 API 密钥。因此，我转到了我的 HEROKU 应用程序的设置页面，并在那里添加了 API 键。但是我不确定我这样做是否正确，因为 API 不工作。
这就是我在 HEROKU 的设置中输入 API 键的方式（我也尝试过仅使用 REACT_APP_LASTFM_API_KEY - 而不是 process.env. 在它之前）：
这就是 API 键在应用程序中的使用方式（变量是 process.env。REACT_APP_LASTFM_API_KEY）
const url = `http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${artist}&api_key=${process.env.REACT_APP_LASTFM_API_KEY}&format=json`;
在 Heroku 设置中声明的环境变量特定于 Heroku 本身 运行 的进程。
由于您的应用程序将 运行 在客户端的浏览器上，因此 React 应用程序将在客户端的浏览器中查找这些环境变量。
Heroku 的唯一工作是托管和提供静态文件。 Heroku 提供的这些静态文件必须嵌入这些环境变量，这正是 CRA react-script 为您所做的。
请注意，这不仅仅适用于 Heroku，Azure 或云也是如此 运行。