Deployment (การนำขึ้นใช้งาน)

การ deploy แอปพลิเคชัน Nuxt 3 เป็นขั้นตอนสำคัญในการนำแอปไปใช้งานจริง Nuxt 3 รองรับหลายวิธีในการ deploy ขึ้นอยู่กับความต้องการและรูปแบบการเรนเดอร์ที่คุณเลือกใช้

โหมดการ Render และผลต่อการ Deploy

Nuxt 3 มีโหมดการเรนเดอร์หลักๆ ที่ส่งผลต่อวิธีการ deploy:

1. Universal Rendering (SSR): เรนเดอร์ HTML ในฝั่งเซิร์ฟเวอร์ก่อนส่งไปยังเบราว์เซอร์
2. Client-Side Rendering (CSR): เรนเดอร์ทั้งหมดในฝั่งเบราว์เซอร์
3. Static Site Generation (SSG): สร้างไฟล์ HTML ทั้งหมดตอนบิลด์

วิธีการเลือกโหมดเรนเดอร์ใน nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  // สำหรับ SSR (ค่าเริ่มต้น)
  ssr: true,
  // สำหรับ CSR
  // ssr: false,

  // สำหรับ SSG
  // nitro: {
  //   preset: 'static'
  // }
});

การเตรียมแอปสำหรับ Production

ก่อนที่จะ deploy แอปพลิเคชัน Nuxt 3 สู่ production ควรตรวจสอบและเตรียมความพร้อมดังนี้:

1. การตั้งค่า Environment Variables

สร้างไฟล์ .env สำหรับการตั้งค่าต่างๆ:

# .env.example (ไฟล์ตัวอย่าง)
NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_API_SECRET=your-secret-key
DATABASE_URL=postgresql://user:password@localhost:5432/mydb

อย่าลืมเพิ่ม .env ใน .gitignore เพื่อป้องกันการอัปโหลดข้อมูลที่ละเอียดอ่อนขึ้น Git

# .gitignore
.env
.env.*
!.env.example

การเข้าถึง environment variables ในแอป Nuxt:

// การเข้าถึงใน nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // ตัวแปรที่ใช้ได้เฉพาะในฝั่งเซิร์ฟเวอร์
    apiSecret: process.env.NUXT_API_SECRET,

    // ตัวแปรที่สามารถใช้ได้ทั้งฝั่งไคลเอนต์และเซิร์ฟเวอร์
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE,
    },
  },
});

// การใช้งานในคอมโพเนนต์หรือหน้า
const config = useRuntimeConfig();

// ฝั่งเซิร์ฟเวอร์เท่านั้น
console.log(config.apiSecret);

// ใช้ได้ทั้งฝั่งไคลเอนต์และเซิร์ฟเวอร์
console.log(config.public.apiBase);

2. การตรวจสอบประสิทธิภาพ

ก่อน deploy ควรตรวจสอบประสิทธิภาพของแอปพลิเคชัน:

# วิเคราะห์ bundle size
npx nuxi analyze

# ตรวจสอบ type errors
npx nuxi typecheck

3. การ Build แอปสำหรับ Production

# สร้างเวอร์ชัน production
npm run build

การ Deploy บนแพลตฟอร์มต่างๆ

1. การ Deploy บน Vercel

Vercel เป็นแพลตฟอร์มที่เหมาะสำหรับแอป Nuxt 3 และรองรับทั้ง SSR, CSR, และ SSG

วิธีการ Deploy บน Vercel

1. ติดตั้ง Vercel CLI:

npm install -g vercel

2. เพิ่มไฟล์ vercel.json ในโปรเจค:

{
	"buildCommand": "npm run build",
	"outputDirectory": ".output",
	"framework": "nuxt",
	"devCommand": "npm run dev"
}

3. Deploy:

# Login และ deploy
vercel login
vercel

4. หรือเชื่อมต่อกับ GitHub และให้ Vercel deploy อัตโนมัติเมื่อมีการ push โค้ดไปยัง repository

2. การ Deploy บน Netlify

Netlify เป็นอีกแพลตฟอร์มที่นิยมสำหรับแอป Nuxt 3

วิธีการ Deploy บน Netlify

1. สร้างไฟล์ netlify.toml ในโปรเจค:

[build]
command = "npm run build"
publish = ".output/public"
functions = ".output/server"

[[redirects]]
from = "/*"
to = "/.netlify/functions/index"
status = 200

[functions]
included_files = [".output/server/**/*"]

2. สำหรับ SSG ให้ตั้งค่าดังนี้:

[build]
command = "npm run generate"
publish = ".output/public"

3. เชื่อมต่อ GitHub repository กับ Netlify และตั้งค่าการ deploy

3. การ Deploy บน Cloudflare Pages

Cloudflare Pages รองรับ Nuxt 3 ทั้งในโหมด SSR และ SSG

