Redux ซ่อน api key

การซ่อน file api key
1. install dotenv
npm install dotenv --save
2. import dotenv
ไปที่ script/start.js และ script/build.js
เพิ่ม require('dotenv').config();

3. สร้าง file .env ที่ root directory
my-react/.env
เพิ่ม
API_KEY=...
AUTH_DOMAIN=..
DATABASE_URL=..
PROJECT_ID=..
STORAGE_BUCKET=..
MESSAGING_SENDER_ID=..
APP_ID=..

4. แก้ไข config/env.js

{
NODE_ENV: process.env.NODE_ENV || 'development',

PUBLIC_URL: publicUrl,
}


เป็น

{
NODE_ENV: process.env.NODE_ENV || 'development',
API_KEY:process.env.API_KEY,
AUTH_DOMAIN:process.env.AUTH_DOMAIN,
DATABASE_URL:process.env.DATABASE_URL,
PROJECT_ID:process.env.PROJECT_ID,
STORAGE_BUCKET:process.env.STORAGE_BUCKET,
MESSAGING_SENDER_ID:process.env.MESSAGING_SENDER_ID,
APP_ID:process.env.APP_ID,
PUBLIC_URL: publicUrl,
}

5. แก้ไข file constants/configFirebase.js

apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""


เป็น

apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DATABASE_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,

soure code
https://github.com/smitkiller/my-react

web site
https://saralie.web.app/main/more/Redux%20%E0%B8%8B%E0%B9%88%E0%B8%AD%E0%B8%99%20api%20key