Supabase คืออะไร? สร้างฐานข้อมูลแรก แล้วดึงข้อมูลขึ้นเว็บ React

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

Supabase เตรียมของพวกนี้ไว้ให้ครบในที่เดียว เราได้ฐานข้อมูล PostgreSQL ตัวจริง ได้ API ที่สร้างให้อัตโนมัติ และได้ระบบล็อกอิน โดยไม่ต้องตั้งเซิร์ฟเวอร์เอง บทความนี้จะพาสร้างตารางแรก ตั้งกฎความปลอดภัย แล้วดึงข้อมูลขึ้นเว็บ React ทีละขั้นครับ

จบบทความนี้คุณจะ:

• อธิบายได้ว่า Database, API และ Auth ใน Supabase ทำหน้าที่อะไร
• สร้างตารางและใส่ข้อมูลด้วย SQL พร้อมเข้าใจทุกบรรทัด
• รู้ว่า RLS กับ Policy คืออะไร และทำไมต้องเปิดทุกตาราง
• เชื่อมเว็บ React ที่สร้างด้วย Vite เข้ากับ Supabase แล้วแสดงข้อมูลจริง
• แยกออกว่า key ตัวไหนใส่ในเว็บได้ ตัวไหนห้ามเด็ดขาด

ถ้าอยากเห็นภาพรวมก่อน ดูคลิปสั้นนี้ได้เลย ยาวแค่ 1 นาทีครับ

Supabase คือครัวสำเร็จรูป

สมมติเราจะเปิดร้านอาหาร ถ้าต้องสร้างครัวเองตั้งแต่ศูนย์ ต้องซื้อตู้ ต่อท่อ เจาะช่องส่งอาหาร ติดประตูกันคนนอก กว่าจะได้ทำอาหารจานแรกก็นานมาก Supabase เหมือนครัวที่ติดตั้งเสร็จแล้ว เดินเข้าไปก็เริ่มทำอาหารได้เลย

ภาพด้านล่างคือเส้นทางของคำขอหนึ่งครั้ง ตั้งแต่เว็บของเราจนถึงตาราง

จุดที่ต้องสังเกตคือ เบราว์เซอร์คุยกับ Supabase โดยตรง ไม่มีเซิร์ฟเวอร์ของเราคั่นกลาง สะดวกมาก แต่ก็แปลว่า URL และ key ที่ใช้จะอยู่ในโค้ดฝั่งเบราว์เซอร์ ซึ่งใครก็เปิดดูได้ ความปลอดภัยทั้งหมดจึงฝากไว้ที่ยาม RLS ตัวนี้ เดี๋ยวเราจะตั้งยามกันในหัวข้อ SQL ครับ

ศัพท์ที่ต้องรู้

เตรียมเครื่อง

ต้องมีสามอย่าง คือ Node.js รุ่น LTS (โปรแกรมที่ทำให้รัน JavaScript นอกเบราว์เซอร์ได้ ใช้รันเครื่องมือสร้างเว็บ) VS Code สำหรับเขียนโค้ด และบัญชี GitHub หรืออีเมลไว้สมัคร Supabase

ใน VS Code เปิด Terminal ได้จากเมนู Terminal > New Terminal แล้วเช็กว่ามี Node.js แล้วหรือยัง

node -v

v22.22.0

เช็กว่าได้แล้ว: มีเลขรุ่นขึ้นมา (เลขของคุณอาจต่างไป) ถ้าขึ้นว่าไม่รู้จักคำสั่ง ให้ติดตั้งรุ่น LTS จาก nodejs.org แล้วปิดเปิด VS Code ใหม่หนึ่งครั้ง

สร้างโปรเจกต์บน Supabase

1. เข้า supabase.com กด Start your project แล้วสมัครด้วย GitHub หรืออีเมล
2. ระบบจะให้สร้าง Organization ก่อน คิดว่าเป็นชื่อทีมหรือบริษัทที่ถือโปรเจกต์ไว้ ตั้งชื่ออะไรก็ได้ แล้วเลือกแพ็กเกจ Free
3. กด New project ตั้งชื่อ my-first-app
4. ช่อง Database Password กดให้ระบบสุ่มรหัสให้ แล้ว จดเก็บไว้ในที่ปลอดภัย นี่คือรหัสใหญ่ของฐานข้อมูล ต้องใช้ตอนต่อฐานข้อมูลตรงๆ ในอนาคต
5. ช่อง Region เลือก Southeast Asia (Singapore) เพราะอยู่ใกล้ไทยที่สุด ข้อมูลวิ่งไปกลับเร็วกว่าเลือกฝั่งยุโรปหรืออเมริกา
6. ช่องอื่นปล่อยค่าเดิม กดสร้าง แล้วรอสักครู่ให้ระบบเตรียมครัวให้

