วิธี Deploy Vite Portfolio ขึ้น Cloudflare Pages แบบละเอียด

Cloudflare Pages คืออะไร?

Cloudflare Pages คือแพลตฟอร์มระบบ Serverless Hosting สำหรับนักพัฒนาเว็บไซต์ฝั่งฟรอนต์เอนด์ (JAMstack) ที่ให้ความเร็วในการดาวน์โหลดสูงมากเนื่องจากไฟล์ทั้งหมดจะถูกโคลนและจัดส่งกระจายไปยังเครือข่ายเซิร์ฟเวอร์ย่อย (Edge Servers) กว่า 300 เมืองทั่วโลกของ Cloudflare นอกจากนี้ยังมีจุดเด่นเรื่องบริการฟรีไม่มีข้อจำกัดแบนด์วิดท์ และทำงานเชื่อมโยงกับ Git (CI/CD) ได้อย่างลงตัว

โครงสร้างโปรเจกต์พอร์ตโฟลิโอ

นี่คือโครงสร้างไฟล์ของโปรเจกต์พอร์ตโฟลิโอที่ถูกพัฒนาด้วย Vite และมีระบบ Service Worker (PWA):

Directory Layout

portfolio/
├── 📁 png/                 # โฟลเดอร์เก็บภาพทรัพยากรและรูปปก
├── 📁 dist/                # [สร้างหลัง Build] โฟลเดอร์ไฟล์สำหรับดีพลอย
├── index.html             # ไฟล์หน้าหลักฟรอนต์เอนด์
├── blog-cloudflare-pages.html
├── blog-devtools-debug.html
├── blog-git-workflow.html
├── style.css              # กฎการออกแบบทั้งหมด
├── script.js              # ตรรกะระบบ การเลือกภาษา และธีม
├── sw.js                  # สคริปต์ PWA Service Worker (แคชข้อมูล)
├── manifest.json          # ไฟล์ PWA Manifest
├── package.json           # สคริปต์คำสั่งคอมไพล์และ Dependencies
├── post-build.js          # สคริปต์ย้ายไฟล์และอัปเดต Service Worker หลังคอมไพล์
├── _headers               # [NEW] ค่า Headers บังคับการแคชของ Cloudflare Pages
└── _redirects             # [NEW] ค่า Redirects ป้องกันเส้นทางตกหล่น 404

ขั้นตอนที่ 1: ตรวจสอบและทดสอบโค้ดในเครื่องคอมพิวเตอร์

ก่อนทำเรื่องส่งขึ้นระบบคลาวด์ เราควรตรวจสอบไฟล์ package.json เพื่อดูคำสั่งที่เกี่ยวข้องกับการ build โครงงาน:

package.json

{
  "name": "premium-developer-portfolio",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build && node post-build.js",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.2.0"
  }
}

เปิดโปรแกรม Terminal ในเครื่องของคุณเพื่อทดสอบติดตั้ง dependencies และรันเซิร์ฟเวอร์จำลอง:

Terminal Command

# ติดตั้ง Dependencies
npm install

# รันโหมดนักพัฒนาจำลองดูการแสดงผล
npm run dev

ขั้นตอนที่ 2: รัน Build โปรเจกต์

ทำการตรวจสอบว่าระบบสร้างไดเรกทอรี dist/ และมีไฟล์ปลายทางครบถ้วนโดยการรัน:

Terminal Command

npm run build

หลังจากพิมพ์รันคำสั่ง ระบบ Vite จะย่อขนาดไฟล์ CSS/JS พร้อมเติมรหัส Hashed และเรียกใช้สคริปต์ post-build.js เพื่อคัดลอกไฟล์ที่เกี่ยวข้องรวมถึงอัปเดตรายการ URL ลงในไฟล์ Service Worker

ขั้นตอนที่ 3: ดันโค้ดขึ้น GitHub

สร้างโปรเจกต์ Repository บน GitHub ของคุณ (เช่น pratchayawutthansri/Portfolio) และดำเนินการพิมพ์คำสั่งส่งงานขึ้นอินเทอร์เน็ต:

Terminal Git Push

# สร้างระบบติดตามไฟล์
git init

# เพิ่มไฟล์ทั้งหมด
git add .

# บันทึกสถานะงาน
git commit -m "feat: prepare workspace configuration for cloudflare pages build"

# ตรวจสอบชื่อกิ่งหลัก
git branch -M main

# ผูกความสัมพันธ์เข้ากับ GitHub ปลายทางของคุณ
git remote add origin https://github.com/pratchayawutthansri/Portfolio.git

# ส่งงานขึ้นระบบ GitHub
git push -u origin main

ขั้นตอนที่ 4: เชื่อมโยงบัญชีและเลือก Repository บน Cloudflare Pages

ล็อกอินเข้าสู่ระบบ Cloudflare Dashboard ของคุณ
เลือกหัวข้อ Workers & Pages ทางด้านซ้ายมือ
คลิกปุ่ม Create application จากนั้นเลือกแท็บ Pages แล้วคลิกปุ่ม Connect to Git
เชื่อมต่อกับบัญชี GitHub ของคุณและเลือก Repository ชื่อ Portfolio จากนั้นกดปุ่ม Begin setup

