Thêm tệp .env vào Dự án React


84

Tôi đang cố ẩn API Key của mình khi tôi cam kết với github và tôi đã xem qua diễn đàn để được hướng dẫn, đặc biệt là bài đăng sau:

Làm cách nào để ẩn khóa API trong ứng dụng tạo?

Tôi đã thực hiện các thay đổi và bắt đầu lại sợi. Tôi không chắc mình đang làm gì sai –– Tôi đã thêm một .envtệp vào thư mục gốc của dự án của mình (tôi đã đặt tên nó process.env) và trong tệp tôi vừa đặt REACT_APP_API_KEY = 'my-secret-api-key'.

Tôi nghĩ rằng đó có thể là cách tôi thêm khóa fetchvào App.js của mình và tôi đã thử nhiều định dạng, bao gồm cả việc không sử dụng chữ mẫu, nhưng dự án của tôi vẫn sẽ không biên dịch.

Bất kỳ sự giúp đỡ nào cũng được đánh giá cao.

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);
     });
}


thay vì process.envtên nó .env.local or .env.process và giữ nó bên ngoài của thư mục src
RIYAJ KHAN

1
Hi @RIYAJKHAN Tôi đã thay đổi tập tin để .env.local và nó chắc chắn bên ngoài thư mục src, nhưng tôi vẫn nhận REACT_APP_API_KEY không được định nghĩa: /
Bianca M

1
Điều đã khắc phục sự cố cho tôi chỉ đơn giản là đóng thiết bị đầu cuối đang chạy máy chủ nhà phát triển cục bộ của tôi và chạy lại npm run start.
n00bAppDev

3
Bạn không thể ẩn bí mật trong ứng dụng phản ứng. Xem stackoverflow.com/a/46839021/4722345
JBallin

5
KHÔNG sử dụng điều này để lưu trữ bí mật. Từ tài liệu ...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

Câu trả lời:


97

4 bước

  1. npm install dotenv --save

  2. Tiếp theo, thêm dòng sau vào ứng dụng của bạn.

    require('dotenv').config()

  3. Sau đó, tạo một .envtệp tại thư mục gốc của ứng dụng của bạn và thêm các biến vào đó.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'
  1. Cuối cùng, thêm .envvào .gitignoretệp của bạn để Git bỏ qua nó và nó không bao giờ kết thúc trên GitHub.

Nếu bạn đang sử dụng create-react-app thì bạn chỉ cần bước 3 và 4 nhưng hãy nhớ rằng biến cần bắt đầu REACT_APP_để nó hoạt động.

Tham khảo: https://create-react-app.dev/docs/adding-custom-enosystem-variables/

LƯU Ý - Cần khởi động lại ứng dụng sau khi thêm biến trong tệp .env.

Tham khảo - https://medium.com/@thejasonfile/using-dotenv-package-to-create-enosystem-variables-33da4ac4ea8f


34
cần khởi động lại ứng dụng sau khi thêm biến trong tệp .env. sử dụng "REACT_APP_" trước tên biến nếu bạn tạo ứng dụng phản ứng bằng "create-react-app".
vikash

@tarzen chugh điều gì xảy ra nếu tôi đang triển khai ứng dụng của mình lên AWS chẳng hạn. Vì .env là một phần của gitignore, nó sẽ không bị bỏ qua chứ? làm thế nào tôi có thể bắt đầu đưa nó vào sản xuất?
user2763557

@vikash Đây là nó cho tôi, bình luận nhỏ lớn tác động
Benyam Ephrem

tôi thêm vào require('dotenv').config()đâu? tập tin nào?
aqteifan

@aqteifan bạn không cần thêm đoạn mã đó, nhưng sau đó, việc đặt tên tệp .ENV đóng một vai trò quan trọng
Đã kiểm tra vào

83

Vì vậy, bản thân tôi là người mới làm quen với React và tôi đã tìm ra cách để làm điều đó.

Giải pháp này không yêu cầu bất kỳ gói bổ sung nào.

Bước 1 ReactDocs