เช็กว่าได้แล้ว: เห็นหน้าแดชบอร์ดของ my-first-app มีเมนูด้านซ้าย เช่น Table Editor และ SQL Editor

สร้างตารางแรกด้วย SQL

เราจะสร้างตารางเก็บชื่อเครื่องดนตรี ใส่ข้อมูล 3 แถว แล้วตั้งกฎให้ "ใครก็อ่านได้ แต่ไม่มีใครแก้ได้" เปิดเมนู SQL Editor วางโค้ดนี้ แล้วกด Run

create table instruments (
  id bigint primary key generated always as identity,
  name text not null
);
 
insert into instruments (name)
values
  ('violin'),
  ('viola'),
  ('cello');
 
grant select on public.instruments to anon;
 
alter table instruments enable row level security;
 
create policy "public can read instruments"
on public.instruments
for select to anon
using (true);

เช็กว่าได้แล้ว: ด้านล่างขึ้นคำว่า Success ถ้ากด Run ซ้ำแล้วเจอ relation "instruments" already exists ไม่ต้องตกใจ แปลว่าตารางถูกสร้างไปแล้วตั้งแต่รอบแรก

ทีนี้มาอ่านทีละช่วงครับ

สร้างตารางและใส่ข้อมูล

• create table instruments สร้างตารางใหม่ชื่อ instruments
• id bigint primary key generated always as identity คอลัมน์เลขประจำแถว bigint คือจำนวนเต็มขนาดใหญ่ primary key คือห้ามซ้ำ ใช้ชี้ถึงแถวนั้นได้แน่นอน เหมือนเลขบัตรประชาชน ส่วน generated always as identity คือให้ฐานข้อมูลรันเลข 1, 2, 3 ให้เอง
• name text not null คอลัมน์ชื่อ เป็นข้อความ และ not null คือห้ามว่าง
• insert into ... values ใส่ข้อมูล 3 แถว สังเกตว่าเราไม่ได้ใส่ id เลย เพราะฐานข้อมูลรันเลขให้แล้ว

ให้สิทธิ์ และตั้งยาม

• grant select ... to anon ให้บทบาท anon (คำขอที่ยังไม่ล็อกอิน) มีสิทธิ์ อ่าน ตารางนี้ คำว่า public คือ schema หรือห้องหลักที่ตารางของเราอยู่
• enable row level security เปิดยาม RLS ที่ตาราง พอเปิดแล้ว ค่าเริ่มต้นคือห้ามทุกอย่าง ไม่มีใครอ่านอะไรได้เลย จนกว่าจะมี Policy อนุญาต
• create policy ... for select to anon using (true) เขียนรายชื่อให้ยามถือ แปลตรงตัวว่า "อนุญาตให้ anon ทำการ select (อ่าน) โดยเงื่อนไขคือ true" ซึ่งจริงเสมอ จึงอ่านได้ทุกแถว

grant เหมือนบัตรผ่านเข้าตึก ส่วน Policy เหมือนยามหน้าห้องที่ดูว่าหยิบอะไรได้ ต้องผ่านทั้งสองชั้น เราให้แค่สิทธิ์อ่าน และเขียน Policy แค่ select ตารางนี้จึงเป็นแบบ อ่านอย่างเดียว ต่อให้มีคนเอา key จากเว็บเราไปใช้ ก็เพิ่ม แก้ หรือลบแถวไม่ได้ เพราะไม่มี Policy ไหนอนุญาต

ระวัง: ตารางนี้ใครก็อ่านได้ using (true) เหมาะกับข้อมูลที่ตั้งใจเปิดให้ทุกคนดูอยู่แล้ว เช่น รายชื่อสินค้า ห้ามใช้กับข้อมูลส่วนตัวอย่างอีเมลหรือเบอร์โทรของผู้ใช้ ข้อมูลแบบนั้นต้องเขียนเงื่อนไขให้แต่ละคนเห็นแค่ของตัวเอง ซึ่ง Supabase มีตัวอย่างไว้ในคู่มือเรื่อง RLS

เช็กข้อมูลใน Table Editor

เปิดเมนู Table Editor แล้วกดที่ตาราง instruments จะเห็นข้อมูลเป็นตารางเหมือนสเปรดชีต

