0Pricing
Frontend Academy · บทเรียน

ตัวแปรสภาพแวดล้อมใน CI

จัดเก็บข้อมูลลับใน GitHub Secrets ฉีดข้อมูลเหล่านั้นเข้าสู่บิลด์เป็นตัวแปรสภาพแวดล้อม และเข้าถึงข้อมูลใน Vite ด้วย import.meta.env หรือใน Next.js ด้วย process.env

ตัวแปรสภาพแวดล้อมใน CI เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทำไมสภาพแวดล้อมจึงแตกต่างกัน

แอปต้องใช้ค่าที่แตกต่างกันในแต่ละสภาพแวดล้อม เช่น URL API สำหรับการพัฒนา, URL API สำหรับการทดสอบก่อนใช้งานจริง และ URL API สำหรับ production นอกจากนี้ยังมีความลับ เช่น คีย์ API และโทเค็น ที่ต้องไม่หลุดเข้าไปในที่เก็บโค้ดโดยเด็ดขาด ตัวแปรสภาพแวดล้อมเป็นวิธีมาตรฐานในการใส่ค่าเหล่านี้

สาธารณะกับเฉพาะเซิร์ฟเวอร์

ตัวแปรฟรอนต์เอนด์ที่ฝังอยู่ในชุดรวมโค้ดเป็น สาธารณะ และทุกคนที่ใช้ DevTools สามารถมองเห็นได้ อย่าใส่ความลับไว้ในตัวแปรเหล่านี้ ตัวแปรฝั่งเซิร์ฟเวอร์ที่ใช้ในฟังก์ชันแบบไร้เซิร์ฟเวอร์, SSR และเส้นทาง API สามารถเป็นความลับที่แท้จริงได้

ตัวแปรสภาพแวดล้อมของ Vite

Vite จะเปิดเผยตัวแปรที่มีคำนำหน้า VITE_ ให้โค้ดฝั่งไคลเอนต์เข้าถึงผ่าน import.meta.env

# .env
VITE_API_URL=https://api.example.com
VITE_FEATURE_FLAGS={"newOnboarding":true}

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

# DEV_ONLY or NEVER PREFIXED vars are NOT exposed:
SECRET_KEY=xxx  # not accessible to client code

ตัวแปรสภาพแวดล้อมของ Next.js

Next จะเติมคำนำหน้า NEXT_PUBLIC_ ให้ตัวแปรสาธารณะ ตัวแปรที่ใช้เฉพาะเซิร์ฟเวอร์จะไม่มีคำนำหน้า (ใช้ในตัวจัดการเส้นทางและ getServerSideProps)

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com  # client-accessible
DATABASE_URL=postgres://...                  # server-only

# Client:
const url = process.env.NEXT_PUBLIC_API_URL;

# Server (API route):
const db = process.env.DATABASE_URL;

ไฟล์ .env ในเครื่อง

ใช้ .env.local สำหรับค่าที่กำหนดทับเฉพาะบุคคล และใช้ .env.development / .env.production สำหรับค่าเริ่มต้นเฉพาะสภาพแวดล้อม เพิ่ม .env.local ลงใน .gitignore และอย่าคอมมิตความลับโดยเด็ดขาด

# .gitignore
.env.local
.env.*.local

# Commit only .env.example with placeholder values:
VITE_API_URL=https://api.example.com
DATABASE_URL=

การจัดเก็บความลับใน GitHub Actions

เพิ่มความลับในที่เก็บโค้ดที่ การตั้งค่า → ความลับและตัวแปร → Actions เข้าถึงผ่าน secrets.NAME

# .github/workflows/deploy.yml
- name: Deploy
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
  run: |
    npx vercel --token $VERCEL_TOKEN --prod
    npx sentry-cli releases new $RELEASE

ความลับเฉพาะสภาพแวดล้อม

GitHub Environments (การตั้งค่า → สภาพแวดล้อม) ช่วยให้คุณจำกัดขอบเขตความลับไว้กับสภาพแวดล้อมที่ระบุ เช่น staging หรือ production พร้อมขั้นตอนอนุมัติเพิ่มเติมได้

# Job that requires environment:
deploy-prod:
  environment: production   # requires reviewer approval if configured
  steps:
    - run: deploy
      env:
        DB_URL: ${{ secrets.DB_URL }}  # only prod's DB_URL is exposed

ตัวแปรสภาพแวดล้อมของผู้ให้บริการโฮสต์

Vercel/Netlify/Cloudflare ต่างก็เปิดเผยตัวแปรสภาพแวดล้อมให้กระบวนการสร้างและรันไทม์ของคุณ ตั้งค่าได้ในแดชบอร์ดหรือผ่าน CLI

# Vercel:
vercel env add VITE_API_URL production
vercel env add VITE_API_URL preview

# Netlify:
netlify env:set VITE_API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

อย่าเขียนความลับตายตัวไว้ในชุดรวมโค้ดฟรอนต์เอนด์

