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

> ตัวแปรสภาพแวดล้อม, Development/Preview/Production, การ deploy ใหม่ และการตรวจสอบคีย์อย่างปลอดภัยใน Next.js โดยไม่ส่ง secrets ไปยังเบราว์เซอร์

Source: https://ailoot.ai/blog/th/vercel-environment-variables/
Canonical: https://ailoot.ai/blog/th/vercel-environment-variables/
Language: th
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-229
Revision: sha256-9025e307e137875d9618c5f0dc622762d552aa58090da43c88aebf4cdc003901


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="ประเด็นสำคัญของส่วนนี้">

ประเด็นสำคัญ

หากไฟล์ `.env` ที่มี secrets ของคุณไม่ได้อยู่ใน Git ให้เพิ่มตัวแปรที่จำเป็นในส่วน **Environment Variables** ของโปรเจกต์ Vercel เลือก environment บันทึกการตั้งค่า แล้วสร้าง deployment ใหม่: เวอร์ชันที่ deploy ไปแล้วจะไม่เปลี่ยนแปลง ใน Next.js อย่าเพิ่มคำนำหน้า `NEXT_PUBLIC_` ให้กับคีย์ลับ เพราะค่าของคีย์จะถูกรวมไว้ในโค้ดของเบราว์เซอร์ระหว่างการ build

</div>

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



[ดูข้อมูลการใช้งาน Ailoot ในทางปฏิบัติได้ในเอกสาร](https://ailoot.ai/docs/)

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

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

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

หากยังไม่แน่ใจว่าสามารถเก็บอะไรไว้ในไฟล์ซอร์สได้ ให้เริ่มจาก[การตรวจสอบความปลอดภัยสำหรับโปรเจกต์ที่สร้างด้วย AI](https://ailoot.ai/blog/th/vibe-coding-security/) ส่วนคู่มือนี้ตอบคำถามที่แคบกว่า คือจะตั้งค่าคอนฟิกสำหรับ deployment บน Vercel รายการใดรายการหนึ่งได้ที่ไหน

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

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

| สิ่งที่ต้องตรวจสอบ | ตัวเลือกที่เป็นไปได้ | เหตุผลที่สำคัญ |
|----|----|----|
| Vercel environment | Development, Preview, Production | การตั้งค่าต้องมีผลกับเวอร์ชันที่คุณกำลังตรวจสอบ |
| ตำแหน่งที่อ่านค่า | เซิร์ฟเวอร์หรือเบราว์เซอร์ | ห้ามรวมคีย์ส่วนตัวไว้ในโค้ดฝั่งไคลเอนต์ |
| เวลาที่อ่านค่า | ตอน build หรือระหว่างเรียกใช้ server function | ใน Next.js ค่า public จะถูกกำหนดตอน build |

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

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

หากยังระบุเฟรมเวิร์กไม่ได้ ให้ขอให้เอเจนต์ตรวจสอบจากไฟล์โปรเจกต์ [การเปรียบเทียบ Astro กับ Next.js](https://ailoot.ai/blog/th/astro-vs-nextjs-for-ai-built-sites/) ช่วยให้เข้าใจความแตกต่างได้ แต่ไม่สามารถใช้กฎ `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 และเวอร์ชันตามลำดับ โดยไม่เปลี่ยนการตั้งค่าทั้งหมดพร้อมกัน

| อาการ | สิ่งที่ต้องตรวจสอบ |
|----|----|
| ใช้งานได้ในเครื่อง แต่ใช้ไม่ได้ใน Preview | มีชื่อนี้ในการตั้งค่า Preview ของโปรเจกต์หรือไม่; เลือก branch อื่นอยู่หรือไม่ |
| Preview ใช้งานได้ แต่ Production ใช้ไม่ได้ | ตั้งชื่อนี้ไว้สำหรับ Production หรือไม่; สร้างเวอร์ชันหลักใหม่หลัง Save แล้วหรือยัง |
| Preview branch หนึ่งทำงานต่างออกไป | มีการตั้งค่าค่าชื่อเดียวกันสำหรับ branch นั้นและใช้แทนการตั้งค่าทั่วไปหรือไม่ |
| เซิร์ฟเวอร์เห็นตัวแปร แต่เบราว์เซอร์ไม่เห็น | ใน Next.js นี่เป็นสิ่งที่คาดหมายได้สำหรับตัวแปรที่ไม่ใช่ public; อย่าย้ายคีย์ส่วนตัวไปไว้ในเบราว์เซอร์ |
| ป้ายกำกับ public ของ Next.js ยังคงมีค่าเดิม | มี build ใหม่ที่ใช้ค่าที่ต้องการหรือไม่; URL ที่เปิดเป็นของ deployment นั้นหรือไม่ |
| ชื่อ public ถูกต้อง แต่การแทนค่าไม่ทำงาน | โค้ดอ่านค่าแบบไดนามิกด้วย `process.env[varName]` หรือไม่: Next.js จะไม่ inline การอ้างอิงลักษณะนี้ |

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

การย้ายไปยังเซิร์ฟเวอร์ของคุณเองต้องใช้ขั้นตอนอื่น: ดู[คู่มือ deploy โปรเจกต์ด้วย Coolify](https://ailoot.ai/blog/th/coolify-claude-code-deploy/) ชื่อปุ่มและขั้นตอนการตั้งค่าของ Vercel ใช้กับ Coolify ไม่ได้

<div class="section" role="doc-bibliography" aria-label="แหล่งที่มา">

### แหล่งที่มา

- [ตัวแปรสภาพแวดล้อมของ Vercel](https://vercel.com/docs/environment-variables)
- [การเพิ่มและจัดการตัวแปรสภาพแวดล้อมของ Vercel](https://vercel.com/docs/environment-variables/managing-environment-variables)
- [ตัวแปรสภาพแวดล้อมของ Next.js](https://nextjs.org/docs/app/guides/environment-variables)

</div>





[ไปที่ Ailoot](https://ailoot.ai/)

## คำถามที่พบบ่อย

### ทำไมบันทึกตัวแปรใน Vercel แล้วยัง undefined?

ตรวจโปรเจกต์ environment และ scope เฉพาะ branch แล้วสร้าง deployment ใหม่ deployment เดิมไม่ได้รับตัวแปรเพียงเพราะบันทึกค่าใหม่

### เติม NEXT_PUBLIC_ เพื่อให้แอป Next.js เห็นข้อมูลลับได้หรือไม่?

ห้ามใช้ prefix นี้กับข้อมูลลับ เพราะค่าจะเข้าโค้ดเบราว์เซอร์ตอน build เก็บบนเซิร์ฟเวอร์และตรวจว่ามีค่าโดยไม่พิมพ์คีย์


## Ailoot · บริษัทและพอร์ตโฟลิโอโครงการของบริษัท

Ailoot อาศัยประสบการณ์การดำเนินงานที่สั่งสม ฐานลูกค้าขนาดใหญ่ บริการที่เสถียร และการติดตาม KPI อย่างต่อเนื่อง

บริษัทและพอร์ตโฟลิโอโครงการของบริษัท: ลูกค้าหลายล้านราย; ยอดขายระดับหลายพันล้านต่อเดือน.

Ailoot นำประสบการณ์การดำเนินงานนี้มาใช้เพื่อให้เข้าถึงฟังก์ชัน AI ผ่าน API ในผลิตภัณฑ์ของลูกค้า เอเจนต์ แอปพลิเคชัน และระบบอัตโนมัติ