Trong các tài liệu trên, họ đề cập đến xuất trong Shell và các tùy chọn khác, cái mà tôi sẽ cố gắng giải thích là sử dụng tệp .env

1.1 tạo Root / .env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Lưu ý quan trọng nó PHẢI bắt đầu bằng REACT_APP_

1.2 Truy cập biến 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 Build Env Issue

Vì vậy, sau khi tôi thực hiện bước 1.1 | 2, nó không hoạt động, sau đó tôi tìm thấy vấn đề / giải pháp ở trên. React read / create env khi được xây dựng nên bạn cần chạy npm start mỗi khi bạn sửa đổi tệp .env để các biến được cập nhật.


7
Theo tôi, đây là câu trả lời chính xác! Không cần gói bổ sung và cách React thích hợp để nhập các biến môi trường. Các cách khác sẽ hoạt động, nhưng tại sao phải thêm một gói và cấu hình mã khi điều này đã được thực hiện cho bạn? Câu trả lời chính xác!
ryanm

12
Tôi đã bỏ lỡ điều này REACT_APP_cảm ơn bạn. Không có người khác đề cập đến nó.
rotimi-best

Điều này không hiệu quả với tôi vì một số lý do. Tôi nhận đượcundefined
Si8

@ Si8 bạn có thể mở rộng về lỗi / quy trình của bạn. Bước nào bạn có undefined, bạn đã khởi động lại ứng dụng sau khi thêm một biến mới để .env thấy 1.3
T04435

@ T04435 cảm ơn vì câu trả lời này, người bạn đời đã làm việc như thể sự quyến rũ REACT_APP_là chìa khóa ở đây. Ngoài ra, làm cách nào để cấu hình cho các máy chủ khác nhau mà tôi có dev / beta / production, tôi có cần phải có các tệp env khác nhau cho mỗi máy chủ không?
Kannan T

33

Ngày nay có một cách đơn giản hơn để làm điều đó.

Chỉ cần tạo tệp .env.local trong thư mục gốc của bạn và đặt các biến ở đó. Trong trường hợp của bạn:

REACT_APP_API_KEY = 'my-secret-api-key'

Sau đó, bạn gọi nó với tệp js của bạn theo cách đó:

process.env.REACT_APP_API_KEY

React hỗ trợ các biến môi trường kể từ react-scripts@0.5.0. Bạn không cần gói bên ngoài để làm điều đó.

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

* lưu ý: Tôi đề xuất .env.local thay vì .env vì create-react-app thêm tệp này vào gitignore khi tạo dự án.

Ưu tiên tệp:

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

npm chạy bản dựng: .env.production.local, .env.production, .env.local, .env

kiểm tra npm: .env.test.local, .env.test, .env (lưu ý là thiếu .env.local)

Thông tin thêm: https://facebook.github.io/create-react-app/docs/adding-custom-enosystem-variables


Đặt tên thích hợp đã làm công việc cho tôi. Tôi đã sử dụng .env.dev và React đã quay trở lại .env khi nó đang tìm kiếm .env.development
Omnibyte

25

Người dùng Webpack

Nếu bạn đang sử dụng webpack, bạn có thể cài đặt và sử dụng dotenv-webpack plugin, hãy làm theo các bước sau:

Cài đặt gói

yarn add dotenv-webpack

Tạo một .envtệp

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

Thêm nó vào webpack.config.jstệp

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

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

Sử dụng nó trong mã của bạn như

process.env.API_KEY

Để biết thêm thông tin và thông tin cấu hình, hãy truy cập tại đây


nếu bạn đang sử dụng webpack-devserver, bạn sẽ không thấy các thay đổi cho đến khi khởi động lại.
Isaac Pak

Đây là giải pháp tốt nhất cho tôi. Cảm ơn. Một lưu ý: Tôi đang sử dụng kết xuất phía máy chủ, vì vậy tôi phải cập nhật cả hai tệp webpack (máy khách cũng vậy).
Jorge Mauricio