วิธีการ Deploy บน Cloudflare Pages

1. เพิ่มไฟล์ _routes.json ในโฟลเดอร์ public หรือใช้คำสั่ง:

npx nuxi generate --prerender

2. ตั้งค่าใน Cloudflare Pages:
   • Build command: npm run build
   • Build output directory: .output/public
   • สำหรับ SSR ให้ใช้ Cloudflare Pages Functions

4. การ Deploy บน Digital Ocean App Platform

Digital Ocean App Platform รองรับการ deploy แอป Nuxt 3 ในโหมด SSR

วิธีการ Deploy บน Digital Ocean

1. สร้างแอปใหม่ใน Digital Ocean App Platform
2. เชื่อมต่อกับ Git repository
3. ตั้งค่า build command เป็น npm run build
4. ตั้งค่า run command เป็น node .output/server/index.mjs

5. การ Deploy บน Google Cloud Run

Google Cloud Run เป็นบริการ serverless ที่เหมาะสำหรับแอป Nuxt 3 ในโหมด SSR

วิธีการ Deploy บน Google Cloud Run

1. สร้าง Dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY . .

RUN npm install
RUN npm run build

ENV HOST=0.0.0.0
ENV PORT=8080

EXPOSE 8080

CMD ["node", ".output/server/index.mjs"]

2. Build และ push Docker image:

# สร้าง Docker image
docker build -t gcr.io/[PROJECT-ID]/nuxt-app .

# Push image ไปยัง Google Container Registry
docker push gcr.io/[PROJECT-ID]/nuxt-app

# Deploy ไปยัง Cloud Run
gcloud run deploy nuxt-app --image gcr.io/[PROJECT-ID]/nuxt-app --platform managed

การ Deploy ด้วย Docker

Docker เป็นวิธีที่ยืดหยุ่นในการ deploy แอป Nuxt 3 โดยไม่ขึ้นกับแพลตฟอร์ม

การสร้าง Docker Image สำหรับ SSR

# Dockerfile
FROM node:18-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

FROM node:18-alpine

WORKDIR /app

COPY --from=builder /app/.output /app/.output

ENV HOST=0.0.0.0
ENV PORT=3000
EXPOSE 3000

CMD ["node", ".output/server/index.mjs"]

การใช้ Docker Compose

# docker-compose.yml
version: "3"

services:
  nuxt:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - NUXT_PUBLIC_API_BASE=https://api.example.com

การ Deploy แบบ Static (SSG)

สำหรับแอปที่ใช้ SSG โดยไม่ต้องการเซิร์ฟเวอร์:

# สร้างไฟล์ static
npm run generate

แล้ว deploy โฟลเดอร์ .output/public ไปยังบริการโฮสติ้งใดๆ เช่น GitHub Pages, Netlify, Vercel, หรือ Firebase Hosting

การ Deploy บน Firebase Hosting

1. ติดตั้ง Firebase CLI:

npm install -g firebase-tools

2. เริ่มต้นโปรเจค Firebase:

firebase login
firebase init hosting

3. กำหนดค่าใน firebase.json:

{
	"hosting": {
		"public": ".output/public",
		"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
		"rewrites": [
			{
				"source": "**",
				"destination": "/index.html"
			}
		]
	}
}

4. Build และ deploy:

npm run generate
firebase deploy --only hosting

การ Deploy แบบ Hybrid Rendering

Nuxt 3 รองรับการเรนเดอร์แบบ hybrid ซึ่งบางหน้าเป็น SSG และบางหน้าเป็น SSR:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // หน้าแรกใช้ SSG
    "/": { prerender: true },
    // หน้าบล็อกทั้งหมดใช้ SSG
    "/blog/**": { prerender: true },
    // API routes ใช้ SSR
    "/api/**": { ssr: true },
    // หน้าแดชบอร์ดใช้ CSR
    "/dashboard/**": { ssr: false },
  },
});

การตั้งค่า CI/CD Pipeline

การใช้ CI/CD (Continuous Integration/Continuous Deployment) ช่วยให้กระบวนการ deploy อัตโนมัติและมีประสิทธิภาพ

ตัวอย่าง GitHub Actions Pipeline

# .github/workflows/deploy.yml
name: Deploy Nuxt App

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "18"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npm run lint

      - name: Type check
        run: npm run typecheck

      - name: Build
        run: npm run build
        env:
          NUXT_PUBLIC_API_BASE: ${{ secrets.NUXT_PUBLIC_API_BASE }}
          NUXT_API_SECRET: ${{ secrets.NUXT_API_SECRET }}

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}
          vercel-args: "--prod"

การจัดการ SSL และ Custom Domain

การตั้งค่า SSL และโดเมนแบบกำหนดเองแตกต่างกันไปตามแพลตฟอร์ม:

