Dodawanie pliku .env do projektu React

94

Próbuję ukryć mój klucz API, gdy zdecyduję się na github, i przejrzałem forum w poszukiwaniu wskazówek, szczególnie następujący post:

Jak ukryć klucz API w aplikacji create-react-app?

Wprowadziłem zmiany i ponownie uruchomiłem przędzę. Nie jestem pewien, co robię źle –– Dodałem .envplik do katalogu głównego projektu (nazwałem go process.env) i do pliku, który właśnie umieściłem REACT_APP_API_KEY = 'my-secret-api-key'.

Myślę, że może to być sposób, w jaki fetchdodaję klucz do mojego w App.js i próbowałem wielu formatów, w tym bez użycia literału szablonu, ale mój projekt nadal się nie kompiluje.

Każda pomoc jest bardzo ceniona.

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

Bianca M
źródło
zamiast process.envnazywać go .env.local or .env.process i przechowywać poza katalogiem src
RIYAJ KHAN
1
Cześć @RIYAJKHAN Zmieniłem plik na .env.local i jest zdecydowanie poza katalogiem src, ale nadal otrzymuję REACT_APP_API_KEY nie jest zdefiniowany: /
Bianca M
2
Naprawiło to po prostu zamknięcie terminala, na którym działa mój lokalny serwer deweloperski i ponowne uruchomienie npm run start.
n00bAppDev
3
Nie możesz ukrywać tajemnic w aplikacji Reaguj. Zobacz stackoverflow.com/a/46839021/4722345
JBallin
5
NIE używaj tego do przechowywania sekretów. Z dokumentacji ...WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
Nishant Mehta

Odpowiedzi:

112

4 kroki

  1. npm install dotenv --save

  2. Następnie dodaj następujący wiersz do swojej aplikacji.

    require('dotenv').config()

  3. Następnie utwórz .envplik w katalogu głównym aplikacji i dodaj do niego zmienne.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'
  1. Na koniec dodaj .envdo swojego.gitignore pliku, aby Git go zignorował i nigdy nie trafiał na GitHub.

Jeśli używasz aplikacji create-react-app , potrzebujesz tylko kroku 3 i 4, ale pamiętaj, że zmienna musi zacząć się od zmiennej REACT_APP_, aby działała.

Odniesienie: https://create-react-app.dev/docs/adding-custom-environment-variables/

UWAGA - Konieczność ponownego uruchomienia aplikacji po dodaniu zmiennej w pliku .env.

Źródła - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

tarzen chugh
źródło
36
po dodaniu zmiennej do pliku .env trzeba zrestartować aplikację .use "REACT_APP_" przed nazwą zmiennej, jeśli tworzysz aplikację do reagowania za pomocą "create-react-app".
Vikash
@tarzen chugh co zrobić, jeśli na przykład wdrażam moją aplikację na AWS. Skoro .env jest częścią gitignore, czy nie zostanie zignorowany? jak mogę zabrać się do włączenia produkcji?
user2763557
2
gdzie dodać require('dotenv').config()? który plik?
aqteifan
1
@aqteifan u nie musisz dodawać tego fragmentu, ale nazewnictwo plików .ENV odgrywa kluczową rolę
testowano
1
@ user2763557 wzorzec, którego używam, to utworzenie .env.examplepliku, w którym są ułożone definicje kluczy env. Następnie możesz skopiować .env.examplei utworzyć .envplik (w fazie rozwoju i produkcji) zawierający prawidłowe wartości, np. Klucze, podstawowe adresy URL itp. Musisz dodać .envplik do .gitignore.
Adis Azhar
88

Jestem więc nowy w React i znalazłem sposób, aby to zrobić.

To rozwiązanie nie wymaga żadnych dodatkowych pakietów.

Krok 1 ReactDocs

W powyższych dokumentach wspominają o eksporcie w Shell i innych opcjach, ta, którą spróbuję wyjaśnić, to użycie pliku .env

1.1 Utwórz plik Root / .env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Ważne uwagi MUSI zaczynać się od REACT_APP_

1.2 Dostęp do zmiennej ENV

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 Problem dotyczący budowania koperty

Więc po wykonaniu kroku 1.1 | 2 nie działało, wtedy znalazłem powyższy problem / rozwiązanie. React read / create env, gdy jest skompilowany, więc musisz uruchomić npm start za każdym razem, gdy modyfikujesz plik .env, aby zmienne zostały zaktualizowane.

T04435
źródło
7
Moim zdaniem to poprawna odpowiedź! Żadne dodatkowe pakiety nie są potrzebne i właściwy sposób Reacta na importowanie zmiennych środowiskowych. Inne sposoby będą działać, ale po co dodawać pakiet i konfigurację kodu, skoro jest to już zrobione za Ciebie? Świetna odpowiedź!
ryanm
12
Brakowało mi tego, REACT_APP_dziękuję. Żadna inna osoba o tym nie wspomniała.
rotimi-best
Z jakiegoś powodu to nie zadziałało. Dostajęundefined
Si8
@ Si8 czy mógłbyś rozwinąć swój błąd / proces. Który krok undefinedwykonałeś, czy zrestartowałeś aplikację po dodaniu nowej zmiennej do .env patrz 1.3
T04435
1
Próbowałem wszystkiego. process.env.REACT_APP_API_KEYmówi undefined.
Michale Rezene,
36

Dziś jest na to prostszy sposób.

Po prostu utwórz plik .env.local w swoim katalogu głównym i ustaw tam zmienne. W Twoim przypadku:

REACT_APP_API_KEY = 'my-secret-api-key'

Następnie nazywasz go swoim plikiem js w ten sposób:

