วิธีนำเว็บไซต์ Vibe Code ที่สร้างด้วย AI ขึ้น Plesk Hosting

วิธีนำเว็บไซต์ Vibe Code ขึ้น Plesk Hosting — ทุกวันนี้หลายคนสร้างเว็บไซต์ด้วย AI เช่น Claude Code, Cursor, Lovable, Bolt, v0 หรือ Replit แบบที่เรียกกันว่า "Vibe Coding" คือสั่งงานเป็นภาษาธรรมดาแล้วให้ AI เขียนโค้ดให้ ได้เว็บที่ใช้งานได้จริงภายในไม่กี่ชั่วโมง แต่ขั้นตอนที่หลายคนติดคือ จะเอาเว็บนี้ขึ้นโฮสติ้งของตัวเองอย่างไร บทความนี้สรุป 3 วิธีที่ใช้ได้บน Plesk ตั้งแต่อัปโหลดไฟล์ธรรมดาไปจนถึง Auto Deploy จาก GitHub และรันแอป Node.js

เว็บ Vibe Code คืออะไร และควรเลือกวิธีไหน

โค้ดที่ AI สร้างให้ส่วนใหญ่เป็นโปรเจกต์ JavaScript สมัยใหม่ (React, Vite, Next.js, Astro, Express ฯลฯ) ซึ่งต้อง build ก่อนนำขึ้นเว็บ สิ่งแรกที่ต้องรู้คือผลลัพธ์ของโปรเจกต์คุณเป็นแบบไหน:

• Static site — build แล้วได้โฟลเดอร์ไฟล์ HTML/CSS/JS ล้วน ๆ (เช่น dist/ หรือ out/) นำไปวางบนเว็บเซิร์ฟเวอร์ได้เลย ไม่ต้องรัน Node.js ค้างไว้
• Node.js app — มีโค้ดฝั่งเซิร์ฟเวอร์ที่ต้องทำงานตลอดเวลา เช่น API, ระบบล็อกอิน, Server-Side Rendering

ถ้าไม่แน่ใจ ให้ถาม AI ที่สร้างโปรเจกต์ตรง ๆ ว่า "โปรเจกต์นี้ build เป็น static site ได้ไหม และโฟลเดอร์ output ชื่ออะไร"

เตรียมโปรเจกต์ก่อนขึ้นโฮสติ้ง

1. Build บนเครื่องตัวเองให้ผ่านก่อน — ถ้า build ในเครื่องไม่ผ่าน ขึ้นเซิร์ฟเวอร์ก็ไม่ผ่านเช่นกัน
2. ดูโฟลเดอร์ output — Vite และ Astro ใช้ dist/ ส่วน Next.js แบบ static export ใช้ out/ เปิดดูว่ามีไฟล์ index.html อยู่ข้างใน
3. ห้าม commit ความลับ — API key, รหัสฐานข้อมูล ต้องอยู่ในไฟล์ .env และไฟล์นี้ต้องอยู่ใน .gitignore เสมอ เครื่องมือ AI บางตัวเขียน key ลงในโค้ดตรง ๆ ให้ตรวจก่อนทุกครั้ง

# ติดตั้ง dependency และ build
npm ci
npm run build

# ตรวจว่าได้โฟลเดอร์ output และมี index.html
ls dist/        # Vite / Astro
ls out/         # Next.js (output: 'export')

# ตรวจว่า .env ไม่ถูก Git ติดตาม
git check-ignore .env && echo "OK: .env ถูก ignore แล้ว"

สำหรับ Next.js ที่ต้องการ static export ให้ตั้งค่าใน next.config.js แบบนี้ (แนะนำ trailingSlash: true เพื่อให้แต่ละหน้าเป็น /about/index.html ซึ่งเว็บเซิร์ฟเวอร์ทั่วไปเสิร์ฟได้ทันที):

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
};

module.exports = nextConfig;