หากค่าใดอยู่ใน JS ฝั่งไคลเอนต์ ค่านั้นก็เป็นสาธารณะ คีย์ API สำหรับ SDK ของบุคคลที่สาม เช่น คีย์เผยแพร่ของ Stripe และคีย์ค้นหาของ Algolia ถูกออกแบบมาให้เป็นสาธารณะอยู่แล้ว ส่วนค่าอื่น ๆ เช่น คีย์ API ของเซิร์ฟเวอร์ ต้องเก็บไว้ที่แบ็กเอนด์

ตรวจสอบตัวแปรสภาพแวดล้อมขณะสร้าง

ใช้ zod หรือ envalid เพื่อให้กระบวนการสร้างล้มเหลว หากไม่มีตัวแปรสภาพแวดล้อมที่จำเป็น

// env.ts
import { z } from 'zod';

const envSchema = z.object({
  VITE_API_URL: z.string().url(),
  VITE_SENTRY_DSN: z.string().url().optional()
});

export const env = envSchema.parse(import.meta.env);
// Throws helpful error if VITE_API_URL is missing

ระหว่างเวลาสร้างกับขณะทำงาน

ตัวแปรสภาพแวดล้อมขณะสร้างจะถูกฝังไว้ในชุดรวมโค้ด การเปลี่ยนค่าจึงต้องสร้างใหม่ ตัวแปรสภาพแวดล้อมขณะทำงาน (เส้นทาง API ของ Next, Netlify Functions และ Cloudflare Workers) จะถูกประเมินใหม่สำหรับแต่ละคำขอ เลือกใช้ให้เหมาะกับว่าค่านั้นควรเปลี่ยนได้โดยไม่ต้องนำแอปไปใช้งานใหม่หรือไม่

การหมุนเวียนความลับ

หมุนเวียนความลับเป็นประจำ (ทุก 90 วัน) และหลังจากมีการเปลี่ยนแปลงสมาชิกทีม ใช้ 1Password Secrets Automation, AWS Secrets Manager หรือเครื่องมือที่คล้ายกัน เพื่อให้ความลับใน CI เป็นปัจจุบันโดยไม่ต้องอัปเดตด้วยตนเอง

ข้อผิดพลาดที่พบบ่อย

1) คอมมิตไฟล์ .env ที่มีความลับจริง ให้ใช้ git-secrets เพื่อป้องกัน 2) เปิดเผยตัวแปรฝั่งเซิร์ฟเวอร์ให้ไคลเอนต์เห็นเนื่องจากใช้คำนำหน้าผิด 3) ลืมกำหนดตัวแปรสภาพแวดล้อมในการนำไปใช้งานสำหรับดูตัวอย่าง 4) ใช้คีย์ทดสอบและคีย์ production ปะปนกันในสภาพแวดล้อมเดียว

ตรวจสอบอย่างรวดเร็ว

เหตุใดตัวแปรสภาพแวดล้อมของ Vite ที่เปิดเผยให้ไคลเอนต์จึงต้องมีคำนำหน้า VITE_

สรุป: ตัวแปรสภาพแวดล้อมใน CI

ตัวแปรสาธารณะ: มีคำนำหน้า (VITE_, NEXT_PUBLIC_), ถูกฝังในชุดรวมโค้ด และผู้ใช้มองเห็นได้ ตัวแปรที่ใช้เฉพาะเซิร์ฟเวอร์: ไม่มีคำนำหน้า และใช้ในเส้นทาง API / SSR .env.local อยู่ใน .gitignore ส่วน .env.example ให้คอมมิตได้ ใช้ GitHub Secrets สำหรับ CI และ GitHub Environments เพื่อจำกัดขอบเขตสำหรับ production ผู้ให้บริการโฮสต์ (Vercel, Netlify, Cloudflare) ต่างก็กำหนดตัวแปรแยกตามสภาพแวดล้อม ตรวจสอบด้วย zod ขณะสร้าง

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

บทเรียน “ตัวแปรสภาพแวดล้อมใน CI” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวแปรสภาพแวดล้อมใน CI” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวแปรสภาพแวดล้อมใน CI”

จัดเก็บข้อมูลลับใน GitHub Secrets ฉีดข้อมูลเหล่านั้นเข้าสู่บิลด์เป็นตัวแปรสภาพแวดล้อม และเข้าถึงข้อมูลใน Vite ด้วย import.meta.env หรือใน Next.js ด้วย process.env คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวแปรสภาพแวดล้อมใน CI” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. GitHub Actions สำหรับฟรอนต์เอนด์: ตรวจรูปแบบ ทดสอบ และบิลด์
  2. การนำไปใช้งานบน Vercel, Netlify และ Cloudflare Pages
  3. ตัวแปรสภาพแวดล้อมใน CI
  4. การตรวจสอบ Lighthouse อัตโนมัติ
← กลับไปที่ Frontend Academy