Vercel: ตัวแปรสภาพแวดล้อมเมื่อไม่มี .env ใน Git

คู่มือนี้มีไว้สำหรับโปรเจกต์ที่โฮสต์บน Vercel อยู่แล้ว คุณต้องมีสิทธิ์เข้าถึงการตั้งค่าและเข้าใจว่าแอปพลิเคชันอ่านตัวแปรใดบ้าง ตัวอย่างด้านล่างใช้กับ Next.js; ไม่สามารถนำชื่อตัวแปรจากเฟรมเวิร์กอื่นมาใช้โดยอัตโนมัติได้ คู่มือนี้อ้างอิงเอกสารทางการ แต่ยังไม่ได้ทดสอบกับบัญชีจริง

ดูข้อมูลการใช้งาน Ailoot ในทางปฏิบัติได้ในเอกสาร

ทำไมจึงไม่จำเป็นต้องเพิ่ม .env ลงใน Git#

ตัวแปรสภาพแวดล้อมคือการตั้งค่าที่มีชื่อและค่า ซึ่งแอปพลิเคชันได้รับแยกจากซอร์สโค้ด ตัวอย่างเช่น ชื่อ SERVICE_API_KEY ช่วยให้โปรแกรมเข้าถึงค่าคีย์ของบริการภายนอกได้ อย่าใส่คีย์จริงไว้ในคู่มือ บทสนทนากับเอเจนต์ หรือ repository

Next.js โหลดตัวแปรจากไฟล์ .env* ในเครื่องได้ อย่างไรก็ตาม ไฟล์ในเครื่องกับการตั้งค่าโปรเจกต์ใน Vercel เป็นคนละตำแหน่งกัน หากไม่ได้ push ไฟล์ไปยัง repository ให้ตั้งค่าต่าง ๆ แยกกันบนแพลตฟอร์มโฮสติ้ง เทมเพลตมาตรฐานของ create-next-app จะเพิ่มไฟล์ .env ลงใน .gitignore; เอกสาร Next.js เตือนว่าแทบไม่ควร push ไฟล์เหล่านี้ไปยัง repository

หากยังไม่แน่ใจว่าสามารถเก็บอะไรไว้ในไฟล์ซอร์สได้ ให้เริ่มจากการตรวจสอบความปลอดภัยสำหรับโปรเจกต์ที่สร้างด้วย AI ส่วนคู่มือนี้ตอบคำถามที่แคบกว่า คือจะตั้งค่าคอนฟิกสำหรับ deployment บน Vercel รายการใดรายการหนึ่งได้ที่ไหน

ขั้นแรก ให้ระบุว่าแอปพลิเคชันอ่านตัวแปรจากที่ใด#

ก่อนกรอกค่า ให้ทำรายการ ชื่อ โดยไม่ใส่ secrets เอง สำหรับแต่ละชื่อ คุณต้องระบุให้ได้สามอย่าง: ใช้กับ environment ใด โค้ดที่อ่านตัวแปรทำงานที่ใด และต้องใช้ค่าเมื่อใด

Environment Development มีไว้สำหรับการพัฒนาในเครื่อง Preview ใช้กับ preview deployment และ Production ใช้กับเวอร์ชันหลักที่เผยแพร่แล้ว Preview อาจมีการตั้งค่าสำหรับ Git branch เฉพาะ ซึ่งจะใช้แทนการตั้งค่า Preview ทั่วไปที่มีชื่อเดียวกัน

ในโปรเจกต์ Next.js ตัวแปรที่ไม่มี NEXT_PUBLIC_ จะพร้อมใช้บนเซิร์ฟเวอร์ตามค่าเริ่มต้น คำนำหน้า NEXT_PUBLIC_ ช่วยให้ฝังค่านั้นไว้ใน JavaScript ที่ส่งไปยังเบราว์เซอร์ได้ วิธีนี้เหมาะกับการตั้งค่าที่เปิดเผยต่อสาธารณะอย่างชัดเจน เช่น ป้ายกำกับเวอร์ชันที่ไม่ใช่ความลับ แต่ไม่เหมาะกับคีย์ API ส่วนตัว แม้ไม่มีคำนำหน้านี้ โค้ดแอปพลิเคชันก็ต้องไม่ส่ง secret กลับไปยังไคลเอนต์ด้วยตนเอง

