全端開發新標準：Laravel 12 + Vue 3 + Pinia + Tailwind CSS v4 容器化實戰

全端開發新標準：Laravel 12 + Vue 3 + Pinia + Tailwind v4 容器化實戰

1. 目標 (Objective)

在 2025 年的開發環境中，Laravel 12 正式將 PHP 8.4 列為最低門檻，這標誌著後端進入了更嚴謹、高性能的時代。結合 Tailwind CSS v4 的 Rust 編譯引擎與 Vue 3 的反應式力量，我們的目標是建立一個開發延遲趨近於零、生產環境高度穩定的容器化全端模板。

---

2. 技術亮點 (Technical Highlights)

• PHP 8.4 核心應用：Laravel 12 深度適配 PHP 8.4，支援 Property Hooks 與 Asymmetric Visibility，顯著減少 Boilerplate 代碼。

• Tailwind CSS v4 Oxide 引擎：完全棄用 JavaScript 配置，透過 Rust 引擎達成毫秒級編譯，並原生支援 CSS 變數。

• Pinia 狀態管理：取代 Vuex，提供更直觀、具備完整 TypeScript 支持的前端狀態流轉。

• Nginx 代理優化：作為容器入口，精準分流 Vite 熱更新 (HMR) 流量與 PHP-FPM 動態請求。

---

3. 架構圖描述 (Architecture Diagram)

本系統透過 Docker Compose 編排三個核心服務，構建出動靜分離的高性能架構：

• Nginx Container: 負責 SSL/HTTP 入口，直接處理 public/ 下的靜態資源。

• App Container (PHP 8.4): 執行 Laravel 12 核心邏輯，透過 FastCGI 與 Nginx 通訊。

• DB Container (MySQL 8.4): 負責資料持久化。

---

4. 實戰代碼：容器化環境建置

A. PHP 8.4 Dockerfile

針對 Laravel 12 的高版本要求，我們需要確保鏡像環境的完整性：

Dockerfile

FROM php:8.4-fpm

# 安裝 Laravel 12 必備擴展
RUN apt-get update && apt-get install -y \
    git unzip libzip-dev nodejs npm libpng-dev libicu-dev \
    && docker-php-ext-install pdo_mysql zip gd intl

# 引入最新版 Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html
COPY . .

# 權限與依賴處理
RUN chown -R www-data:www-data storage bootstrap/cache \
    && composer install \
    && npm install && npm run build

EXPOSE 9000
CMD ["php-fpm"]

B. Nginx 核心配置 (nginx/default.conf)

Nginx 是確保 Laravel 與 Vite 順暢運作的關鍵調度者：

Nginx

server {
    listen 80;
    root /var/www/html/public;
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # 轉發 PHP 請求至 app 容器
    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    # 靜態資源快取
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires max;
        access_log off;
    }
}

---

5. 前端進化：Tailwind v4 + Pinia

Tailwind CSS v4 的極簡配置

在 resources/css/app.css 中，你不再需要龐大的 JS 配置文件：

CSS

@import "tailwindcss";

@theme {
  --color-brand: #ff2d20; /* 鎖定 Laravel 經典紅 */
}

Pinia Store 範例 (resources/js/stores/useCounter.js)

JavaScript

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
    const increment = () => count.value++;
    
    return { count, increment };
});

---

6. 流程圖描述 (Flowchart)

1. 請求接收：Nginx 監聽 80 埠，判斷為靜態資源（Vue 編譯檔）或動態請求（PHP）。

2. 後端處理：PHP 8.4 引擎執行 Laravel 邏輯，利用 Property Hooks 加速資料物件模型處理。

3. 狀態注入：Vue 3 透過 Inertia 或 API 取得資料，更新 Pinia Store。

4. 樣式渲染：Tailwind v4 預編譯的 CSS 變數直接套用至 DOM，達成毫秒級佈局更新。

---

7. 結論 (Conclusion)

這套 Laravel 12 + PHP 8.4 的全端容器化方案，不僅僅是技術的升級，更是對現代 Web 工程標準的實踐。透過 Nginx 的精準轉發與 Docker 的環境隔離，我們成功將複雜的環境依賴化繁為簡。