ขั้นตอนที่ 5: การตั้งค่า Build Settings สำหรับ Vite

ในหน้าจอการกำหนดค่า ให้ป้อนค่ารายละเอียดโครงสร้างโปรเจกต์ตามนี้:

Project name: portfolio
Production branch: main
Framework preset: เลือกเป็น Vite
Build command: npm run build (สำคัญมากเพื่อเรียกใช้งาน Node.js สคริปต์เสริมหลัง build เสมอ)
Build output directory: dist

⚙️ ตั้งค่า Node.js Environment Variable:

ระบบ Pages ของ Cloudflare ในเวอร์ชันเริ่มต้นอาจจะใช้ Node.js เวอร์ชันเก่า ซึ่งไม่รองรับไวยากรณ์ ESM Module ในไฟล์ post-build.js ให้คุณเพิ่มตัวแปรในแท็บ Environment variables ดังนี้:

- Variable name: NODE_VERSION

- Value: 20 (เพื่อบังคับใช้งาน Node v20 ระดับ LTS)

คลิกปุ่ม Save and Deploy ระบบจะประมวลผลและแสดง log การติดตั้งพร้อมให้ URL เข้าชมเว็บในโดเมนย่อย portfolio.pages.dev ภายใน 2 นาที

ขั้นตอนที่ 6: แก้ไขปัญหาเปิดหน้าย่อยแล้ว Refresh แล้ว 404

เพื่อป้องกันปัญหาระบบเซิร์ฟเวอร์คลาวด์หาไฟล์ HTML ไม่เจอเมื่อมีการเข้าหน้าลิงก์ย่อยแบบไม่มีนามสกุลไฟล์ เราจะใช้การตั้งค่าในไฟล์ _redirects เพื่อนำทางเส้นทางตกหล่นกลับสู่หน้าแรก:

_redirects