id | name
---+-------
 1 | violin
 2 | viola
 3 | cello

เช็กว่าได้แล้ว: มี 3 แถว และเลข id รันเป็น 1, 2, 3 ให้เองครบ หน้านี้ใช้เพิ่มหรือแก้ข้อมูลด้วยมือได้ด้วย เดี๋ยวเราจะกลับมาใช้ตอนท้าย

สร้างเว็บ React ด้วย Vite

Vite คือเครื่องมือสร้างโปรเจกต์เว็บพร้อมเซิร์ฟเวอร์จำลองที่เปิดได้เร็ว เราจะใช้มันสร้างโปรเจกต์ React แล้วติดตั้ง @supabase/supabase-js ซึ่งเป็นไลบรารีที่ช่วยคุยกับ API ของ Supabase เราจะได้ไม่ต้องเขียนคำขอเองทุกบรรทัด

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install @supabase/supabase-js

เครื่องหมาย -- ตรงกลางบรรทัดแรกคือการบอก npm ว่า "ส่วนที่ตามมาไม่ใช่ของ npm นะ ส่งต่อให้ตัวสร้างโปรเจกต์ไปเลย" ถ้าระหว่างทางมีคำถาม ให้ตอบตามนี้

• ถ้าถามให้เลือก Framework และภาษา เลือก React และ JavaScript
• ถ้าถามเรื่อง linter (Which linter to use?) เลือกตัวแรกได้เลย ไม่มีผลกับบทความนี้
• คำถามอื่น เช่น Install with npm and start now? ตอบ No เพราะเราจะติดตั้งแพ็กเกจเพิ่มก่อน

ผู้ใช้ Windows ถ้า PowerShell ขึ้นว่า running scripts is disabled ให้พิมพ์ npm.cmd แทน npm ทุกคำสั่ง

เช็กว่าได้แล้ว: คำสั่งสุดท้ายจบโดยไม่มีคำว่า ERR! และในไฟล์ package.json มี @supabase/supabase-js อยู่ในรายการ dependencies จากนั้นเปิดโฟลเดอร์ my-app ใน VS Code ผ่านเมนู File > Open Folder

ใส่ URL และ key ไว้ใน .env.local

เว็บต้องรู้สองอย่างก่อนจะคุยกับ Supabase ได้ คือ ที่อยู่ของโปรเจกต์ (Project URL) กับ บัตรผ่าน (Publishable key) ในแดชบอร์ด Supabase กดปุ่ม Connect ด้านบน แล้วคัดลอกสองค่านี้มา publishable key จะขึ้นต้นด้วย sb_publishable_

สร้างไฟล์ชื่อ .env.local ไว้ที่ชั้นบนสุดของ my-app ==ข้างๆ package.json ไม่ใช่ในโฟลเดอร์ src== แล้วใส่ค่าของคุณแทนตัวอย่าง

VITE_SUPABASE_URL=https://abcdefghijklm.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxxxxxxxxxxxxxx

my-app/
├── .env.local
├── package.json
├── index.html
└── src/
    ├── App.jsx
    ├── main.jsx
    └── lib/
        └── supabaseClient.js

ทำไมต้องขึ้นต้นด้วย VITE_ ครับ เพราะ Vite จะยอมส่งค่าจากไฟล์ .env ไปให้โค้ดฝั่งเบราว์เซอร์เฉพาะตัวแปรที่ขึ้นต้นด้วย VITE_ เท่านั้น เป็นการกันไม่ให้ค่าลับอื่นหลุดไปโดยไม่ตั้งใจ แต่ก็หมายความว่าค่าที่ขึ้นต้นด้วย VITE_ ทุกตัว คนเปิดเว็บมองเห็นได้ จึงใส่ได้แค่ publishable key

ระวัง: ห้ามเอา secret key มาใส่ที่นี่ ในหน้า API Keys ของ Supabase จะมี key อีกแบบที่ขึ้นต้นด้วย sb_secret_ (รุ่นเก่าเรียกว่า service_role) key นี้ข้ามยาม RLS ได้ทุกตาราง ถ้าหลุดไปอยู่ในเว็บ ใครก็อ่าน แก้ หรือลบข้อมูลทั้งหมดได้ ให้ใช้เฉพาะในโค้ดที่รันบนเซิร์ฟเวอร์เท่านั้น

สร้างตัวเชื่อมใน supabaseClient.js