ข้อควรรู้: static export ใช้ฟีเจอร์ที่ต้องมีเซิร์ฟเวอร์ไม่ได้ เช่น Server Actions, Cookies, Rewrites/Redirects ใน config และ Image Optimization แบบค่าเริ่มต้น ถ้าโปรเจกต์ใช้สิ่งเหล่านี้ให้ไปวิธีที่ 3

วิธีที่ 1 อัปโหลดเว็บ Static ผ่าน File Manager

เหมาะกับเว็บเล็ก ๆ ที่นาน ๆ แก้ที ไม่ต้องตั้งค่าอะไรเพิ่ม

1. บีบอัด ไฟล์ข้างใน โฟลเดอร์ dist/ (หรือ out/) เป็น ZIP — ระวังอย่าบีบทั้งโฟลเดอร์ ไม่งั้นเว็บจะไปอยู่ที่ /dist/
2. ใน Plesk ไปที่ Websites & Domains แล้วในหน้า Dashboard ของโดเมน คลิก Files (ในกลุ่ม Files & Databases) เพื่อเปิด File Manager
3. เปิดโฟลเดอร์ httpdocs (Document root ค่าเริ่มต้นของโดเมนหลัก แถบที่อยู่จะแสดง Home directory › httpdocs) ติ๊กไฟล์หน้า default ของ Plesk แล้วกด Remove
4. กดปุ่ม + สีน้ำเงิน › Upload File แล้วเลือกไฟล์ ZIP หรือจะลากไฟล์ ZIP มาวางในรายการไฟล์ก็ได้
5. คลิกแถวของไฟล์ ZIP › Extract Files ติ๊ก Replace existing files ถ้าเป็นการอัปเดตทับของเดิม แล้วกด OK

# สร้าง ZIP จาก "ไฟล์ข้างใน" dist (macOS / Linux)
cd dist && zip -r ../site.zip . && cd ..

File Manager แตกไฟล์ได้ทั้ง ZIP, RAR, TAR, TGZ และ TAR.GZ ถ้าถนัด FTP/SFTP ก็อัปโหลดไฟล์ใน dist/ เข้า httpdocs ได้เช่นกัน

วิธีที่ 2 (แนะนำ) Deploy อัตโนมัติจาก GitHub ด้วย Plesk Git

เครื่องมือ AI เกือบทุกตัว (Lovable, Bolt, Replit, Cursor, Claude Code) push โค้ดขึ้น GitHub ได้ เมื่อเชื่อม repository เข้ากับ Plesk Git แล้ว ทุกครั้งที่ push เว็บจะอัปเดตเอง ไม่ต้องอัปโหลดซ้ำ ขั้นตอนพื้นฐานของ Git ใน Plesk อ่านได้ที่ การ Deploy โค้ดจาก Git Repository ใน Plesk

ขั้นที่ 1 เพิ่ม Repository

1. ไปที่ Websites & Domains › Git › Add Repository เลือก Remote Git hosting like GitHub or BitBucket
2. ใส่ URL ของ repository — ถ้าเป็น private repo แนะนำแบบ SSH แล้วนำ SSH public key ที่ Plesk แสดงไปใส่เป็น Deploy key ใน GitHub (ขั้นตอนละเอียดดู Auto Deploy บน Plesk ผ่าน GitHub)
3. ที่ Change branch and path เลือก branch (เช่น main) และ ตั้งปลายทางเป็นโฟลเดอร์นอก httpdocs เช่น /app

ทำไมไม่ deploy ลง httpdocs ตรง ๆ? เพราะ repository มีซอร์สโค้ด package.json และไฟล์ตั้งค่าที่ไม่ควรเปิดให้คนทั่วไปดาวน์โหลด ให้เก็บโค้ดไว้นอกโฟลเดอร์สาธารณะ แล้วชี้ Document root ไปที่โฟลเดอร์ output เท่านั้น

ขั้นที่ 2 ตั้งค่า Deploy mode และ Webhook

1. เปิด Repository Settings เลือก Automatic deployment (ค่าเริ่มต้น) — หรือ Manual deployment ถ้าอยากกด Deploy เอง
2. คัดลอก Webhook URL ที่ Plesk สร้างให้ ไปใส่ที่ GitHub › Settings › Webhooks ให้ทำงานเมื่อมี push

