Tengo una aplicación React que utiliza dos servicios de terceros. La aplicación se comenzó a usarreact-create-app.

Ambos servicios requieren una clave API.

Se proporciona una clave a través de una etiqueta de script, como esta:

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

La otra clave API se usa en una solicitud. Guardo la clave real en una constante y la uso para formar la solicitud. Me gusta esto:

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

De Googleconsejos de mejores prácticas sobre el manejo de claves API dice:

No incrustar claves API directamente en el código

Esto me lleva a mi primera pregunta:

1. Cómo usar variables enindex.html?

En miindex.html archivo, tengo dos etiquetas que se ven así:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Obviamente,%PUBLIC_URL%es una variable ¿Cómo puedo agregar una variable%MY_KEY% como para evitar incrustar la clave API directamente en mi código?

Para obtener algo como esto:

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

En relación con esta pregunta, ¿es seguro tener la clave API almacenada de forma constante, como lo hago paraMY_OTHER_KEY?

Google también dice:

No almacene claves API en archivos dentro del árbol fuente de su aplicación

Esto me lleva a mi segunda pregunta:

2. ¿La clave API todavía no termina en el paquete?

Digamos que hago lo que Google dice y yo

... almacénelos en variables de entorno o en archivos fuera del árbol fuente de su aplicación

Digamos que guardo una clave en un archivo externo. Supongo que ese archivo se leerá en algún momento y su contenido se copiará en el paquete o se referenciará de alguna otra manera. Al final, ¿la clave aún no será visible en el paquete, excepto que tal vez sea más difícil de encontrar? ¿Cómo ayuda esto exactamente?

3. ¿Existe una forma canónica de usar claves API en una aplicación de reacción? ¿O depende del desarrollador individual?

Autoexplicativo, estoy buscando la forma de reaccionar para resolver este problema, si hay uno.

¡Gracias por tu ayuda!