CodingRemember

  ก่อนหน้านี้ติดปัญหาเรื่องการพัฒนาเว็บแอพลิเคชันด้วย Laravel และ Vuejs โดยใช้ Vite ควบคู่ในการพัฒนา Frontend ตอนรัน npm run dev ก็ดูเหมือนจะใช้งานได้ปกติ แต่พอมาลอง build ดูปรากฏว่าตัว application คอย redirect ไปที่ path /build ตลอดเลย พอหาข้อมูล ไปๆ มาๆ ก็เจอว่าตอนที่เขียนเราใช้ router ของฝั่ง vuejs ซึ่งทำเป็น SPA const router = createRouter({     history: createWebHistory(import.meta.env.BASE_URL), }); จากโค๊ดด้านบนนี่แหละที่ มึนอยู่หลาย ชั่วโมง แก้ง่ายๆ ที่สุด คือทำแบบนี้ const router = createRouter({     history: createWebHistory(), }); เข้าใจว่า import.meta.env.BASE_URL ค่า default น่าจะเป็น /build ถ้าเอาออกจะช่วยแก้ไขปัญหาได้ แต่ยังไม่ได้ลองว่าถ้าเราไปกำหนด env ตัวนี้ขึ้นมาก็อาจจะช่วยแก้ไขปัญหาได้ด้วยหรือเปล่า? VITE_BASE_URL="/" ใครลองแล้วได้ผลมาคอมเม้นกันด้วยนะ วันนี้ไปก่อนละ

  สำหรับมือใหม่ที่เริ่มพัฒนาเว็บแอพพลิเคชันโดยใช้ Laravel เมื่อต้องทำงานที่เกี่ยวข้องกับ database อาจจะต้องปวดหัวกับ Eloquent และเรื่องราวในวันนี้จะมาพูดถึงว่า มันคืออะไร และใช้งานยังไง อย่างที่ใน docs ได้อธิบายคร่าวๆ ว่า Eloquent คือ ORM ตัวหนึงที่เสริมในเรื่องของ Relations เข้ามา ซึ่งการเชื่อมโยง หรือ Relations ไม่ไช่การ join แต่เป็นการบอกให้ Model รู้ว่ามี relations กับ table ไหนใน database ของเรา ยกตัวอย่างเช่น ข้อมูลของตาราง Users ที่เราออกแบบว่าจะแยกข้อมูลกันดังนี้ Users Addresses จาก 2 ตารางด้านบน เราจะทำการเขียนโค้ดให้เชื่อมข้อมูลกันจาก Model ของ Users โดยจะต้องมี column ที่นำมาเชื่อมกันด้วย เช่น ที่ตารางของ addresses จะต้องมี column user_id เก็บไว้ด้วย โดยเราจะใช้ Relation One To One ในการทำ relation กัน  หลายๆ คนจะ งง ว่ามำดึงข้อมูลมายังไง จริงๆ ตัว Eloquent จะทำการ query มาใหม่ไม่ได้ใช้ query เดียว จาก ตัวอย่างข้างบน ถ้าทำถูกต้องได้ 2 query select * from users where id='1' select * from addresses where user_id=1

เรื่องของเรื่องมีอยู่ว่า ถ้าหากว่าเราอยากจะลองใช้ Vite ที่ทาง Laravel เริ่มยัดเยียดมาให้ในเวอร์ชันหลังๆ น่าจะประมาณ Laravel 8+ ถ้าไม่ได้ใช้ Laravel Sail ในการรัน Local development ก็น่าที่จะติดปัญหาในเรื่องของการที่ application ที่เราเขียนมองหา Frontend server ของ Vite ไม่เจอ GET http://127.0.0.1:5173/@vite/client net::ERR_CONNECTION_REFUSED GET http://0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID ปัญหาที่เกิดขึ้น เนื่องจากโดยค่าเริ่มต้น Vite จะผูกกับที่อยู่ localhost 127.0.0.1 ซึ่งหมายความว่าสามารถเข้าถึงได้จากภายในคอนเทนเนอร์ Docker เท่านั้น หากต้องการอนุญาตการเข้าถึงจากภายนอกคอนเทนเนอร์ คุณจะต้องผูกเข้ากับที่อยู่ IP ที่เป็น 0.0.0.0 หรือ Localhostโดยใช้เซิร์ฟเวอร์ ตัวแปรการกำหนดค่าโฮสต์ อย่างไรก็ตาม สิ่งนี้ทำให้เว็บไซต์พยายามเชื่อมต่อกับ 0.0.0.0 ซึ่งไม่ถูกต้อง หากต้องการบอกให้ส่วนหน้าใช้ localhost คุณต้องตั้งค่าเซิร์ฟเวอร์ ตัวแปร hmr.host import { defineConfig } from 'vite' ; import laravel from 'laravel-vite-plugin' ; import vue from '@vitejs/plugin-vu...