หากยังระบุเฟรมเวิร์กไม่ได้ ให้ขอให้เอเจนต์ตรวจสอบจากไฟล์โปรเจกต์ การเปรียบเทียบ Astro กับ Next.js ช่วยให้เข้าใจความแตกต่างได้ แต่ไม่สามารถใช้กฎ NEXT_PUBLIC_ กับแอป React ทุกตัวได้

การตั้งค่าโฮสติ้งเป็นหนึ่งในงานที่เกี่ยวข้องกับการทำงานบนแอปพลิเคชันร่วมกับเอเจนต์ AI

วิธีเพิ่มตัวแปรในโปรเจกต์ Vercel#

ทำตามขั้นตอนในแดชบอร์ดทางการด้วยตนเอง อย่าให้คีย์จริงแก่เอเจนต์เพื่อกรอกแบบฟอร์ม และอย่าแนบภาพหน้าจอที่มีค่าคีย์ปรากฏอยู่

1. เปิดแดชบอร์ด Vercel แล้วเลือก โปรเจกต์ที่ถูกต้อง อย่าอาศัยเพียงชื่อ repository ที่ตรงกัน ให้ตรวจสอบว่าคุณกำลังตั้งค่าแอปพลิเคชันที่ต้องการเปิดจริง
2. ไปที่ Environment Variables ในแถบด้านข้างของการตั้งค่าโปรเจกต์
3. ในช่อง Name ให้ใส่ชื่อที่แอปพลิเคชันอ่าน เช่น SERVICE_API_KEY ชื่อนี้เป็นเพียงตัวอย่าง หากโค้ดต้องการชื่ออื่น ให้ใช้ตัวสะกดตรงตามนั้น
4. ในช่อง Value ให้ใส่ค่าจากที่จัดเก็บข้อมูลรับรองของคุณ อย่าใส่ค่านี้ในซอร์สโค้ด แชต หรือบันทึกการตรวจสอบ
5. เลือก environment ที่ต้องใช้การตั้งค่านี้ ใช้ Preview เพื่อตรวจสอบเวอร์ชัน preview และใช้ Production สำหรับเวอร์ชันหลัก อย่ากำหนด secret รายการเดียวให้ทุก environment โดยอัตโนมัติ
6. หากการตั้งค่า Preview ใช้กับ branch เฉพาะ ให้ตรวจสอบ branch ที่เลือกและการตั้งค่า override ใด ๆ ที่มีชื่อเดียวกัน
7. คลิก Save

Vercel ทำให้ตัวแปรของโปรเจกต์ใช้ได้ทั้งระหว่าง build และเมื่อ Vercel Functions ฝั่งเซิร์ฟเวอร์ทำงาน อย่างไรก็ตาม การที่ค่าใช้ได้ภายใน Vercel ไม่ได้หมายความว่าสามารถส่งไปยังเบราว์เซอร์ได้ เรื่องนี้ขึ้นอยู่กับโค้ดแอปพลิเคชันและกฎของเฟรมเวิร์ก

ทำไมจึงต้อง deploy ใหม่หลังจากกด Save#

การบันทึกตัวแปรไม่ได้เปลี่ยน deployment ที่มีอยู่ เอกสาร Vercel ระบุว่าต้อง deploy โปรเจกต์ใหม่เพื่อให้การตั้งค่าใหม่มีผลกับเวอร์ชันที่คุณใช้งาน

เมื่อทำงานผ่าน Git คุณสร้าง Production deployment ใหม่ได้โดย push commit ไปยัง branch ที่ระบุใน Production Branch และสร้าง Preview deployment ได้โดย push ไปยัง branch อื่น อย่าคิดว่า branch หลักจะชื่อ main เสมอไป ให้ตรวจสอบการตั้งค่าของโปรเจกต์ นี่ควรเป็นการเผยแพร่โปรเจกต์ตามปกติที่ตกลงกันไว้ โดยไม่เพิ่มไฟล์ secret ลงใน commit

หลังเริ่ม deployment แล้ว ให้รอจน build เสร็จและเปิด URL ของ deployment ใหม่ จด URL, environment และ branch ไว้ หากตรวจสอบ URL เก่าของ deployment รายการหนึ่ง การตั้งค่าใหม่จะไม่ปรากฏที่นั่น