# เมื่อผู้เยี่ยมชมเข้าลิงก์ย่อยแล้วหาไฟล์ไม่เจอ ให้ส่งกลับมาที่ index.html ด้วยสถานะ 404
/*  /index.html  404

และเขียนค่า Headers เพื่อปิดแคชชั่วคราวในส่วนหน้าไฟล์แคช PWA ในไฟล์ _headers:

_headers

# บังคับอัปเดต Service Worker ทันที
/sw.js
  Cache-Control: public, max-age=0, must-revalidate

# บังคับแคชไฟล์สไตล์และโค้ดของ Vite ยาวนาน 1 ปีเพื่อลด Bandwidth
/assets/*
  Cache-Control: public, max-age=31536000, immutable

ขั้นตอนที่ 7: การผูกโดเมนส่วนตัวจาก Namecheap เข้ากับ Cloudflare

หากคุณซื้อโดเมนไว้ที่ Namecheap (เช่น flukex.store) คุณสามารถเพิ่มความน่าเชื่อถือด้วยวิธีผูกโดเมนดังนี้:

ในเมนูโปรเจกต์ Pages บน Cloudflare ให้เลือกแท็บ Custom domains
คลิกปุ่ม Set up a custom domain และป้อนชื่อโดเมนของคุณ flukex.store จากนั้นกดปุ่ม Continue
หากโดเมนของคุณย้ายค่าย DNS มาฝากไว้ที่ Cloudflare: ระบบจะแอดระเบียนใหม่อัตโนมัติใน DNS Zone ให้โดยคลิกยืนยันข้อตกลง
หากโดเมนของคุณตั้งค่าใน Namecheap DNS: ให้เปิด Namecheap Dashboard ไปที่เมนู Advanced DNS แล้วเพิ่มระเบียน CNAME:
- Type: CNAME Record
- Host: @ (หรือ www)
- Value: portfolio.pages.dev

ขั้นตอนที่ 8: ทางเลือกขั้นสูง: ดีพลอยผ่าน Wrangler CLI

หากคุณต้องการส่งโค้ดตรงข้ามคลาวด์จากเครื่องคอมพิวเตอร์อย่างรวดเร็วโดยไม่ต้องดันโค้ดขึ้น GitHub สามารถทำได้ผ่านเครื่องมือ Wrangler CLI:

Terminal Wrangler Command

# 1. ล็อกอินเข้าบัญชีคลาวด์ผ่าน Command Line (จะเปิดหน้าต่างเบราว์เซอร์ให้ยืนยัน)
npx wrangler login

# 2. รันคำสั่งดีพลอยส่งโฟลเดอร์ dist ไปยังโปรเจกต์คลาวด์ปลายทาง
npx wrangler pages deploy dist --project-name=portfolio

เมื่อเสร็จสิ้นขั้นตอนทั้งหมด คุณจะได้เว็บไซต์พอร์ตโฟลิโอระดับพรีเมียม ทำงานด้วยระบบออฟไลน์ผ่าน PWA โหลดเร็วทันที และพร้อมให้บริการทั่วโลกภายใต้แบรนด์โดเมน flukex.store ของคุณเรียบร้อยครับ! 🎉🌟

What is Cloudflare Pages?

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. Backed by Cloudflare's global edge network (spanning over 300 cities worldwide), it serves your static assets with ultra-low latency, unlimited bandwidth, and automatic Git-backed CI/CD builds.

Vite Portfolio Directory Structure

Here is the directory structure for this Vite-based portfolio project equipped with a Service Worker (PWA):

Directory Layout

portfolio/
├── 📁 png/                 # Image assets and covers
├── 📁 dist/                # [Created after Build] Output folder containing compiled build assets
├── index.html             # Main index HTML file
├── blog-cloudflare-pages.html
├── blog-devtools-debug.html
├── blog-git-workflow.html
├── style.css              # Main stylesheets
├── script.js              # Theme switcher, i18n switcher, and core UI logic
├── sw.js                  # PWA Service Worker script
├── manifest.json          # PWA configuration manifest
├── package.json           # Node compile commands and scripts
├── post-build.js          # Precache injector script run after build compilation
├── _headers               # [NEW] Cloudflare Pages caching rules
└── _redirects             # [NEW] Cloudflare Pages routing fallback

Step 1: Verify & Run Project Locally

First, inspect your build scripts in package.json:

package.json

{
  "name": "premium-developer-portfolio",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build && node post-build.js",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.2.0"
  }
}

Open your local terminal and spin up the developer preview server:

Terminal Command

# Install node modules
npm install

# Run local preview dev server
npm run dev

Step 2: Run local Build Compilation

Compile your Vite source files into production assets inside the dist/ folder:

Terminal Command

npm run build

This command runs Vite compilers to minify files and calls `post-build.js` to patch manifest paths in the service worker cache array.

Step 3: Push Project to GitHub

Push your codebase to your GitHub repository (e.g. pratchayawutthansri/Portfolio):

Terminal Git Push

# Initialize local repository
git init

# Stage all files
git add .

# Save snapshot
git commit -m "feat: prepare workspace configuration for cloudflare pages build"

# Rename branch
git branch -M main

# Link to GitHub remote repository
git remote add origin https://github.com/pratchayawutthansri/Portfolio.git

# Push changes
git push -u origin main

Step 4: Connect GitHub to Cloudflare Pages

Access your Cloudflare Dashboard.
Click Workers & Pages in the left sidebar menu.
Click Create application, choose the Pages tab, and click Connect to Git.
Grant GitHub access and select the repository name Portfolio, then click Begin setup.

Step 5: Configure Build Settings

Input the build specifications to compile the source code:

Project name: portfolio
Production branch: main
Framework preset: Select Vite
Build command: npm run build
Build output directory: dist

⚙️ Add Node.js Version Environment Variable:

To prevent build container failures due to outdated Node.js versions, go to Environment variables (Advanced) and add:

- Variable name: NODE_VERSION

- Value: 20

Click Save and Deploy. Cloudflare will publish your site to portfolio.pages.dev within 2 minutes.

Step 6: Setup Caching & Prevent 404 Routing Breaks

To handle routing fallbacks on page refreshes, write a redirect instruction in `_redirects`:

_redirects

# Redirect broken paths to index.html with a 404 status code
/*  /index.html  404

Configure cache policies in `_headers` to prevent service worker caching errors:

_headers

# Force immediate service worker updates
/sw.js
  Cache-Control: public, max-age=0, must-revalidate

# Cache hashed resources for 1 year
/assets/*
  Cache-Control: public, max-age=31536000, immutable

Step 7: Bind Namecheap Custom Domain to Cloudflare DNS

To map a custom domain (e.g. flukex.store) bought on Namecheap:

In your Pages project settings, click the Custom domains tab.
Click Set up a custom domain and enter flukex.store, then click Continue.
If your domain is managed by Cloudflare DNS, DNS records will be added automatically.
If managed under Namecheap DNS, add a CNAME record in your Namecheap Advanced DNS panel:
- Type: CNAME Record
- Host: @ (or www)
- Value: portfolio.pages.dev

Step 8: Alternative Command Line Deployment with Wrangler CLI

Deploy production builds straight from your local environment without using GitHub commits:

Terminal Wrangler Command

# 1. Login to Cloudflare account
npx wrangler login

# 2. Deploy dist folder to Pages project
npx wrangler pages deploy dist --project-name=portfolio

ความคิดเห็น (3) Responses (3)

Siam_Dev 2 hours ago

คู่มือดีมากเลยครับ ลองทำตามแล้วดีพลอยผ่านสำเร็จใน 1 นาทีจริงๆ ง่ายกว่าโฮสติ้งเดิมเยอะเลย Excellent guide! Followed it and got my site deployed in under a minute. Much easier than traditional hosting.

Jane Doe 1 day ago

ขอบคุณมากๆ ค่ะ เขียนรายละเอียด CI/CD ชัดเจน บอน AI สามารถ Crawl โค้ด Git ไปตั้งค่าใน workflow ได้ถูกต้องเลยค่ะ Thank you so much! The CI/CD explanations are very clear, my scripts can easily crawl the Git config instructions.