react env

React Env - การกำหนดค่าสภาพแวดล้อมรันไทม์

เติมเต็มสภาพแวดล้อมของคุณจากไฟล์ .env ใน เวลาทำงาน แทนที่จะเป็น เวลาที่สร้างขึ้น

• isomorphic - เซิร์ฟเวอร์และเบราว์เซอร์ที่เข้ากันได้
• รองรับการสร้างไซต์แบบคงที่
• รองรับไฟล์ .env หลายไฟล์

readme

• ตัวอย่าง
• เริ่มต้น
• ลำดับความสำคัญของไฟล์
• กรณีการใช้งานทั่วไป
  • การกำหนดค่าเฉพาะสภาพแวดล้อม
  • การระบุไฟล์ env
  • ใช้กับ Docker Entrypoint
• อาร์กิวเมนต์และพารามิเตอร์

ตัวอย่าง

• ตัวอย่างการใช้ next.js (ดู readme.md)
• ตัวอย่างการใช้แอพสร้างปฏิกิริยา (ดู readme.md)

เริ่มต้น

แพ็คเกจนี้สร้างไฟล์ __ENV.js จากไฟล์. .env หลายไฟล์ที่มีตัวแปรสภาพแวดล้อมสีขาวที่มีคำนำหน้า REACT_APP_

 < script src =" /public/__ENV.js " />

ในเบราว์เซอร์ตัวแปรของคุณจะพร้อมใช้งานที่ window.__ENV.REACT_APP_FOO และบนเซิร์ฟเวอร์ process.env.REACT_APP_FOO เราได้รวมฟังก์ชั่นผู้ช่วยเพื่อให้การดึงค่าง่ายขึ้น:

 # .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "

กลายเป็น ...

 import env from "@beam-australia/react-env" ;

export default ( props ) => (
  < div >
    < small >
      Works in the browser: < b > { env ( "CRA" ) } </ b > .
    </ small >
    < small >
      Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
    </ small >
    < form >
      < input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
    </ form >
    < small >
      Entire safe environment:
      < pre >
        < code > { { JSON . stringify ( env ( ) ) } } </ code >
      </ pre >
    </ small >
  </ div >
) ;

.ENV ลำดับไฟล์ลำดับความสำคัญ

เราได้ใช้ค่าเริ่มต้นที่มีสติซึ่งมีลำดับความสำคัญต่อไปนี้:

1. {path-to-file} // from the --path, -p argument
2. .env.{key} // from the --env, -e argument
3. .env.local
4. .env

การกำหนดค่าของคุณมีอยู่ในเบราว์เซอร์และ process.env บนเซิร์ฟเวอร์ เราขอแนะนำให้คุณเพิ่ม .env.local ถึง .gitignore

กรณีการใช้งานทั่วไป

การกำหนดค่าเฉพาะสภาพแวดล้อม

เฟรมเวิร์กเช่นถัดไปอนุญาตให้มีค่าเริ่มต้นที่ดีเช่น .env.local, .env.production, .env สิ่งนี้มีข้อ จำกัด ที่คุณอาจต้องการเรียกใช้แอพของคุณในสภาพแวดล้อมที่แตกต่างกันเช่น "การจัดเตรียมการรวม QA" แต่ยังคงสร้างแอพ "การผลิต" ด้วย NODE_ENV=production ด้วย react-env สิ่งนี้เป็นไปได้:

 # .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost "

สำหรับการจัดเตรียมคุณจะตั้งค่า APP_ENV=staging ที่คุณเรียกใช้แอพของคุณ:

 {
  ...
  "scripts": {
    "start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
  }
  ...
}

ดังนั้น REACT_APP_API_HOST=api.staging.com ในสภาพแวดล้อมการจัดเตรียมของคุณ

โปรดทราบว่าคุณต้องส่งชื่อตัวแปรสภาพแวดล้อมไปยัง --env ไม่ใช่ค่าของมัน

• ✔การใช้งานที่ถูกต้อง (macOS): APP_ENV=staging react-env --env APP_ENV -- next start
• ความผิดพลาดทั่วไป: react-env --env staging -- next start

การระบุไฟล์ env

คุณยังสามารถระบุเส้นทางไปยังไฟล์ Env เฉพาะ:

 {
  ...
  "scripts": {
    "start": "react-env --path config/.env.defaults -- next start"
  }
  ...
}

คุณสามารถใช้การรวมกันของอาร์กิวเมนต์ทั้งสองนี้พร้อมกับค่าเริ่มต้น .env, .env.local เพื่อสร้างการกำหนดค่ารันไทม์ของคุณ

การระบุคำนำหน้าสำหรับตัวแปรสภาพแวดล้อมสีขาว

คุณยังสามารถระบุคำนำหน้าของตัวแปรสภาพแวดล้อมสีขาว:

 {
  ...
  "scripts": {
    "start": "react-env --prefix NEXT_APP -- next start"
  }
  ...
}

 # .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " 