Next.js มีเงื่อนไขอีกข้อหนึ่ง: การอ้างอิงอย่าง process.env.NEXT_PUBLIC_RELEASE_LABEL จะถูกแทนที่ด้วยค่าระหว่าง next build ค่าจะถูกตรึงหลัง build การเปลี่ยนการตั้งค่าโดยไม่มี build ใหม่จะไม่เขียนทับ JavaScript ฝั่งไคลเอนต์ที่ส่งไปแล้ว

วิธีตรวจสอบผลลัพธ์โดยไม่เปิดเผยคีย์#

เริ่มด้วยตัวอย่างที่ปลอดภัย: ป้ายกำกับที่ระบุชัดว่าไม่ใช่ความลับ ชื่อ NEXT_PUBLIC_RELEASE_LABEL และค่า preview-check นี่เป็นชื่อและข้อความตัวอย่าง ไม่ใช่คีย์หรือการทดสอบที่ดำเนินการในที่นี้ หากแอป Next.js อ่านตัวแปรนี้โดยตรงผ่าน process.env.NEXT_PUBLIC_RELEASE_LABEL ก็สามารถแสดงป้ายกำกับในตำแหน่งที่ต้องการของอินเทอร์เฟซหลัง build ใหม่ การตรวจสอบนี้ยืนยันเพียงว่ามีการส่งค่าการตั้งค่า public ไปแล้ว

ต้องตรวจสอบคีย์ส่วนตัวด้วยวิธีอื่น อย่าแสดงค่า บางส่วนของค่า ความยาวของค่า หรือ process.env ทั้งหมด อย่าสร้าง URL สาธารณะที่ส่งเนื้อหาของตัวแปรกลับมา ขั้นแรก ตรวจสอบเพียงว่าการตั้งค่า “มีอยู่ / ไม่มีอยู่” บนเซิร์ฟเวอร์ จากนั้นจึงตรวจสอบฟังก์ชันแอปพลิเคชันที่ใช้บริการแยกต่างหาก การมีการตั้งค่าไม่ได้ยืนยันว่าคีย์ถูกต้องหรือมีสิทธิ์ตามที่ต้องการ

คุณจดบันทึกผลได้โดยไม่ใส่ secrets:

• โปรเจกต์ environment และ branch ตรงกับรายการที่เลือกไว้ตอนตั้งค่า;
• คุณกำลังตรวจสอบ URL ของ deployment ใหม่ที่สร้างหลังบันทึกตัวแปร;
• build เสร็จแล้ว และฟังก์ชันแอปพลิเคชันที่ต้องการทำงานกับข้อมูลทดสอบที่ปลอดภัยแล้ว;
• secret ไม่ได้ถูกเปิดเผยในเบราว์เซอร์ การตอบกลับ API บันทึก หรือบทสนทนา

หากฟังก์ชันทำการชำระเงิน ส่งข้อความ หรือดำเนินการอื่นที่มีผลตามมา ให้ใช้โหมดทดสอบที่บริการกำหนดไว้ การตรวจสอบคอนฟิกเพียงอย่างเดียวไม่ได้อนุญาตให้ดำเนินการจริง

สิ่งที่ควรตรวจสอบหากค่ายังคงเป็น undefined#

undefined หมายถึงไม่มีการรับค่า ณ จุดที่เข้าถึงนั้น ให้ตรวจสอบชื่อ environment และเวอร์ชันตามลำดับ โดยไม่เปลี่ยนการตั้งค่าทั้งหมดพร้อมกัน

เมื่อคุณตรวจสอบชื่อ environment และเวอร์ชันใหม่แล้ว ข้อผิดพลาดในฟังก์ชันก็ยังไม่ใช่หลักฐานว่าตัวแปรเป็นสาเหตุ ให้ตรวจสอบข้อผิดพลาดเฉพาะในโค้ดฝั่งเซิร์ฟเวอร์ โดยไม่เผยแพร่ข้อมูลวินิจฉัยที่มี secrets คู่มือนี้ไม่ได้รับประกันว่าจะแก้การตอบกลับ HTTP 500 ได้ทุกกรณี

การย้ายไปยังเซิร์ฟเวอร์ของคุณเองต้องใช้ขั้นตอนอื่น: ดูคู่มือ deploy โปรเจกต์ด้วย Coolify ชื่อปุ่มและขั้นตอนการตั้งค่าของ Vercel ใช้กับ Coolify ไม่ได้

ไปที่ Ailoot