process.env.REACT_APP_API_KEY

React obsługuje zmienne środowiskowe od czasów [email protected]. Nie potrzebujesz do tego zewnętrznego pakietu.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

* uwaga: proponuję .env.local zamiast .env, ponieważ create -ago-app dodaje ten plik do gitignore podczas tworzenia projektu.

Priorytet plików:

npm start: .env.development.local, .env.development, .env.local, .env

npm run build: .env.production.local, .env.production, .env.local, .env

npm test: .env.test.local, .env.test, .env (brak pliku .env.local)

Więcej informacji: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Pablo
źródło
Odpowiednie nazewnictwo wykonało pracę za mnie. Użyłem .env.dev i React wróciłem do .env, ponieważ szukałem .env.development
Omnibyte
26

Użytkownicy pakietu Webpack

Jeśli używasz webpacka, możesz zainstalować i używać dotenv-webpackwtyczki, aby to zrobić, wykonaj poniższe czynności:

Zainstaluj pakiet

yarn add dotenv-webpack

Utwórz .envplik

// .env
API_KEY='my secret api key'

Dodaj do webpack.config.jspliku

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Użyj go w swoim kodzie jako

process.env.API_KEY

Aby uzyskać więcej informacji i informacji o konfiguracji, odwiedź tutaj

Aminu Kano
źródło
jeśli używasz webpack-devserver, nie zobaczysz zmian, dopóki go nie zrestartujesz.
Isaac Pak
To było dla mnie najlepsze rozwiązanie. Dzięki. Jedna uwaga: używam renderowania po stronie serwera, więc musiałem zaktualizować oba pliki webpacka (również klienta).
Jorge Mauricio
@Aminu Kano, czy mógłbyś mi wyjaśnić, jaki jest sens korzystania z tego podejścia, jeśli klucz api jest nadal widoczny, jeśli przeglądam plik bundle.js online w źródłach?
Linas M.
@LinasM. tak, jasne, ale co masz na myśli mówiąc „online”?
Aminu Kano
1
@AminuKano, Tak, to bardzo jasno wyjaśniło sprawę. Dziękuję
Linas M.
10

1. Utwórz plik .env plik w folderze głównym

niektóre źródła preferują użycie .env.developmenti.env.production ale nie jest to obowiązkowe.

2. Nazwa Twojej VARIABLE -mus- zaczynać się od REACT_APP_YOURVARIABLENAME

wydaje się, że jeśli twoja zmienna środowiskowa nie zaczyna się w ten sposób, będziesz miał problemy

3. Dołącz swoją zmienną

aby dołączyć zmienną środowiskową, wystarczy umieścić w kodzie process.env.REACT_APP_VARIABLE

Nie musisz instalować żadnych zewnętrznych zależności

Carlos
źródło
Robię to samo, ale w konsoli widać undefined
PRADIP GORULE
1
Jeśli otrzymujesz wartości jako niezdefiniowane, dokonaj ponownej kompilacji.
anonim
po ponownej kompilacji nadal jest niezdefiniowany. console.log('process', process.env.REACT_APP_BASE_URL);
Sanat Gupta
8

Musisz zainstalować npm install env-cmd

Utwórz .env w katalogu głównym i zaktualizuj w ten sposób & REACT_APP_ jest obowiązkowym przedrostkiem dla nazwy zmiennej.

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

Zaktualizuj plik package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
Ankit Kumar Rajpoot
źródło
7
  1. Zainstaluj dotenvjako devDependencies:
npm i --save-dev dotenv
  1. Utwórz .envplik w katalogu głównym:
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
  1. Zaktualizuj .envplik jak poniżej & REACT_APP_ jest obowiązkowym prefiksem dla nazwy zmiennej.
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
  1. [ Opcjonalne, ale dobra praktyka ] Teraz możesz utworzyć plik konfiguracyjny do przechowywania zmiennych i wyeksportować zmienną, aby móc jej używać z innych plików.

Na przykład utworzyłem plik o nazwie base.jsi zaktualizowałem go jak poniżej:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
  1. Lub możesz po prostu wywołać zmienną środowiskową w pliku JS w następujący sposób:
process.env.REACT_APP_BASE_URL
Fatema T. Zuhora
źródło
Jak rozróżnić środowiska deweloperskie i prod, używając tylko jednego .envpliku? Zdaję sobie sprawę, że musimy tworzyć .env.developmenti .env.prodpliki, ale jak rozróżnić je za pomocą Twojej metody?
ameyaraje
@ameyaraje Zasadniczo ignorujemy .envplik w naszym .gitignore. Dlatego podczas wdrażania po prostu kopiujemy .envplik na nasz serwer i po prostu zmieniamy BASE_URL i inne niezbędne wartości. W ten sposób, gdy musi on wdrożyć najnowszy kod, po prostu ściągamy z git master i wdrażamy go. Nie myślimy o tym, .envbo go ignorujemy i na samym początku ustawiamy go na naszym serwerze. Dzięki!
Fatema T. Zuhora
process.env.REACT_APP_API_KEY nie podaje wartości pokazującej undefined. Zatrzymałem serwer i zrestartowałem go z npm start
vikramvi
@vikramvi Czy umieszczasz wartość w zmiennej o takiej samej nazwie REACT_APP_BASE_URLw pliku .env?
Fatema T. Zuhora
@ FatemaT.Zuhora to był mój błąd, przez pomyłkę umieściłem .env w katalogu podrzędnym zamiast umieścić go w katalogu głównym
vikramvi
2

Jeśli otrzymujesz wartości jako undefined, powinieneś rozważyć ponowne uruchomienie serwera węzłów i ponowną kompilację.

anonim
źródło