ขั้นที่ 3 ให้เซิร์ฟเวอร์ build ให้ (ทางเลือกขั้นสูง)

ติ๊ก Enable additional deploy actions แล้วใส่คำสั่ง shell (บรรทัดละคำสั่ง) ซึ่งจะรันหลัง deploy ทุกครั้ง:

# ใช้ path เต็มของ npm ที่มากับ Node.js ของ Plesk (เปลี่ยน 22 เป็นเวอร์ชันที่ติดตั้งจริง)
/opt/plesk/node/22/bin/npm ci > deploy.log 2>&1
/opt/plesk/node/22/bin/npm run build >> deploy.log 2>&1

ข้อควรระวัง: deploy actions อาจรันในสภาพแวดล้อม chroot ที่มีคำสั่งให้ใช้จำกัด ทำให้เจอ npm: command not found แม้จะใช้ path เต็มแล้ว ถ้าเจอปัญหานี้ ให้ดู deploy.log หรือติดต่อทีมซัพพอร์ต หรือใช้ทางเลือกด้านล่างแทน

ทางเลือกที่ใช้ได้เสมอ: build ก่อน push

ให้ GitHub Actions (หรือเครื่องของคุณ) build แล้ว push เฉพาะโฟลเดอร์ output ไปไว้ที่ branch แยก เช่น deploy จากนั้นตั้ง Plesk Git ให้ดึง branch นั้น วิธีนี้เซิร์ฟเวอร์ไม่ต้องรัน npm เลย ดูตัวอย่าง workflow ได้ที่ Auto Deploy Plesk ด้วย GitHub Actions

ขั้นที่ 4 ชี้ Document root ไปที่โฟลเดอร์ output

ไปที่ Hosting Settings ของโดเมน แก้ช่อง Document root จาก httpdocs เป็นโฟลเดอร์ output เช่น app/dist (Next.js ใช้ app/out) แล้วกด OK (ถ้าใช้ทางเลือก branch deploy ที่มีแต่ไฟล์ output ให้ชี้ไปที่ app)

วิธีที่ 3 รันเป็นแอป Node.js ด้วย Plesk Node.js

ใช้กับโปรเจกต์ที่ต้องมีเซิร์ฟเวอร์ เช่น Express API หรือ Next.js แบบ SSR ต้องติดตั้ง Node.js Toolkit บนเซิร์ฟเวอร์ก่อน (รายละเอียดดู การใช้ Node.js Toolkit รัน Node.js App บน Plesk) ถ้าไม่เห็นเมนู Node.js ในแพ็กเกจของคุณ ให้ติดต่อทีมซัพพอร์ต

1. นำโค้ดขึ้นเซิร์ฟเวอร์ (แนะนำ Plesk Git ตามวิธีที่ 2 ลงโฟลเดอร์ เช่น /app)
2. ไปที่ Websites & Domains › โดเมน › Node.js หน้า Node.js on <โดเมนของคุณ> มีสองแท็บคือ Dashboard และ Run Node.js commands ในแท็บ Dashboard ให้ตั้งค่า:
   • Node.js Version — เลือกให้ตรงกับที่โปรเจกต์ใช้ (ดู engines ใน package.json)
   • Package Manager — Plesk ตรวจหาให้เอง (เช่น npm) และแสดงข้อความ “This is what we detected, you can change it”
   • Application Root — โฟลเดอร์ที่มี package.json เช่น /app
   • Document Root — โฟลเดอร์ไฟล์ static ซึ่ง Plesk แนะนำว่า “It is recommended to set the document root to a subdirectory of the application root (such as public/) due to security considerations.” (ควรเป็นโฟลเดอร์ย่อยใน Application Root เพื่อความปลอดภัย) เช่น /app/public
   • Application Mode — เลือก production (ค่านี้กำหนด NODE_ENV)
   • Application Startup File — ไฟล์เริ่มแอป ต้องอยู่ใน Application Root ค่าเริ่มต้นคือ app.js ให้เปลี่ยนเป็นไฟล์ของคุณ เช่น server.js
   • Custom environment variables — ใส่ค่าจาก .env เช่น API key ที่นี่ แทนการ commit ลง Git
