---
title: "การย้ายเอกสาร Look Scanned How-To ไปยัง VitePress พร้อมความปลอดภัยที่เพิ่มขึ้น"
description: "ค้นพบว่า Look Scanned อัปเกรดโครงสร้างพื้นฐานเอกสารโดยการย้ายจาก Vue + Vite ไปยัง VitePress พร้อมกับการใช้งาน npm Trusted Publishers ด้วย OIDC เพื่อการเผยแพร่แพ็กเกจที่ปลอดภัยแบบไม่ใช้โทเค็น"
date: 2025-12-19T07:55:33.000Z
lang: th
source: https://lookscanned.io/th/blog/migrating-look-scanned-how-to-to-vitepress
tags: ["vitepress", "เอกสาร", "ความปลอดภัย", "cicd", "npm"]
---

# การย้ายเอกสาร Look Scanned How-To ไปยัง VitePress พร้อมความปลอดภัยที่เพิ่มขึ้น

ที่ [Look Scanned](https://lookscanned.io) เราปรับปรุงโครงสร้างพื้นฐานของเราอย่างต่อเนื่องเพื่อมอบเอกสารที่ดีขึ้นและแนวปฏิบัติการพัฒนาที่ปลอดภัยยิ่งขึ้น วันนี้เรารู้สึกตื่นเต้นที่จะแชร์รายละเอียดเกี่ยวกับการอัปเกรดครั้งสำคัญของเว็บไซต์เอกสาร How-To ของเรา: การย้ายจากแอปพลิเคชัน Vue + Vite แบบกำหนดเองไปยัง VitePress พร้อมกับการเพิ่มความปลอดภัย CI/CD ของเราด้วย npm Trusted Publishers

## 📚 ทำไมเราถึงย้ายไปยัง VitePress

เว็บไซต์เอกสาร How-To ของเรา ([github.com/lookscanned/how-to](https://github.com/lookscanned/how-to)) ทำหน้าที่เป็นคู่มือการใช้งานที่ครอบคลุมสำหรับ Look Scanned แม้ว่าการตั้งค่า Vue + Vite ก่อนหน้านี้ของเราจะใช้งานได้ดี แต่เราตระหนักว่า VitePress จะเป็นตัวเลือกที่ดีกว่าสำหรับเว็บไซต์เอกสารที่มุ่งเน้นเนื้อหา

### VitePress คืออะไร?

VitePress เป็นตัวสร้างเว็บไซต์แบบคงที่ที่ออกแบบมาโดยเฉพาะสำหรับเอกสาร สร้างขึ้นบน Vite และ Vue 3 มันผสมผสานสิ่งที่ดีที่สุดของทั้งสองโลก: ประสบการณ์การพัฒนาที่รวดเร็วเหมือนสายฟ้าพร้อมฟีเจอร์เอกสารที่ทรงพลังพร้อมใช้งานทันที

### ประโยชน์หลักของการย้าย

**🎯 สถาปัตยกรรมที่ดีกว่าสำหรับเอกสาร**
- **การกำหนดเส้นทางแบบไฟล์**: ไฟล์ markdown แต่ละไฟล์จะกลายเป็นหน้าเว็บโดยอัตโนมัติ ทำให้การจัดระเบียบเนื้อหาเป็นเรื่องง่าย
- **ฟีเจอร์เอกสารในตัว**: สารบัญ การค้นหา การทำให้เป็นสากล และอื่นๆ มีการตั้งค่าไว้ล่วงหน้า
- **การสร้างเว็บไซต์แบบคงที่**: HTML ที่เรนเดอร์ล่วงหน้าให้ SEO ที่ยอดเยี่ยมและการโหลดหน้าเว็บอย่างทันที

**⚡ ประสบการณ์นักพัฒนาที่ดีขึ้น**
- **การโหลดซ้ำแบบร้อนทันที**: การเปลี่ยนแปลงปรากฏทันทีระหว่างการพัฒนา
- **Markdown เป็นอันดับแรก**: มุ่งเน้นที่เนื้อหา ไม่ใช่โครงสร้างคอมโพเนนต์
- **รองรับคอมโพเนนต์ Vue**: เมื่อจำเป็น เรายังสามารถใช้คอมโพเนนต์ Vue แบบกำหนดเองภายใน markdown ได้

**🔧 การบำรุงรักษาที่ง่ายขึ้น**
- **โครงสร้างที่ชัดเจนยิ่งขึ้น**: เอกสารปฏิบัติตามแบบแผน ลดภาระทางปัญญาสำหรับผู้มีส่วนร่วม
- **การสร้างที่มีเสถียรภาพมากขึ้น**: โครงสร้างที่มีความคิดเห็นของ VitePress นำไปสู่การสร้างที่ทำซ้ำได้มากขึ้น
- **การทำงานร่วมกันที่ดีขึ้น**: สมาชิกในทีมสามารถมีส่วนร่วมในเอกสารโดยไม่ต้องมีความรู้ Vue ที่ลึกซึ้ง

## 🔒 ความปลอดภัยที่เพิ่มขึ้นด้วย npm Trusted Publishers

พร้อมกับการย้าย VitePress เราได้ใช้การปรับปรุงความปลอดภัยที่สำคัญ: **npm Trusted Publishers โดยใช้การยืนยันตัวตน OIDC**

### ปัญหากับโทเค็น npm แบบดั้งเดิม

ก่อนหน้านี้ การเผยแพร่แพ็กเกจไปยัง npm ต้องการการจัดเก็บ `NPM_TOKEN` ที่มีอายุยาวในความลับของที่เก็บ วิธีการนี้มีข้อเสียหลายประการ:

- **ความเสี่ยงด้านความปลอดภัย**: โทเค็นอาจถูกเปิดเผยหรือถูกบุกรุกโดยไม่ตั้งใจ
- **ภาระการจัดการ**: โทเค็นต้องการการหมุนเวียนและการอัปเดตด้วยตนเอง
- **ความท้าทายในการตรวจสอบ**: ยากที่จะติดตามว่าใครเผยแพร่อะไรและเมื่อไหร่

### โซลูชัน: การเผยแพร่ที่เชื่อถือได้แบบ OIDC

[npm Trusted Publishers](https://docs.npmjs.com/trusted-publishers/) ใช้ประโยชน์จาก OpenID Connect (OIDC) เพื่อเปิดใช้งานการเผยแพร่ที่ปลอดภัยแบบไม่ใช้โทเค็นโดยตรงจาก GitHub Actions นี่คือวิธีการทำงาน:

1. **ไม่มีความลับที่จัดเก็บ**: แทนที่จะบันทึกโทเค็น GitHub Actions ขอข้อมูลรับรองระยะสั้นจาก npm
2. **การยืนยันตัวตน**: npm ยืนยันว่าคำขอเผยแพร่มาจากที่เก็บ GitHub ที่ได้รับอนุญาต
3. **การจัดการข้อมูลรับรองอัตโนมัติ**: ข้อมูลรับรองออกโดยอัตโนมัติและหมดอายุอย่างรวดเร็ว

### ประโยชน์ในโลกแห่งความจริง

การเปลี่ยนแปลงนี้นำมาซึ่งการปรับปรุงทันทีสู่เวิร์กโฟลว์การพัฒนาของเรา:

- ✅ **ไม่ต้องจัดการโทเค็นอีกต่อไป**: ไม่จำเป็นต้องสร้าง จัดเก็บ หรือหมุนเวียนโทเค็น npm
- ✅ **พื้นที่โจมตีลดลง**: ข้อมูลรับรองระยะสั้นลดความเสี่ยงการเปิดเผย
- ✅ **การตรวจสอบได้ดีขึ้น**: ทุกการดำเนินการเผยแพร่จะเชื่อมโยงกับการรัน GitHub Actions เฉพาะ
- ✅ **แนวปฏิบัติที่ดีที่สุดสมัยใหม่**: สอดคล้องกับหลักการความปลอดภัยแบบ zero-trust

**หมายเหตุทางเทคนิค**: เพื่อรองรับ npm Trusted Publishers เราได้อัปเดตการกำหนดค่า CI ให้ใช้ Node.js `lts/*` เพื่อให้แน่ใจว่าเรามีเวอร์ชัน npm ล่าสุดที่จำเป็นสำหรับการยืนยันตัวตน OIDC

## 📦 กำหนดการเผยแพร่

การย้ายถูกทำให้เสร็จสมบูรณ์ผ่านการเผยแพร่สามครั้งในวันที่ 19 ธันวาคม 2025:

- **v2.0.0**: การย้ายหลักจาก Vue + Vite ไปยัง VitePress (การเปลี่ยนแปลงที่สำคัญ)
- **v2.0.1**: การแก้ไข CI เพื่อรองรับ npm Trusted Publishers ด้วยเวอร์ชัน Node.js ที่เหมาะสม
- **v2.0.2**: การปรับปรุงประสิทธิภาพโดยย้าย `@fontsource/noto-mono` ไปยัง devDependencies

## 🌍 การสนับสนุนหลายภาษาอย่างต่อเนื่อง

หมายเหตุสำคัญ: เอกสาร How-To ของเราสร้าง PDF หลายภาษาที่ถูกใช้เป็นไฟล์ตัวอย่างในแอปพลิเคชัน Look Scanned หลัก (มีให้ที่ [lookscanned.io/en/scan](https://lookscanned.io/en/scan)) การย้าย VitePress นี้ไม่ได้เปลี่ยนฟังก์ชันนั้น—มันเพียงแค่ให้รากฐานที่ดีกว่าสำหรับการบำรุงรักษาและปรับปรุงโครงสร้างพื้นฐานเอกสารของเรา

## 💡 นี่หมายความว่าอย่างไรสำหรับผู้ใช้

หากคุณใช้เอกสารของ Look Scanned:

- **การเข้าถึงเดิม ประสบการณ์ที่ดีขึ้น**: เอกสารยังคงอยู่ที่ URL เดิมพร้อมการโหลดและการนำทางที่ดีขึ้น
- **เชื่อถือได้มากขึ้น**: การสร้างเว็บไซต์แบบคงที่หมายถึงการโหลดที่เร็วขึ้นและเสถียรภาพที่ดีขึ้น
- **การค้นหาและการค้นพบที่ดีขึ้น**: การค้นหาในตัวของ VitePress ช่วยให้คุณหาคำตอบได้เร็วขึ้น
- **การสนับสนุน PDF อย่างต่อเนื่อง**: การสร้าง PDF หลายภาษายังคงดำเนินต่อไปเหมือนเดิม

## 🚀 ต่อไปคืออะไร

เมื่ออัปเกรดโครงสร้างพื้นฐานเสร็จสมบูรณ์ เรากำลังมุ่งเน้นไปที่การปรับปรุงเนื้อหา:

- **กรณีการใช้งานที่ขยายออกไป**: ตัวอย่างที่ใช้งานได้จริงมากขึ้นและคู่มือทีละขั้นตอน
- **การปรับปรุงความสอดคล้อง**: การปรับแต่งคำศัพท์หลายภาษาเพื่อความชัดเจน
- **การส่งออก PDF ที่ดีขึ้น**: การปรับปรุงประสบการณ์การสร้าง PDF ข้ามเบราว์เซอร์

## ลองใช้ Look Scanned วันนี้

Look Scanned ให้เอฟเฟกต์การสแกน PDF แบบเบราว์เซอร์ ให้ความสำคัญกับความเป็นส่วนตัวโดยไม่ต้องอัปโหลดไฟล์ของคุณไปที่ใดๆ เอกสารที่ดีขึ้นทำให้การเริ่มต้นใช้งานง่ายกว่าที่เคย

👉 **เยี่ยมชม [lookscanned.io](https://lookscanned.io) เพื่อสัมผัสการสแกนเอกสารที่รวดเร็วและปลอดภัยในเบราว์เซอร์ของคุณ**