How to Build a Gatsby Frontend and Connect It to a Backend?

ในบทแนะนำนี้ คุณจะสร้างแอปพลิเคชันรายการสิ่งที่ต้องทำโดยใช้ gatsby และเชื่อมต่อกับแบ็กเอนด์ที่มีความแข็งแกร่งซึ่งจัดเตรียมโดย back4app คู่มือนี้เหมาะสำหรับผู้ที่ต้องการรวมการดำเนินการ crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่จำเป็นเข้ากับเว็บไซต์ที่รวดเร็วและสถิต เมื่อสิ้นสุด คุณจะมีแอปที่ทำงานได้อย่างสมบูรณ์ซึ่งแสดงให้เห็นถึงวิธีการใช้บริการแบ็กเอนด์ของ back4app ในขณะที่ใช้ gatsby สำหรับส่วนหน้าที่รวดเร็วอย่างมาก การสร้างแอปพลิเคชันแบบฟูลสแต็กอาจเป็นเรื่องท้าทาย โดยมีความซับซ้อนเช่นการตั้งค่าแบ็กเอนด์ การจัดการฐานข้อมูล การตรวจสอบสิทธิ์ และการปรับใช้ เพื่อทำให้กระบวนการนี้ง่ายขึ้น เราใช้ back4app—ซึ่งเป็น โซลูชันแบ็กเอนด์เป็นบริการ (baas) ที่สามารถปรับขนาดได้ —เพื่อให้คุณสามารถมุ่งเน้นไปที่การสร้างเว็บไซต์ gatsby ของคุณในขณะที่มันจัดการการโฮสต์ ฐานข้อมูล และ api back4app มีชุดบริการแบ็กเอนด์ที่ครอบคลุม รวมถึงฐานข้อมูลที่พร้อมใช้งาน การตรวจสอบสิทธิ์ cloud code สำหรับตรรกะฝั่งเซิร์ฟเวอร์ และการรวม sdk ที่ไร้รอยต่อ การสนับสนุนการปรับใช้ในรูปแบบคอนเทนเนอร์ทำให้มันเป็นตัวเลือกที่ยอดเยี่ยมสำหรับแอปพลิเคชันฟูลสแต็กสมัยใหม่ ด้วยเครื่องมือเหล่านี้ คุณสามารถพัฒนาและปรับใช้แอปพลิเคชันได้อย่างรวดเร็วโดยไม่ต้องจัดการโครงสร้างพื้นฐานของเซิร์ฟเวอร์ ข้อสรุปสำคัญ โดยการติดตามบทแนะนำนี้ คุณจะได้เรียนรู้ที่จะ เริ่มต้นโครงการ gatsby สมัยใหม่ รวมบริการแบ็คเอนด์เพื่อจัดการข้อมูลของแอปพลิเคชันของคุณ ดำเนินการ crud หลักเพื่อประสบการณ์ผู้ใช้ที่โต้ตอบได้ ปรับใช้ แอปพลิเคชัน to do list ที่ใช้งานได้เต็มรูปแบบ โดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app ข้อกำหนดเบื้องต้น ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ก่อนที่คุณจะเริ่ม node js และ npm ติดตั้งเวอร์ชัน lts ล่าสุดของ node js จาก nodejs org https //nodejs org/ และตรวจสอบโดยการรัน node v และ npm v ในเทอร์มินัลของคุณ ความรู้พื้นฐานเกี่ยวกับ gatsby ควรมีความคุ้นเคยกับ react, graphql และเลเยอร์ข้อมูลของ gatsby หากคุณเป็นมือใหม่ใน gatsby ให้พิจารณาทบทวนพื้นฐานของมันก่อน บัญชี back4app ลงทะเบียนที่ back4app https //www back4app com/ เพื่อจัดตั้งและจัดการบริการแบ็คเอนด์ของคุณ เมื่อมีข้อกำหนดเบื้องต้นเหล่านี้แล้ว คุณก็พร้อมที่จะตั้งค่าโครงการของคุณและเริ่มสร้าง การตั้งค่าโครงการ เริ่มต้นด้วยการตั้งค่าสภาพแวดล้อมการพัฒนาท้องถิ่นของคุณและเริ่มต้นโครงการ gatsby ของคุณ ตรวจสอบว่า node js (รุ่น lts) ได้ถูกติดตั้งแล้ว หากจำเป็นให้ดาวน์โหลดจาก nodejs org https //nodejs org/ ตรวจสอบการติดตั้งของคุณ node v npm v สร้างโครงการ gatsby ใหม่โดยใช้ gatsby cli รันคำสั่งต่อไปนี้ (แทนที่ todo app ด้วยชื่อโครงการที่คุณต้องการ) npx gatsby new todo app เปลี่ยนไปยังไดเรกทอรีโครงการของคุณ cd todo app เริ่มเซิร์ฟเวอร์การพัฒนาเพื่อตรวจสอบการตั้งค่า npx gatsby develop เว็บไซต์ gatsby ของคุณควรทำงานได้ในท้องถิ่นแล้ว เปิด url ที่ให้มาในเบราว์เซอร์ของคุณเพื่อยืนยัน จากนั้นคุณจะตั้งค่าฝั่งหลังของคุณบน back4app เพื่อจัดการการจัดเก็บข้อมูลและการโต้ตอบ api การสร้าง backend todo back4app ให้บริการ backend ที่จัดการอย่างเต็มที่ซึ่งขับเคลื่อนโดย parse , เสนอฐานข้อมูล nosql, การตรวจสอบสิทธิ์, cloud code, และ api ที่สร้างขึ้นโดยอัตโนมัติทันที ส่วนนี้จะนำคุณผ่านการสร้าง โมเดลข้อมูล task เพื่อเก็บรายการที่คุณต้องทำและเชื่อมต่อกับส่วนหน้า gatsby ของคุณ การตั้งค่าแอปพลิเคชันแบ็คเอนด์ของคุณ เข้าสู่ระบบ ไปที่ แดชบอร์ด back4app https //www back4app com/ และคลิก "สร้างแอปใหม่" ตั้งชื่อแอปพลิเคชันของคุณ (เช่น, todogatsbyapp ) และเลือก nodejs/parse เป็นประเภทแบ็คเอนด์ เมื่อแอปถูกสร้างขึ้นแล้ว ให้ไปที่ "ฐานข้อมูล" > "เบราว์เซอร์" คลิก "สร้างคลาส" และเลือก "กำหนดเอง" ตั้งชื่อคลาสว่า task และตั้งค่า การอนุญาตระดับคลาส เพื่ออนุญาตให้มีการอ่านและเขียนสาธารณะ (คุณสามารถปรับแต่งการตั้งค่าเหล่านี้ได้ในภายหลัง) ในคลาส task ให้เพิ่มฟิลด์ต่อไปนี้ ชื่อเรื่อง (string) – ชื่อของงาน คำอธิบาย (string) – รายละเอียดเกี่ยวกับงาน เสร็จสิ้น (boolean) – ระบุว่างานเสร็จสิ้นหรือไม่ วันครบกำหนด (date) – วันกำหนดเส้นตายสำหรับงาน คลิก "บันทึก" เพื่อสรุปสคีมา การรวม back4app กับ gatsby รวม back4app เข้ากับโปรเจกต์ gatsby ของคุณโดยใช้ parse javascript sdk ติดตั้ง sdk ผ่าน npm npm install parse กำหนดค่า sdk โดยการเริ่มต้นด้วย application id และ javascript key ดึงข้อมูลรับรองเหล่านี้จากแดชบอร์ด back4app ของคุณภายใต้ app settings > security & keys ในโปรเจกต์ของคุณ สร้างไฟล์ (เช่น src/utils/parse config js ) และเพิ่มการกำหนดค่าต่อไปนี้ // src/utils/parse config js import parse from "parse/dist/parse min js"; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; คุณสามารถนำเข้าการกำหนดค่านี้ไปยังหน้าและคอมโพเนนต์ gatsby ของคุณเพื่อโต้ตอบกับแบ็กเอนด์ของคุณได้แล้ว การพัฒนา frontend ด้วย gatsby ตอนนี้ที่แบ็กเอนด์ของคุณเชื่อมต่อแล้ว สร้างส่วนติดต่อผู้ใช้สำหรับแอปพลิเคชัน to do list ของคุณโดยใช้ gatsby คุณจะสร้างหน้าและคอมโพเนนต์เพื่อเพิ่ม แสดง อัปเดต และลบงานในขณะที่ใช้ react และ graphql การจัดระเบียบส่วนประกอบของคุณ แอปพลิเคชันของคุณจะประกอบด้วยส่วนประกอบหลักดังต่อไปนี้ taskform js – จัดการการเพิ่มงานใหม่ tasklist js – แสดงงานทั้งหมดและให้การควบคุมสำหรับการทำเครื่องหมายว่างานเสร็จสมบูรณ์หรือการลบมัน taskitem js – แทนที่งานแต่ละงานพร้อมกับการกระทำในการสลับการทำเสร็จหรือการลบมัน สร้าง โฟลเดอร์ส่วนประกอบ ภายใน src และเพิ่มไฟล์เหล่านี้ mkdir src/components touch src/components/taskform js src/components/tasklist js src/components/taskitem js การจัดการสถานะด้วย react hooks ใช้ react hooks ( usestate และ useeffect ) สำหรับการจัดการสถานะและผลข้างเคียง ในหน้าแรกของคุณ (เช่น src/pages/index js ), ตั้งค่าสถานะดังนี้ // src/pages/index js import react, { usestate, useeffect } from "react"; import parse from " /utils/parse config"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; const indexpage = () => { const \[tasks, settasks] = usestate(\[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map(task => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); }; export default indexpage; การสร้างคอมโพเนนต์ฟอร์มงาน ใน taskform js , สร้างฟอร์มที่ควบคุมได้สำหรับการเพิ่มงาน จัดการค่าข้อมูลโดยใช้ usestate และส่งข้อมูลไปยัง back4app // src/components/taskform js import react, { usestate } from "react"; import parse from " /utils/parse config"; const taskform = ({ fetchtasks }) => { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); }; export default taskform; การแสดงรายการงาน ใน tasklist js , แสดงรายการงานโดยการแมพผ่านอาร์เรย์งานและใช้ taskitem คอมโพเนนต์ // src/components/tasklist js import react from "react"; import taskitem from " /taskitem"; const tasklist = ({ tasks, fetchtasks }) => { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); }; export default tasklist; การสร้างคอมโพเนนต์ task item ใน taskitem js , สร้างคอมโพเนนต์ที่อนุญาตให้คุณทำเครื่องหมายงานว่าเสร็จสมบูรณ์หรือทำการลบมัน // src/components/taskitem js import react from "react"; import parse from " /utils/parse config"; const taskitem = ({ task, fetchtasks }) => { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); }; export default taskitem; การจัดรูปแบบแอปพลิเคชันของคุณ สร้างไฟล์ styles css ในโฟลเดอร์ src พร้อมการจัดรูปแบบพื้นฐาน / src/styles css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } container p { font size 1rem; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } นำเข้า css นี้ในเลย์เอาต์หรือหน้าของ gatsby ของคุณ (เช่น ใน gatsby browser js ) // gatsby browser js import " /src/styles css"; การทำให้ ui เสร็จสมบูรณ์ แอปพลิเคชัน to do list ของ gatsby ของคุณตอนนี้มีฟรอนต์เอนด์ที่มีพลศาสตร์ซึ่งรวมเข้ากับ back4app และการออกแบบที่กำหนดเอง แอปนี้ช่วยให้คุณสามารถเพิ่ม แสดง อัปเดต และลบงานได้ในขณะที่มั่นใจว่าการสื่อสารระหว่างฟรอนต์เอนด์และแบ็กเอนด์มีประสิทธิภาพ ถัดไป คุณจะปรับใช้เว็บไซต์ gatsby ของคุณโดยใช้แพลตฟอร์มการปรับใช้เว็บของ back4app การปรับใช้ฟรอนต์เอนด์บน back4app web deployment back4app web deployment เสนอสิ่งแวดล้อมที่จัดการอย่างเต็มที่และบรรจุในคอนเทนเนอร์สำหรับโฮสต์แอปพลิเคชันของคุณ ด้วยการปรับใช้ที่ใช้ docker คุณสามารถบรรจุเว็บไซต์ gatsby ของคุณและปรับใช้ได้อย่างง่ายดาย การกำหนดค่า gatsby สำหรับการผลิต gatsby สร้างเว็บไซต์แบบสแตติกโดยค่าเริ่มต้น สร้างเว็บไซต์ที่พร้อมสำหรับการผลิตของคุณด้วย npx gatsby build การสร้าง dockerfile สำหรับเว็บไซต์ของคุณ ก่อนที่จะสร้าง dockerfile , ให้สร้าง dockerignore ไฟล์ในไดเรกทอรีรากของโปรเจกต์ของคุณและเพิ่มบรรทัดโค้ดเหล่านี้ git node modules eslint prettier git vscode readme md dockerfile docker compose yml public cache ถัดไป สร้าง docker compose yml ไฟล์เพื่อใช้คำสั่ง docker compose เป้าหมายของไฟล์ควรเป็นขั้นตอนการปรับใช้ใน dockerfile ของคุณ ไฟล์ docker compose yml ของคุณควรมีคำสั่งด้านล่าง version '3' services app image todo app gatsby build context dockerfile dockerfile target deploy ports \ "8000 80" ตอนนี้ คุณสร้าง dockerfile ในรากโปรเจกต์เพื่อบรรจุเว็บไซต์ gatsby ของคุณ from node 20 as build workdir /usr/src/app copy run npm install run npm run build from nginx 1 18 alpine as deploy workdir /usr/share/nginx/html run rm rf / copy from=build /usr/src/app/public entrypoint \[ "nginx", " g", "daemon off;" ] การทดสอบคอนเทนเนอร์ในเครื่อง ก่อนการปรับใช้ สร้างและทดสอบคอนเทนเนอร์ docker ของคุณ docker build t todo gatsby frontend เรียกใช้คอนเทนเนอร์ docker run p 8000 80 todo gatsby frontend เยี่ยมชม http //localhost 8000 ในเบราว์เซอร์ของคุณเพื่อตรวจสอบว่าเว็บไซต์ของคุณให้บริการอย่างถูกต้อง การผลักดันไปยัง github และการปรับใช้ผ่าน back4app ผลักดันโปรเจกต์ของคุณไปยัง github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main จากนั้น ให้ทำการปรับใช้โดยใช้ back4app web deployment เข้าสู่ระบบที่ back4app web deployment https //www back4app com/containers คลิก "สร้างแอปใหม่" , ระบุชื่อ และเลือก github repository อนุญาตให้ back4app เข้าถึงที่เก็บของคุณและเลือก todo gatsby repo เลือก dockerfile deployment และยืนยันการตั้งค่าการสร้าง คลิก "ปรับใช้" เพื่อเริ่มกระบวนการสร้าง การติดตามและการจัดการการปรับใช้ หลังจากการปรับใช้ ให้ใช้ back4app dashboard เพื่อ ดูบันทึกสำหรับการแก้ไขปัญหา ติดตามประสิทธิภาพของคอนเทนเนอร์และการใช้ทรัพยากร กระตุ้นการปรับใช้ใหม่เมื่อมีการคอมมิตใหม่ กำหนดค่าชื่อโดเมนที่กำหนดเองหากจำเป็น การทดสอบและการดีบักแอปพลิเคชันของคุณ เมื่อถูกใช้งานแล้ว ให้ทดสอบเว็บไซต์ gatsby ของคุณอย่างละเอียด ตรวจสอบการเชื่อมต่อ api เปิดคอนโซลนักพัฒนาของเบราว์เซอร์ของคุณ (f12 → network) เพื่อตรวจสอบการเรียก api ระหว่างการดำเนินการงาน เพิ่มและเรียกคืนงาน ใช้ ui เพื่อเพิ่มงาน จากนั้นรีเฟรชเพื่อยืนยันการเก็บข้อมูลใน back4app database browser ทดสอบการดำเนินการ crud ตรวจสอบให้แน่ใจว่าการทำเครื่องหมายงานว่าเสร็จสมบูรณ์และการลบสะท้อนอย่างถูกต้องในแบ็คเอนด์ จัดการกรณีขอบ ตรวจสอบข้อมูลที่กรอกในฟอร์มและจำลองสภาพเครือข่ายที่ช้าโดยใช้เครื่องมือสำหรับนักพัฒนา หากมีปัญหาเกิดขึ้น ให้ตรวจสอบบันทึกของ back4app หรือเช็คการกำหนดค่า api ของคุณ แนวทางปฏิบัติที่ดีที่สุดในการใช้บริการ back4app ปรับปรุงประสิทธิภาพและความปลอดภัยของแอปพลิเคชันของคุณโดย การเพิ่มประสิทธิภาพการเรียก api ใช้คำขอแบบกลุ่มสำหรับการดำเนินการหลายรายการและสอบถามเฉพาะฟิลด์ที่จำเป็น การรักษาความปลอดภัยข้อมูลที่ละเอียดอ่อน เก็บข้อมูลรับรองเช่น application id และ javascript key ในตัวแปรสภาพแวดล้อม ด้วย gatsby ให้สร้างไฟล์ env gatsby parse app id=your app id gatsby parse js key=your js key การเปิดใช้งาน auto scaling เปิดใช้งานการปรับขนาดอัตโนมัติใน back4app web deployment เพื่อจัดการกับการเข้าชมที่สูง การเพิ่มความปลอดภัย จำกัดสิทธิ์ระดับคลาส (clps) เพื่อควบคุมการแก้ไขข้อมูลและตั้งค่า acl ตามที่ต้องการ การใช้ cloud code โอนภาระงานที่ซับซ้อนไปยัง cloud code เพื่อประสิทธิภาพที่ดีกว่าและลดการเปิดเผย api บทสรุป คุณได้สร้างแอปพลิเคชัน to do list แบบฟูลสแต็คโดยใช้ gatsby สำหรับส่วนหน้าและบริการแบ็คเอนด์ที่แข็งแกร่งของ back4app บทแนะนำนี้ได้แนะนำคุณในการตั้งค่าโปรเจกต์ gatsby การรวม parse sdk และการปรับใช้เว็บไซต์ของคุณโดยใช้เวิร์กโฟลว์ที่บรรจุใน back4app เมื่อคุณพัฒนาต่อไป ให้พิจารณาเพิ่มฟีเจอร์เช่นการตรวจสอบสิทธิ์ผู้ใช้ขั้นสูง การอัปเดตแบบเรียลไทม์ และการรวมกับบุคคลที่สาม สำหรับข้อมูลเพิ่มเติมและการสนับสนุน โปรดดูที่ เอกสาร back4app https //www back4app com/docs