วิธีใช้งาน Laravel Vite บน docker ที่เตรียมมาเอง

เรื่องของเรื่องมีอยู่ว่า ถ้าหากว่าเราอยากจะลองใช้ 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-vue';

export default defineConfig({
server: {
host: '0.0.0.0',
port: 5173,
hmr: {
host: '127.0.0.1',
},
},
plugins: [
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});

นอกจากนี้ ต้องไม่ลืมที่จะเปิด Port 5173 ให้กับ container ที่รัน PHP ด้วยนะครับ

version: "3.8"
name: my-laravel-project
services:
  web-server:
    ports:
      - "80:80"
      - "5173:5173" <===== เพิ่มตรงนี้

ใครที่กำลังมองหาทางออก ก็หวังว่าจะได้เจอ บทความนี้นะครับ ทุกคนจะได้ลองใช้ Vite กันจร้า

ข้อมูลที่ลอกมา https://mrzebra.co.uk/code/2023/01/16/how-to-use-laravel-vite-from-docker/