@Aminu Kano, bạn có thể vui lòng giải thích cho tôi điểm của việc sử dụng phương pháp này là gì nếu api-key vẫn hiển thị nếu tôi xem tệp pack.js trực tuyến trong các nguồn không?
Linas M.

@LinasM. vâng, chắc chắn, nhưng bạn hiểu "trực tuyến" là gì?
Aminu Kano

1
@AminuKano, Vâng, điều đó đã giải thích vấn đề rất rõ ràng. Cảm ơn bạn
Linas M.

9

1. Tạo tệp .env trên thư mục gốc của bạn

một số nguồn thích sử dụng .env.development.env.productionnhưng điều đó không bắt buộc.

2. Tên VARIABLE của bạn -phải- bắt đầu bằng REACT_APP_YOURVARIABLENAME

có vẻ như nếu biến môi trường của bạn không bắt đầu như vậy thì bạn sẽ gặp vấn đề

3. Bao gồm biến của bạn

để bao gồm biến môi trường của bạn, chỉ cần đặt mã của bạn process.env.REACT_APP_VARIABLE

Bạn không phải cài đặt bất kỳ phụ thuộc bên ngoài nào


Tôi làm điều tương tự nhưng nó hiển thị không xác định trong bảng điều khiển
PRADIP GORULE

Tôi có thể xác nhận rằng. Điều này không hoạt động.
Giả thuyết

1
Nếu bạn nhận được các giá trị là không xác định, hãy biên dịch lại.
nặc danh

8

Bạn phải cài đặt npm install env-cmd

Tạo .env trong thư mục gốc và cập nhật như thế này & REACT_APP_ là tiền tố bắt buộc cho tên biến.

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

Cập nhật package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

6
  1. Cài đặt dotenvdưới dạng devDependencies:
npm i --save-dev dotenv
  1. Tạo một .envtệp trong thư mục gốc:
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
  1. Cập nhật .envtệp như bên dưới & REACT_APP_ là tiền tố bắt buộc cho tên biến.
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
  1. [ Tùy chọn nhưng thực hành tốt ] Bây giờ bạn có thể tạo tệp cấu hình để lưu trữ các biến và xuất biến để có thể sử dụng nó từ tệp khác.

Ví dụ: tôi đã tạo một tệp có tên base.jsvà cập nhật nó như dưới đây:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
  1. Hoặc bạn có thể chỉ cần gọi biến môi trường trong tệp JS của mình theo cách sau:
process.env.REACT_APP_BASE_URL

Làm thế nào để bạn phân biệt giữa môi trường dev và prod khi chỉ sử dụng một .envtệp duy nhất ? Tôi biết chúng ta cần tạo .env.development.env.prodtệp, nhưng làm cách nào để phân biệt giữa chúng bằng phương pháp của bạn?
ameyaraje

@ameyaraje Về cơ bản, chúng tôi bỏ qua .envtệp của chúng tôi .gitignore. Vì vậy, khi triển khai, chúng tôi chỉ sao chép .envtệp vào máy chủ của mình và chỉ cần thay đổi BASE_URL và các giá trị cần thiết khác. Theo cách này, khi nó cần triển khai mã mới nhất, chúng tôi chỉ cần lấy từ git master và triển khai nó. Chúng tôi không nghĩ về việc .envchúng tôi đang bỏ qua nó và đặt nó trong máy chủ của chúng tôi ngay từ đầu. Cảm ơn!
Fatema T. Zuhora

process.env.REACT_APP_API_KEY không cung cấp giá trị hiển thị không xác định. Tôi đã dừng máy chủ và khởi động lại với npm start
vikramvi

@vikramvi Bạn có đặt giá trị vào một biến có tên giống REACT_APP_BASE_URLtrong tệp .env không?
Fatema T. Zuhora

@ FatemaT.Zuhora, đó là lỗi của tôi, tôi đã đặt nhầm .env vào thư mục con thay vì đặt nó trong thư mục gốc
vikramvi

0

Nếu trong trường hợp bạn nhận được các giá trị là undefined, thì bạn nên xem xét khởi động lại máy chủ nút và biên dịch lại.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.