Si hallas alguna incompatibilidad en tu código o trabajo, recuerda probar siempre en un ambiente de testing antes añadir el código al trabajo final.
Solución:
Desafortunadamente, mantener cualquier key en su cliente React, incluso si está usando gitignore y un .env archivo, no es seguro. Como señaló @ClaudiuCreanga, las variables de entorno de React están integradas en la compilación y son de acceso público.
Realmente solo deberías guardar API keys o secretos en su backend como Node/Express. puedes tener tu cliente enviar una solicitud a su API de back-end, que luego puede realizar la llamada API real con la API key y envíe los datos a su cliente.
Descargo de responsabilidad
ADVERTENCIA: No almacene ningún secreto (como una API privada). keys) en su aplicación React!
Las variables de entorno están integradas en la compilación, lo que significa que cualquiera puede verlas al inspeccionar los archivos de su aplicación.
La siguiente respuesta proporciona la forma correcta de almacenar datos no secretos en variables de entorno. Recuerde que se puede acceder a los datos secretos a través de las herramientas del desarrollador, lo que hace que no sea seguro almacenarlos como variables de entorno. Si desea almacenar algunos datos secretos, almacenarlos en el backend es una mejor opción y si el cliente desea acceder a los datos secretos, puede acceder a ellos mediante una solicitud al servidor. (Consulte la respuesta de @Antonia para obtener más detalles sobre el almacenamiento de datos secretos).
Resulta que create-react-app tiene algunas funciones integradas para ayudarte con eso. Gracias George Karametas por esta idea. Para acceder a esa funcionalidad, necesita:
1. Cree un archivo llamado .env en la raíz del directorio de su proyecto.
- your_project_folder
- node_modules
- public
- src
- .env <-- create it here
- .gitignore
- package-lock.json
- package.json
2. Dentro del .env archivar, anteponer REACT_APP_ a tu API key nombre de su elección y asígnelo.
Él create-react-app usos de herramientas REACT_APP_ identificar estas variables. Si no inicia su API key nombre con eso, create-react-app no lo veré
// .env
REACT_APP_API_KEY=your_api_key <-- yes
API_KEY=your_api_key <-- no
// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456
3. Agrega el .env archivo a su .gitignore expediente.
Después de agregar la línea a continuación, guarde el .gitignore archivar y hacer un git status para asegurarse de que su .env El archivo no aparece como un archivo nuevo en git.
// .gitignore
# api keys
.env <-- add this line
# dependencies
/node_modules
...
4. Accede a la API key mediante el process.env objeto.
Para comprobar que puede acceder a su API keyir a tu App.js archivar y agregar un console.log en la parte superior debajo de la require declaraciones. Después de guardar el archivo y volver a cargar la página, si el registro de la consola no muestra su API key, intente reiniciar el servidor de reacción. Asegúrese de eliminar la línea de registro de la consola antes de confirmar su código.
// src/App.js
import React, Component from 'react';
import './App.css';
console.log(process.env.REACT_APP_WEATHER_API_KEY)
class App extends Component {
...
ADVERTENCIA
A menos que esté creando aplicaciones de tutoriales, no ponga secretos como API keys en el código fuente del lado del cliente (por ejemplo, la aplicación React). De la documentación de Create React App:
ADVERTENCIA: No almacene ningún secreto (como una API privada). keys) en su aplicación React!
Las variables de entorno están integradas en la compilación, lo que significa que cualquiera puede verlas al inspeccionar los archivos de su aplicación.
Primero, cree un archivo .env en la raíz de su proyecto, es decir, donde ejecutaría react-scripts start (o yarn start) fuera de su carpeta src.
Luego añade
REACT_APP_WEATHER_API_KEY=123456
Antes de confirmar, debe excluir este archivo .env, así que busque el archivo .gitignore y agregue .env.
El nombre de la variable debe comenzar con REACT_APP_ que lo protege de incluir accidentalmente secretos con su compilación.
No olvide agregar .env en el archivo .gitignore.
Para usar las variables env en su código:
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
Para leer variables env después de haberlas agregado a .envreinicie su servidor.
Si te sientes motivado, eres capaz de dejar una sección acerca de qué le añadirías a esta reseña.