Wrikka Learn

Dark mode

Production Deployment ​

การนำ Nuxt.js ไปใช้งานจริง (Production) จำเป็นต้องมีการตั้งค่าที่เหมาะสมเพื่อให้แอปพลิเคชันทำงานได้อย่างมีประสิทธิภาพและปลอดภัย

Build Optimization ​

การปรับแต่ง build เพื่อประสิทธิภาพสูงสุด

bash
# สร้าง production build
bun run build

# Generate static site (สำหรับ Static Site Generation)
bun run generate

# รัน production server
bun run start

Environment Variables ​

การจัดการ environment variables สำหรับ production

sh
# .env.production
NUXT_PUBLIC_API_URL=https://api.example.com
NUXT_PRIVATE_KEY=your-secure-key

Deployment Platforms ​

แพลตฟอร์มที่รองรับการ deploy Nuxt.js

Static Hosting (SSG) ​

bash
# Generate static files
bun run generate

# Deploy to any static hosting (Netlify, Vercel, GitHub Pages, etc.)

Node.js Server (SSR) ​

bash
# Build for production
bun run build

# Start production server
bun run start

Docker ​

dockerfile
# Dockerfile
FROM node:18-alpine

WORKDIR /app

# Copy package files
COPY package*.json ./
COPY bun.lockb ./

# Install dependencies
RUN bun install --frozen-lockfile

# Copy app files
COPY . .

# Build app
RUN bun run build

# Expose port
EXPOSE 3000

# Start the app
CMD ["bun", "run", "start"]

Performance Optimization ​

เทคนิคเพิ่มประสิทธิภาพ

Image Optimization ​

vue
<template>
  <NuxtImg
    :src="imageUrl"
    :alt="altText"
    width="500"
    height="300"
    loading="lazy"
    :sizes="'sm:100vw md:50vw lg:800px'"
  />
</template>

<script setup>
// ใช้ NuxtImg สำหรับการ optimize รูปภาพอัตโนมัติ
const imageUrl = "/images/hero.jpg";
const altText = "Hero Image";
</script>

Lazy Loading Components ​

vue
<template>
  <div>
    <LazyHeavyComponent v-if="showHeavy" />
    <button @click="showHeavy = true">โหลดคอมโพเนนต์</button>
  </div>
</template>

<script setup>
const showHeavy = ref(false);
</script>

Module Configuration ​

Nuxt Config ​

js
// nuxt.config.ts
export default defineNuxtConfig({
  // Production-specific configuration
  ssr: true, // เปิด SSR สำหรับ SEO ที่ดีขึ้น
  sourcemap: false, // ปิด sourcemap ใน production

  // เปิดใช้งาน compression
  nitro: {
    compressPublicAssets: true,
  },

  // ตั้งค่า security headers
  routeRules: {
    "/**": {
      headers: {
        "X-Frame-Options": "SAMEORIGIN",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin",
      },
    },
  },
});

Caching Strategy ​

การตั้งค่า Caching สำหรับ CDN และ browser

js
// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Cache static assets for 1 year
    "/_nuxt/**": {
      headers: {
        "Cache-Control": "public, max-age=31536000, immutable",
      },
    },
    // Cache API responses for 1 hour
    "/api/**": {
      cache: { maxAge: 60 * 60 },
    },
  },
});

Monitoring and Error Tracking ​

Sentry Integration ​

bash
# ติดตั้ง Sentry module
bun add @nuxtjs/sentry
js
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/sentry"],

  sentry: {
    dsn: process.env.SENTRY_DSN,
    config: {
      // ตั้งค่าเพิ่มเติมของ Sentry
      environment: "production",
      tracesSampleRate: 0.1,
    },
  },
});

Deployment Checklist ​

  • [ ] ทดสอบ production build
  • [ ] ตั้งค่า environment variables
  • [ ] เปิดใช้งาน HTTPS
  • [ ] ตั้งค่า CDN (ถ้ามี)
  • [ ] ตั้งค่า monitoring และ error tracking
  • [ ] ทดสอบ performance ด้วย Lighthouse
  • [ ] ตั้งค่า backup และ recovery
  • [ ] ตั้งค่า logging และ monitoring

Troubleshooting ​

Common Issues ​

  1. Build Fails

    • ตรวจสอบ dependencies และ node version
    • ลบ node_modules และ .nuxt แล้วลองติดตั้งใหม่

  2. Environment Variables

    • ตรวจสอบว่าตั้งค่าตัวแปรสภาพแวดล้อมถูกต้อง
    • ใช้ NUXT_PUBLIC_ prefix สำหรับตัวแปรที่ต้องการใช้ในฝั่ง client

  3. Performance Issues

    • ใช้ nuxi analyze เพื่อวิเคราะห์ bundle size
    • ตรวจสอบการใช้ lazy loading components

Additional Resources ​