สร้างโฟลเดอร์ src/lib แล้วสร้างไฟล์ supabaseClient.js ไฟล์นี้สร้าง "สายตรงถึงครัว" ไว้ครั้งเดียว แล้วไฟล์อื่นหยิบไปใช้ได้เลย ไม่ต้องสร้างใหม่ทุกครั้ง

import { createClient } from "@supabase/supabase-js";
 
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;
 
export const supabase = createClient(supabaseUrl, supabaseKey);

import.meta.env คือที่ที่ Vite เอาค่าจาก .env.local มาวางไว้ให้ ชื่อหลังจุดต้องตรงกับในไฟล์ทุกตัวอักษร

ดึงข้อมูลขึ้นหน้าเว็บใน App.jsx

เปิด src/App.jsx ลบของเดิมทั้งหมด แล้ววางโค้ดนี้แทน

import { useEffect, useState } from "react";
import { supabase } from "./lib/supabaseClient";
 
function App() {
  const [instruments, setInstruments] = useState([]);
 
  useEffect(() => {
    getInstruments();
  }, []);
 
  async function getInstruments() {
    const { data, error } = await supabase.from("instruments").select();
 
    if (error) {
      console.error(error);
      return;
    }
 
    setInstruments(data);
  }
 
  return (
    <ul>
      {instruments.map((instrument) => (
        <li key={instrument.id}>{instrument.name}</li>
      ))}
    </ul>
  );
}
 
export default App;

• useState([]) กล่องเก็บรายการเครื่องดนตรี เริ่มจากว่างเปล่า
• useEffect(..., []) สั่งให้ทำงานครั้งเดียวหลังหน้าเว็บขึ้นมา คือไปดึงข้อมูล
• supabase.from("instruments").select() ขออ่านทุกแถวในตาราง instruments ผ่าน API คำขอนี้วิ่งผ่านยาม RLS และผ่านได้เพราะเรามี Policy อนุญาตให้ anon อ่าน
• { data, error } คำตอบมีสองช่อง ถ้าสำเร็จข้อมูลจะอยู่ใน data ถ้าพลาดรายละเอียดจะอยู่ใน error ซึ่งเราพิมพ์ไว้ใน Console
• key={instrument.id} ป้ายชื่อให้ React จำได้ว่าแต่ละบรรทัดคือแถวไหน

ได้เวลาเปิดเว็บแล้วครับ

npm run dev

  VITE v8.x.x  ready in 300 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

เช็กว่าได้แล้ว: เปิด http://localhost:5173 แล้วเห็นรายการ violin, viola, cello เป็นข้อๆ

ถ้าหน้าจอขาวโล่ง ไล่เช็กตามนี้

1. ไฟล์ .env.local อยู่ข้าง package.json จริงไหม ไม่ได้อยู่ใน src หรือเผลอตั้งชื่อเป็น .env.local.txt
2. ชื่อตัวแปรสะกดตรงกันทั้งในไฟล์ .env.local และใน supabaseClient.js ทุกตัวอักษร
3. แก้ .env.local แล้ว หยุดเซิร์ฟเวอร์แล้วรันใหม่ หรือยัง Vite อ่านไฟล์นี้แค่ตอนเริ่มทำงาน
4. กด F12 เปิดแท็บ Console ในเบราว์เซอร์ แล้วอ่านข้อความสีแดง ส่วนใหญ่จะบอกตรงๆ ว่าพังที่ไหน

ลองเพิ่มข้อมูลแล้วรีเฟรช

กลับไปที่ Table Editor เปิดตาราง instruments กด Insert แล้วเลือกเพิ่มแถวใหม่ (Insert row) ช่อง id ปล่อยว่างไว้ ใส่ name เป็น double bass แล้วกดบันทึก

เช็กว่าได้แล้ว: กลับมารีเฟรชหน้าเว็บที่ localhost:5173 จะเห็น double bass โผล่เป็นบรรทัดที่ 4 โดยที่เราไม่ได้แก้โค้ดสักบรรทัด

นี่คือภาพรวมของการทำเว็บที่มีฐานข้อมูลครับ หน้าเว็บเป็นแค่ "หน้าร้าน" ส่วนข้อมูลจริงอยู่ในตู้ของ Supabase แก้ที่ตู้ ทุกคนที่เปิดเว็บก็เห็นของใหม่ทันที

กฎความปลอดภัย 3 ข้อ

