我知道这个问题已经被问过无数次了，当我说我已经阅读了Stack Overflow上的页面以及其他网站时，请相信我，并且显然已经阅读了文档。要么是我根本不了解，要么是我想念的愚蠢。
我已经创建了一个React App（使用npx create-react-app）来使用API和fetch API（想像它吗？）来创建一点天气信息服务。都是前端（我还没有开始学习任何后端的东西）。
我的问题是我的.env文件。如前所述，我已经做了大量研究，因此可以（希望）排除以下情况：
我的环境变量文本文件称为'.env'，位于我的根文件夹中（即，与package.json文件以及src和公用文件夹相同的位置）。
在.env文本文件中，变量以'REACT_APP_'为前缀。
我几乎可以肯定所有语法和变量名都是正确的，但这仍然有可能吗？
当我将API密钥直接放入提取中时，所有功能都可以正常运行，但是在尝试从.env文件中获取API密钥时始终不确定。我知道，因为我只是在做前端，并且如果我将API推送/上传到GitHub（或其他），该API在技术上仍然是可见的，即使使用.gitignore，它也不会真正起作用，但是我仍然想要么修复它，要么找出为什么它不适合我自己的内心世界。
据我了解，使用create-react-app时，不需要通过终端安装其他模块/依赖项（不确定正确的术语），因为proccess.env现在已经全部包含在内。据我所知，proccess.env应该可以解决create-react-app的问题吗？
这是我的代码：
App.js
//Created by: Byron Georgopoulos
//Created on: 31/07/2020
//Last Updated on: 03/08/2020
//Description: Using Geolocation API, OpenWeatherMap API, and Fetch API, this React App displays the weather at the user current location,
//and a user can search the OpenWeatherMap database for the weather in (most) cities across the globe.
//Import React
import React, { Component } from 'react';
//Import Fetch API
import 'isomorphic-fetch';
//Styling and React-Bootstrap
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Modal from 'react-bootstrap/Modal';
//Get API key from .env file
const key = process.env.REACT_APP_WEATHER_API_KEY;
console.log('API Key: ', key);
class App extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
userCity: '',
cityInfo: [],
showModal: false,
};
}
//Use Geolocation API to find users co-ordinants
getPos = () => {
return new Promise (function (resolve, reject){
navigator.geolocation.getCurrentPosition(resolve, reject);
});
}
//Get Latitude & Longitude, and search OpenWeatherMap API based on location (coords)
getLocalWeather = async (latitude, longitude) => {
const apiCall = await fetch(`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}&units=metric`);
const result = await apiCall.json();
this.setState({ isLoaded: true });
this.setState({ cityInfo: [result] });
}
//When Component Mounts
componentDidMount() {
this.getPos()
.then((position) => {
this.getLocalWeather(position.coords.latitude, position.coords.longitude)
},
(error) => {
this.setState({
isLoaded: true,
error
});
})
}
//Handle user search
handleCity = (event) => {
let userCity = event.target.value;
this.setState({ userCity: userCity });
}
//Search OpenWeatherMap API for user's city
handleSubmit = () => {
let userCity = this.state.userCity;
this.refs.cityInput.value = '';
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${userCity}&appid=${key}&units=metric`)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
cityInfo: [result],
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
//Opens Help Modal
openModal = () =>
{
this.setState({ showModal: true });
}
//Closes Help Modal
closeModal = () =>
{
this.setState({ showModal: false });
}
render() {
const error = this.state.error;
const isLoaded = this.state.isLoaded;
const cityInfo = this.state.cityInfo;
if (error)
{
return <div>
Error: {error.message}
</div>;
}
else
if (!isLoaded)
{
return <div className='LoadingMsg'>
<br></br>
<h2>Welcome to Open Weather Map API</h2>
<hr></hr>
<h5>Finding your location...</h5>
<h6>Please 'Allow Location Access' in your browser to continue...</h6>
<hr></hr>
<br></br>
</div>;
}
else
{
return (
<div className='App'>
<br></br>
<h2>Open Weather Map API : Find the weather in your city.</h2>
<hr></hr>
<h6>This was created by Byron Georgopoulos for <a href='https://www.hyperiondev.com/' target='_blank'>HyperionDev</a> (L02T14) using
React Components. It uses the <a href='https://openweathermap.org/api' target='_blank'>Open Weather Map API</a> and
the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API' target='_blank'>Geolocation API</a> to first find
your current location and display the weather in your city (if access is allowed by the user), and a search bar to find the weather
for over 200.000 cities worldwide thereafter.</h6>
<hr></hr>
<br></br>
<Container>
<Row>
<Col sm={5}>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<Form id='cityForm'>
<Form.Group>
<Form.Label>Please Enter A City:</Form.Label>
<Form.Control onChange={this.handleCity} type='text' placeholder='e.g. Johannesburg' ref='cityInput' />
<br></br>
<Container>
<Row>
<Col>
<Button onClick={this.handleSubmit} variant='primary'>Search City</Button>
</Col>
<Col>
<Button onClick={this.openModal} id='helpBtn' variant='info'>Help / FAQ</Button>
</Col>
</Row>
</Container>
</Form.Group>
</Form>
</Col>
<Col sm={7}>
{cityInfo.map(item => (
<Card id='weatherCard'>
<Card.Body>
<Card.Title><h3>Weather for <b>{item.name}</b>, {item.sys.country}.</h3></Card.Title>
<hr></hr>
<Card.Text><h5>It is currently: ±{Math.round(item.main.temp)}° C.</h5></Card.Text>
<Card.Text><h5>It feels like: ±{Math.round(item.main.feels_like)}° C.</h5></Card.Text>
<Card.Text><h5>The weather is: {item.weather[0].main}.</h5></Card.Text>
<Card.Text><h5>Sky Description: {item.weather[0].description}.</h5></Card.Text>
<Card.Text><h5>Humidity is at: {item.main.humidity}%.</h5></Card.Text>
<Card.Text><h5>Wind Speed is at: {item.wind.speed}m/s.</h5></Card.Text>
</Card.Body>
</Card>
))}
</Col>
</Row>
</Container>
<br></br>
<hr></hr>
<br></br>
<Modal id='helpModal' show={this.state.showModal} onHide={this.closeModal} animation={true} centered>
<Modal.Body>
<h4 id='modalHeading'>Help : Searching For A City</h4>
<hr></hr>
<Container>
<Row>
<Col sm={1}>
<h6>1. </h6>
</Col>
<Col sm={11}>
<h6>You can only search cities in the input field. No countries, co-ordinates, provinces, states, etc.</h6>
</Col>
</Row>
<Row>
<Col sm={1}>
<h6>2. </h6>
</Col>
<Col sm={11}>
<h6>You can only search a cities FULL NAME. For example, LA ≠ Los Angeles, or JHB ≠ Johannesburg.</h6>
</Col>
</Row>
<Row>
<Col sm={1}>
<h6>3. </h6>
</Col>
<Col sm={11}>
<h6>That being said, searching for a city is NOT case sensitive. For example, los angeles = Los Angeles, or johannesburg = Johannesburg.</h6>
</Col>
</Row>
<Row>
<Col sm={1}>
<h6>4. </h6>
</Col>
<Col sm={11}>
<h6>± : Temperatures are rounded to the nearest whole number.</h6>
</Col>
</Row>
<Row>
<Col sm={1}>
<h6>5. </h6>
</Col>
<Col sm={11}>
<h6>Temperatures are in Degrees Celcius.</h6>
</Col>
</Row>
</Container>
</Modal.Body>
<Modal.Footer>
<Button variant='danger' onClick={this.closeModal}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
}
export default App;
package.json
{
"name": "weather-api",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.5.1",
"es6-promise": "^4.2.8",
"isomorphic-fetch": "^2.2.1",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
.env （在=之前或之后没有空格，没有引号，并且X是我的API密钥）
REACT_APP_WEATHER_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
其他注意事项：
很长的帖子，很抱歉，如果我遗漏了什么。对于所有这一切仍然非常新，尤其是堆栈溢出。谢谢。
答案 0 :(得分：0)
您还应该安装该软件包：
npm i dotenv
答案 1 :(得分：0)
在构建时反应读取/创建env，因此每次修改.env文件时都需要npm run start，以便变量得到更新。
并且您不需要安装任何其他软件包，因为dotenv已经随附了CRA（create-react-app）
您应该使用此
{process.env. REACT_APP_WEATHER_API_KEY}，无论您的密钥存在于何处。
答案 2 :(得分：0)
警告：请勿在您的React应用程序中存储任何秘密（例如私有API密钥）！环境变量已嵌入到内部版本中，这意味着任何人都可以通过检查您应用程序的文件来查看它们。
环境变量是在构建期间嵌入的。由于Create React App会生成静态的HTML / CSS / JS捆绑包，因此它可能无法在运行时读取它们。
注意：您必须创建以REACT_APP_开头的自定义环境变量。除NODE_ENV以外的任何其他变量都将被忽略，以避免意外地在机器上公开可能具有相同名称的私钥。更改任何环境变量将需要您重新启动开发服务器（如果正在运行）。
现在，我们需要创建其他.env文件以支持暂存和生产环境。因此，让我们创建.env.staging和.env.production文件。
所以文件看起来像
// **.env**
REACT\_APP\_TITLE = "My Awesome App"
REACT\_APP\_SESSION\_TIME = "60"
// **.env.staging**
REACT\_APP\_API\_BASE\_URL = "https://app.staging.com/api/"
// **.env.production**
REACT\_APP\_API\_BASE\_URL = "https://app.prod.com/api/"
env-cmd
这是一个简单的节点程序，用于使用环境文件中的环境执行命令。使用以下命令安装此软件包，
**npm install env-cmd**
创建命令以创建特定于环境的内部版本 现在打开您的package.json文件并添加以下脚本，
“脚本”：{ “ start”：“反应脚本开始”， “ start：staging”：“ env-cmd -f .env.staging react-scripts start”， “ start：prod”：“ env-cmd -f .env.production react-scripts start”， “ build”：“反应脚本建立”， “ build：staging”：“ env-cmd -f .env.staging react-scripts build”， “ build：prod”：“ env-cmd -f .env.production react-scripts build”， “ test”：“反应脚本测试”， “ eject”：“反应脚本弹出” }