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

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

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'

4. 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

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.

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

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

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.developmentvà .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

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"
  }

1. Cài đặt dotenvdưới dạng devDependencies:

npm i --save-dev dotenv

2. 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

3. 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

4. [ 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;

5. 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

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.