Vercel

1. ไปที่ Project Settings
2. เลือก Domains
3. เพิ่มโดเมนของคุณ
4. ตั้งค่า DNS ตามคำแนะนำ
5. Vercel จะจัดการ SSL ให้อัตโนมัติ

Netlify

1. ไปที่ Site settings
2. เลือก Domain management
3. เพิ่ม Custom domain
4. ตั้งค่า DNS ตามคำแนะนำ
5. Netlify จะจัดการ SSL ให้อัตโนมัติ

การใช้ Content Delivery Network (CDN)

การใช้ CDN ช่วยให้แอปพลิเคชันโหลดเร็วขึ้นสำหรับผู้ใช้ทั่วโลก

Cloudflare CDN

1. สมัครบัญชี Cloudflare
2. เพิ่มเว็บไซต์ของคุณ
3. ปรับเปลี่ยน nameservers ของโดเมน
4. ตั้งค่าการแคชข้อมูลตามต้องการ

การตั้งค่า Cache Headers

// server/middleware/cache-control.ts
export default defineEventHandler((event) => {
  // ตั้งค่า cache headers สำหรับไฟล์สถิต
  if (event.path.includes("/assets/")) {
    setResponseHeader(
      event,
      "Cache-Control",
      "public, max-age=31536000, immutable",
    );
  } // ตั้งค่า cache headers สำหรับหน้า HTML
  else if (event.path.endsWith(".html")) {
    setResponseHeader(event, "Cache-Control", "public, max-age=3600");
  }
});

การดูแลแอปหลัง Deploy

การตรวจสอบประสิทธิภาพ

ใช้เครื่องมือเช่น Lighthouse, WebPageTest หรือ PageSpeed Insights เพื่อตรวจสอบประสิทธิภาพ

การตรวจสอบข้อผิดพลาด

ใช้เครื่องมือการตรวจสอบข้อผิดพลาดเช่น Sentry หรือ LogRocket เพื่อติดตามข้อผิดพลาดในแอปพลิเคชัน

# ติดตั้ง Sentry
npm install @sentry/vue @sentry/tracing

// plugins/sentry.client.ts
import { defineNuxtPlugin } from "#app";
import { BrowserTracing } from "@sentry/tracing";
import * as Sentry from "@sentry/vue";

export default defineNuxtPlugin(({ vueApp }) => {
  const config = useRuntimeConfig();

  if (config.public.sentryDsn) {
    Sentry.init({
      app: vueApp,
      dsn: config.public.sentryDsn,
      integrations: [
        new BrowserTracing({
          tracingOrigins: ["localhost", /^\//],
        }),
      ],
      tracesSampleRate: 1.0,
      environment: config.public.environment || "development",
    });
  }
});

การตรวจสอบการใช้งาน

ใช้เครื่องมือวิเคราะห์เช่น Google Analytics หรือ Plausible เพื่อติดตามการใช้งานแอป

# ติดตั้ง Google Analytics
npm install vue-gtag-next

// plugins/analytics.client.ts
import { defineNuxtPlugin } from "#app";
import VueGtag from "vue-gtag-next";

export default defineNuxtPlugin(({ vueApp }) => {
  const config = useRuntimeConfig();

  if (config.public.gaId) {
    vueApp.use(VueGtag, {
      property: {
        id: config.public.gaId,
      },
    });
  }
});

แนวทางปฏิบัติที่ดีสำหรับการ Deploy

1. ใช้ Continuous Integration: ใช้ CI เพื่อตรวจสอบโค้ดก่อน deploy

2. ทดสอบในสภาพแวดล้อมที่เหมือนกับ Production: ใช้ staging environment ที่เหมือนกับ production

3. ใช้ Feature Flags: ใช้ feature flags เพื่อเปิดปิดฟีเจอร์ใหม่โดยไม่ต้อง deploy ใหม่

4. ติดตาม Dependencies: ตรวจสอบและอัปเดต dependencies เพื่อความปลอดภัยและประสิทธิภาพ

5. จัดการ Environment Variables: ใช้ .env และจัดการตัวแปรสภาพแวดล้อมอย่างเหมาะสม

6. เตรียม Rollback Plan: มีแผนสำรองในกรณีที่การ deploy ไม่สำเร็จ

7. ใช้ Health Checks: ตรวจสอบสถานะของแอปพลิเคชันหลัง deploy

8. เก็บ Logs: เก็บ logs ให้ครบถ้วนเพื่อช่วยในการแก้ไขปัญหา

9. ตั้งค่า Monitoring: ตรวจสอบประสิทธิภาพและความพร้อมใช้งานของแอปพลิเคชัน

10. ทำ Blue-Green Deployment: ใช้ blue-green deployment เพื่อลดเวลาที่แอปไม่พร้อมใช้งาน