ใช้คำนำหน้าด้วยความตลกขบขัน

คุณต้องเพิ่มตัวแปร REACT_ENV_PREFIX env ก่อนคำสั่ง jest ถ้าคุณใช้ env() ระหว่างการทดสอบของคุณ:

 {
  ...
  "scripts": {
    "test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
  }
  ...
}

ใช้กับ Docker Entrypoint

เป็นไปได้ที่จะใช้แพ็คเกจนี้เป็นสคริปต์ ENTRYPOINT ภายใน dockerfile สิ่งนี้จะสร้างไฟล์กำหนดค่า __ENV.js ของคุณเมื่อบูทคอนเทนเนอร์และอนุญาตให้ package.json ยังคงไม่เปลี่ยนแปลง แน่นอน node ไบนารีต้องอยู่ในคอนเทนเนอร์ของคุณ

 FROM node:alpine

ENTRYPOINT yarn react-env --env APP_ENV

CMD yarn start

อาร์กิวเมนต์และพารามิเตอร์

$ react-env < args > -- < command >

• <command>

คุณสามารถผ่านคำสั่งเช่นไฟล์รายการ NodeJS ไปยังเครื่องมือ react-env CLI ตัวอย่างเช่น react-scripts , next dev , next start

• --env , -e (ค่าเริ่มต้น: null)

ระบุชื่อของตัวแปรสภาพแวดล้อมที่มีอยู่ซึ่งค่าคือชื่อของสภาพแวดล้อมที่คุณต้องการเพื่อให้ React-ENV แยกวิเคราะห์สภาพแวดล้อมที่เฉพาะเจาะจงของสภาพแวดล้อม ตัวอย่างเช่นคุณสามารถตั้งค่า APP_ENV=staging ก่อนจากนั้นใช้ --env APP_ENV flag React-ENV จะโหลด .env.staging, .env.local, .env ตามลำดับโดยมีลำดับความสำคัญหลัง

• --path , -p (ค่าเริ่มต้น: NULL)

ระบุไฟล์ env เฉพาะเพื่อโหลดเช่น react-env --path .env.testing จะโหลด .env.testing, .env.local, .env ในลำดับนั้นโดยมีลำดับความสำคัญหลัง การรวมกันของ --env APP_ENV --path testing ที่ APP_ENV=staging โหลด .env.testing, .env.staging, .env.local, .env เป็นลำดับความสำคัญ

• --dest , -d (ค่าเริ่มต้น: ./public)

เปลี่ยนปลายทางเริ่มต้นสำหรับการสร้างไฟล์ __ENV.js

• --prefix (ค่าเริ่มต้น: react_app)

เปลี่ยนคำนำหน้าเริ่มต้นสำหรับตัวแปร env สีขาว สำหรับ Expple react-env --prefix CUSTOM_PREFIX จะตัวแปรรายการสีขาวเช่น: CUSTOM_PREFIX_PUBLIC_KEY=my-public-key

• --debug (ค่าเริ่มต้น: false)

เปิดใช้งานการดีบักสำหรับ React-Env สิ่งนี้จะบันทึกตัวแปรสภาพแวดล้อมเบราว์เซอร์ที่โหลดลงในคอนโซลของคุณเมื่อเรียกใช้ react-env --debug

3.xx ทำลายการเปลี่ยนแปลง

---

ในฐานะที่เป็นการเปลี่ยนแปลงที่เกิดขึ้นอย่างมีนัยสำคัญเราได้ลดความสามารถในการระบุไฟล์เฉพาะผ่านอาร์กิวเมนต์ --env ตอนนี้อาร์กิวเมนต์นี้ระบุไฟล์สภาพแวดล้อมที่จะแยกวิเคราะห์ขึ้นอยู่กับสภาพแวดล้อมที่กำลังดำเนินอยู่ ตัวอย่างเช่น --env APP_ENV หรือ -e APP_ENV โดยที่ APP_ENV=staging อ่านใน .env.staging เป็นเรื่องธรรมดามากที่แพลตฟอร์มจะมี staging, qa, integration ที่ยังคงสร้างขึ้นในโหมด "การผลิต" ด้วย NODE_ENV=production สิ่งนี้ช่วยให้ Usecase และอื่น ๆ อีกมากมาย

-คุณยังสามารถระบุไฟล์ผ่านอาร์กิวเมนต์ --path, -p

---

นอกจากนี้เรายังลดการเพิ่ม NODE_ENV โดยค่าเริ่มต้นเนื่องจากเป็นความเสี่ยงด้านความปลอดภัย

---

ตอนนี้ไฟล์ชื่อ __ENV.js

---

คำสั่ง depandand อยู่ในรูปแบบ react-env <args> -- <command>