สร้างแอปพลิเคชัน React (Host Static-Website with AWS Amplify Part. 1)
สวัสดีครับ เบิร์ด จาก ClassMethod Thailand ครับ
สร้างแอปพลิเคชัน React และ Deploy ด้วย AWS Amplify
บทความนี้เป็นส่วนหนึ่งของซีรีย์บทเรียน "สร้าง Host Static Website ด้วย React และ AWS Amplify" ที่ผมได้ทดลองทำและอยากนำมาแบ่งปันให้เพื่อนๆ ได้อ่านกันและทำตาม โดยเนื้อหาในแต่ละบทความสามารถทำตามได้เป็นอิสระ แต่หากทำตามทุกขั้นตอนต่อเนื่องกัน จะมีลักษณะดังนี้
1.สร้าง React Application
2.Deploy React & Vite App ไปยัง GitHub
3.Deploy React แอปพลิเคชันด้วย AWS Amplify
ในบทความนี้จะเป็น Part 1 : สร้าง React Application
สร้างแอปพลิเคชัน React
Host a Static Website & Deploy app with AWS Amplify
บทความนี้อ้างอิงจาก
Ref:
React คืออะไร?
React เป็น JavaScript Library ที่พัฒนาขึ้นโดยบริษัท Facebook (ซึ่งปัจจุบันเปลี่ยนชื่อเป็น Meta) และเปิดตัวในปี 2013 โดย React ถูกออกแบบมาเพื่อช่วยในการสร้างส่วนติดต่อผู้ใช้งาน (User Interface - UI) บนเว็บไซต์และแอปพลิเคชันต่างๆ นอกจากนี้ React ยังเป็น Open Source ที่นักพัฒนาทั่วโลกสามารถนำไปใช้งานได้ฟรี
ข้อกำหนดเบื้องต้น
- ระบบปฏิบัติการ: Windows / Mac / Linux
- Node.js เวอร์ชัน 18 ขึ้นไป
- Text Editor เช่น VS Code
บทความนี้จะใช้ Node.js v24.13.0 , Vite v7.3.1 , React v19.2.4"
ติดตั้ง Node.js
1 : การดาวน์โหลดและติดตั้ง Node.js
ดาวน์โหลดได้ที่: https://nodejs.org/
2 : คลิกปุ่ม "Get Node.js®" (ปุ่มสีเขียว)
เลือกเวอร์ชันที่เหมาะสม:
LTS (Long Term Support) - แนะนำสำหรับผู้ใช้ทั่วไป (เสถียร)
Current - เวอร์ชันล่าสุด (มีฟีเจอร์ใหม่)
3 : ดาวน์โหลดตามระบบปฏิบัติการ:
Windows: ไฟล์ .msi
Mac: ไฟล์ .pkg
Linux: ใช้คำสั่งตามที่แนะนำ
4: ติดตั้ง:
เปิดไฟล์ที่ดาวน์โหลดมาแล้วทำตาม wizard การติดตั้ง
คลิก Next/Install จนเสร็จ
Create a new React application
- เปิด Terminal หรือ Command Prompt บนเครื่องคอมพิวเตอร์ของคุณ
จากนั้นรันคำสั่งที่ละคำสั่ง
คำสั่งที่ 1:
คำสั่งนี้จะสร้างโปรเจกต์ใหม่ด้วย Vite โปรเจกต์โฟลเดอร์ชื่อ staticwebsite ใช้เทมเพลต React
npm create vite@latest staticwebsite -- --template react
คำสั่งที่ 2:
*จากนั้น เข้าไปในโฟลเดอร์ staticwebsite ที่เพิ่งสร้างขึ้น
cd staticwebsite
คำสั่งที่ 3:
*ต่อไปติดตั้ง dependencies (ไลบรารีและแพ็กเกจ) ทั้งหมดที่จำเป็นสำหรับโปรเจกต์
npm install
คำสั่งที่ 4:
รันเซิร์ฟเวอร์เพื่อทดสอบแอปพลิเคชัน
npm run dev
พอเราคลิก Link แล้วจะสังเกตว่าไม่สามารถเชื่อมต่อกับ React อันนี้เป็นเรื่องปกติครับ "เนื่องจาก Vite ตั้งค่า host เริ่มต้นเป็น localhost จึงไม่สามารถเข้าถึงจากภายนอกได้ เราจะแก้ไขในขั้นตอนถัดไป"
แก้ไขการเชื่อมต่อ (config)
เรามาแก้ไขการเชื่อมต่อด้วยคำสั่งนี้ notepad vite.config.js ← ใช้ได้แค่ Windows
ทางเลือกสำหรับ OS อื่น:
Windows: notepad vite.config.js
Mac/Linux: nano vite.config.js หรือ code vite.config.js (VS Code)
notepad vite.config.js
จาก code เริ่มต้นแก้ไขโดยใช้ code ด้านล่างนี้ ==>
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 5173, // กำหนด port ที่ใช้งาน
host: true, // อนุญาตให้เข้าถึงจาก network ภายนอก
open: true // เปิด browser อัตโนมัตเมื่อรัน
}
})
***เสร็จแล้ว save notepad แล้วรันใหม่ด้วย [npm run dev]
เราจะเห็น เทมเพลต React
npm run dev
สรุป:
✅ โปรเจกต์ React ของคุณพร้อมใช้งานแล้ว!
- เซิร์ฟเวอร์กำลังรันอยู่ (http://localhost:5173)
- สามารถเริ่มแก้ไขโค้ดและพัฒนาเว็บไซต์ได้เลย
- ระบบ HMR (Hot Module Replacement) จะอัพเดทหน้าเว็บอัตโนมัติเมื่อแก้ไขโค้ด
บทความอ้างอิง
บทความอื่นๆที่เกี่ยวข้องกับ AWS Amplify
(Thai)
(Japanese)