3. กด Enable Node.js ช่อง Application URL จะแสดงที่อยู่ของแอป
4. เปิดแท็บ Run Node.js commands เพื่อติดตั้ง dependency (เช่น npm install) และถ้าต้อง build ก่อนรัน ก็สั่ง build ที่นี่ (เช่น npm run build)
5. ทุกครั้งที่อัปเดตโค้ดหรือแก้ environment variables ให้กด Restart App (มีในแท็บ Dashboard หลังเปิดใช้ Node.js แล้ว)

ตัวอย่าง server.js แบบ Express ที่อ่านพอร์ตจาก environment:

const express = require('express');
const app = express();

app.use(express.static('public'));
app.get('/api/health', (req, res) => res.json({ ok: true }));

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`listening on ${port}`));

สำหรับ Next.js แบบ SSR ต้องมีไฟล์เริ่มเซิร์ฟเวอร์สำหรับใส่ใน Application Startup File ให้ดูวิธีสร้างตามเอกสารของ Next.js เวอร์ชันที่ใช้ หรือให้ AI ที่สร้างโปรเจกต์ช่วยเตรียมไฟล์นี้ แล้ว build ในแท็บ Run Node.js commands ก่อนกด Restart App

ถ้ากด Restart App แล้วไม่มีผล ให้สร้างไฟล์ tmp/restart.txt ใน Application Root ผ่าน SSH:

cd /var/www/vhosts/example.com/app
mkdir -p tmp && touch tmp/restart.txt

เปิดใช้ HTTPS ด้วย SSL ฟรี

เมื่อเว็บขึ้นแล้ว อย่าลืมติดตั้ง SSL Certificate ฟรีจาก Let's Encrypt ในเมนู SSL/TLS Certificates ของโดเมน และเปิด redirect จาก HTTP ไป HTTPS ขั้นตอนละเอียดดู วิธีติดตั้ง SSL Certificate จาก Let's Encrypt ใน Plesk

แก้ปัญหาที่พบบ่อย

ตัวอย่าง .htaccess สำหรับ SPA ให้วางไว้ใน Document root (ใช้ได้เมื่อเปิด nginx Proxy mode ซึ่งเป็นค่าเริ่มต้นของ Plesk) — Vite จะคัดลอกไฟล์จากโฟลเดอร์ public/ ไปไว้ใน dist/ ให้อัตโนมัติ จึงวางไฟล์นี้ไว้ที่ public/.htaccess ของโปรเจกต์ได้เลย:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

ถ้าเว็บเสิร์ฟด้วย nginx อย่างเดียว (ปิด Proxy mode) .htaccess จะไม่มีผล ต้องใช้ directive ของ nginx ด้านล่าง ซึ่งลูกค้าทั่วไปแก้เองไม่ได้ ให้ติดต่อทีมซัพพอร์ตเพื่อเพิ่มให้:

location / {
    try_files $uri $uri/ /index.html;
}

สรุป

• เว็บ static ขนาดเล็ก — build แล้วอัปโหลดไฟล์ใน dist/ หรือ out/ เข้า httpdocs ผ่าน File Manager
• เว็บที่แก้บ่อย — push ขึ้น GitHub แล้วให้ Plesk Git deploy อัตโนมัติ ชี้ Document root ไปที่โฟลเดอร์ output
• เว็บที่มี backend — รันผ่าน Plesk Node.js ตั้ง Application Root, Startup File และ environment variables ให้ครบ
• ทุกวิธี: เก็บความลับไว้นอก Git และเปิด HTTPS เสมอ

ต้องการโฮสติ้งที่มี Plesk พร้อม Git และ Node.js สำหรับนำเว็บ Vibe Code ขึ้นใช้งานจริง ดูแพ็กเกจ Secure Cloud Hosting ของ Dot Enterprise ได้เลย