ข้อนี้สำคัญที่สุดในบทความครับ เพราะเว็บแบบนี้คุยกับฐานข้อมูลตรงจากเบราว์เซอร์ ถ้าตั้งค่าพลาดข้อเดียว ข้อมูลอาจหลุดทั้งก้อน

1. เปิด RLS ทุกตาราง ตารางที่ไม่ได้เปิด RLS ก็เหมือนตู้ที่ไม่มียาม พอเปิดแล้วจะยังไม่มีใครอ่านอะไรได้ จนกว่าเราจะเขียน Policy อนุญาตทีละเรื่อง ปลอดภัยไว้ก่อน แล้วค่อยเปิดเท่าที่จำเป็น
2. secret key อยู่บนเซิร์ฟเวอร์เท่านั้น key ที่ขึ้นต้นด้วย sb_secret_ หรือ service_role ข้าม RLS ได้ทั้งหมด ห้ามอยู่ในโค้ดฝั่งเบราว์เซอร์ และห้ามตั้งชื่อตัวแปรขึ้นต้นด้วย VITE_ เด็ดขาด เว็บใช้แค่ publishable key ก็พอ
3. อย่า commit ไฟล์ .env.local โปรเจกต์ Vite มีไฟล์ .gitignore ที่ใส่ *.local ไว้ให้แล้ว ไฟล์นี้จึงไม่ถูกส่งขึ้น Git อย่าไปลบบรรทัดนั้นออก และถ้าเปลี่ยนชื่อไฟล์ env เอง ต้องเช็กว่ายังถูกกันไว้

ถ้าอยากเห็นว่าการเผลอ push key ขึ้น GitHub เกิดอะไรขึ้นได้บ้าง ดูคลิปนี้ครับ

เผลอหลุดไปแล้วทำยังไง ถ้า secret key เคยถูกส่งขึ้น Git หรือแปะไว้ในที่สาธารณะ ให้ถือว่าหลุดแล้ว การลบไฟล์ทิ้งทีหลังไม่ช่วย เพราะประวัติใน Git ยังเก็บไว้ ให้เข้าไปที่หน้า API Keys ของโปรเจกต์ สร้าง key ใหม่ แล้วลบตัวเก่าทิ้งทันที

แพ็กเกจฟรีมีข้อจำกัดอะไร

แพ็กเกจ Free เหมาะกับการเรียนและโปรเจกต์เล็กๆ ณ ตอนเขียน (ต.ค. 2026) มีข้อจำกัดที่มือใหม่ควรรู้สองข้อ

• มีโปรเจกต์ที่เปิดใช้งานได้พร้อมกัน 2 โปรเจกต์ ถ้าจะทำโปรเจกต์ที่สาม ต้องหยุดหรือลบอันเก่าก่อน
• โปรเจกต์ที่ไม่มีการใช้งานนาน 1 สัปดาห์จะถูกพักไว้ (paused) ระหว่างนั้นเว็บจะดึงข้อมูลไม่ได้ จนกว่าเราจะเข้าแดชบอร์ดไปกดเปิดใหม่

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

เจอปัญหา ลองเช็กตามนี้

ไปต่อ

• คู่มือต้นฉบับของขั้นตอนนี้อยู่ที่ Supabase React Quickstart
• อยากให้แต่ละคนเห็นเฉพาะข้อมูลของตัวเอง อ่านต่อเรื่อง Row Level Security ซึ่งใช้คู่กับระบบล็อกอิน (Auth)
• พอเว็บพร้อม เอาขึ้นโฮสต์ได้หลายแบบ ถ้าอยากลองแบบฟรี อ่าน ขึ้นเว็บแรกบน Cloudflare Workers

สรุป

• Supabase คือครัวสำเร็จรูปที่มีฐานข้อมูล Postgres, API และ Auth ให้พร้อม ไม่ต้องตั้งเซิร์ฟเวอร์เอง
• สร้างตารางด้วย SQL แล้ว grant สิทธิ์อ่านให้ anon เปิด RLS และเขียน Policy เฉพาะที่อนุญาต
• เว็บ React เชื่อมด้วย @supabase/supabase-js โดยเก็บ URL และ publishable key ไว้ใน .env.local ข้าง package.json และต้องขึ้นต้นด้วย VITE_
• supabase.from("instruments").select() คือการขออ่านข้อมูลผ่าน API ซึ่งต้องผ่านยาม RLS ทุกครั้ง
• จำ 3 ข้อ เปิด RLS ทุกตาราง, secret key อยู่บนเซิร์ฟเวอร์เท่านั้น, ไม่ commit .env.local

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