การสร้างและรันโปรเจกต์ Angular ใน ServBay
ภาพรวม
เอกสารนี้มีเป้าหมายเพื่อแนะนำวิธีสร้าง กำหนดค่า และรันโปรเจกต์ Angular ในสภาพแวดล้อมการพัฒนาเว็บไซต์แบบ Local ด้วย ServBay โดยใช้ Node.js ที่มีประสิทธิภาพและฟีเจอร์การจัดการเว็บไซต์ที่ยืดหยุ่นของ ServBay คุณจะสามารถตั้งค่าการพัฒนาและโหมดโปรดักชันได้อย่างง่ายดาย พร้อมรองรับการเข้าถึงผ่านชื่อโดเมนและใบรับรอง SSL ส่วนตัว ServBay มีซอฟต์แวร์ที่จำเป็นสำหรับนักพัฒนาแบบครบวงจร (เก่าเรียก “บริการ”) ไม่ว่าจะเป็น Node.js, PHP, Python, Go, Java, ฐานข้อมูล ฯลฯ ซึ่งเหมาะสำหรับการพัฒนา Full Stack แบบ Local
Angular คืออะไร?
Angular เป็นเฟรมเวิร์ค Frontend แบบโอเพ่นซอร์สที่พัฒนาโดย Google สำหรับสร้างเว็บแอปพลิเคชันแบบ Single Page Application (SPA) ที่มีประสิทธิภาพและอินเทอร์แอคทีฟ สร้างขึ้นบนฐาน TypeScript มาพร้อมเครื่องมือและโครงสร้างการพัฒนาแบบครบชุด เหมาะสำหรับงานระดับองค์กรที่ซับซ้อน
คุณสมบัติเด่นของ Angular
- โครงสร้างแบบคอมโพเนนต์: สร้าง UI จากคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ ส่งผลให้โค้ดดูแลและขยายได้ง่าย
- รองรับ TypeScript: ให้ความสามารถตรวจสอบและการเขียนโปรแกรมเชิงวัตถุที่แข็งแกร่ง เพิ่มคุณภาพของโค้ดและความเร็วการพัฒนา
- Dependency Injection: ทำให้คอมโพเนนต์ทดสอบง่ายและจัดการกับ Dependencies ได้ดี
- CLI ที่ทรงพลัง: ช่วยสร้างโปรเจกต์ คอมโพเนนต์ เซอร์วิส โมดูล รวมถึงงาน Build และเทสอย่างง่ายดาย
- โมดูลภายใน: รองรับ Routing, Form, HTTP Client ฯลฯ แบบครบครัน
- ปรับแต่งประสิทธิภาพ: รองรับ AOT (Ahead-of-Time) Compilation, Tree-shaking เป็นต้น เพื่อเพิ่มสุดยอดความเร็ว
การใช้ Angular ร่วมกับสภาพแวดล้อมเสถียรของ ServBay ช่วยให้นักพัฒนามุ่งเน้นที่การสร้างธุรกิจได้มากขึ้น
ข้อกำหนดเบื้องต้น
ก่อนเริ่ม โปรดตรวจสอบให้แน่ใจว่าคุณได้เตรียมสิ่งต่อไปนี้ครบแล้ว:
- ติดตั้ง ServBay: คุณได้ติดตั้งและเปิดใช้งาน ServBay (รองรับ macOS และ Windows) แล้วเรียบร้อย
- เปิดใช้งาน Node.js: ในแผงควบคุม ServBay ให้แน่ใจว่าติดตั้งและเปิดใช้งานแพ็คเกจ Node.js เวอร์ชันที่ต้องการแล้ว ServBay สามารถติดตั้งและสลับใช้ Node.js หลายเวอร์ชันได้อย่างง่ายดาย
การตั้งค่าและรัน Angular โปรเจกต์ด้วย ServBay
เราจะใช้ Node.js ที่ ServBay เตรียมไว้สร้างและรันโปรเจกต์ Angular ในโหมดพัฒนา เราจะตั้งค่ารีเวิร์สพร็อกซีผ่านฟีเจอร์เว็บไซต์ของ ServBay ไปยัง Angular Dev Server ส่วนในโหมดโปรดักชัน จะ Host ผ่านฟีเจอร์ Static File ของ ServBay
1. สร้างโปรเจกต์ Angular
ก่อนอื่น เราจะใช้ Angular CLI สร้างโปรเจกต์ใหม่
ติดตั้ง Angular CLI: เปิดเทอร์มินัล และใช้ Node.js ของ ServBay ติดตั้ง Angular CLI แบบ Global ถ้าสภาพแวดล้อม Node.js ของ ServBay ไม่ได้รวมอยู่ใน PATH คุณอาจต้องสลับไปใช้งาน Node.js ของ ServBay ปกติ ServBay จะตั้งค่า PATH ให้อัตโนมัติแล้ว
bashnpm install -g @angular/cli
1คำสั่งนี้จะติดตั้ง
ng
CLI ไว้ใช้งานได้แบบ Globalสร้างโปรเจกต์ Angular ใหม่: ไปที่โฟลเดอร์แนะนำของ ServBay แล้วรัน
ng new
เพื่อสร้างโปรเจกต์ โดยแนะนำให้ใช้ชื่อที่เกี่ยวข้องกับ ServBay เช่นservbay-angular-app
macOS:
bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Windows:
bashcd C:\ServBay\www ng new servbay-angular-app
1
2Angular CLI จะถามเพื่อกำหนดค่าบางอย่างเกี่ยวกับโปรเจกต์ จากนั้นกรอกหรือตอบตามที่ต้องการ
? Would you like to add Angular routing? Yes # ต้องการเพิ่มระบบ Routing หรือไม่ แนะนำ Yes ? Which stylesheet format would you like to use? CSS # เลือกรูปแบบ Style Sheet เช่น CSS
1
2รอให้คำสั่งทำงานเสร็จ จะได้โฟลเดอร์ใหม่ชื่อ
servbay-angular-app
โครงสร้างครบถ้วนอยู่ที่:- macOS:
/Applications/ServBay/www/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app
- macOS:
ติดตั้ง Dependencies ของโปรเจกต์: เข้าไปในโฟลเดอร์โปรเจกต์แล้ว ติดตั้ง Dependencies ในโฟลเดอร์ Local
bashcd servbay-angular-app npm install
1
2คำสั่งนี้จะติดตั้ง Dependency ที่อยู่ใน
package.json
ลงในnode_modules
2. แก้ไขเนื้อหาหน้าแรกของโปรเจกต์ (ปรับแต่งได้)
เพื่อทดสอบว่าโปรเจกต์ใช้งานได้จริง อาจแก้ไขหน้าแรกให้เห็นข้อความที่ต้องการ
แก้ไขไฟล์
src/app/app.component.html
: เปิดไฟล์servbay-angular-app/src/app/app.component.html
ด้วย Editor ที่ชอบ แล้วลบหรือแก้ไขเนื้อหาให้แสดงข้อความง่ายๆ เช่น "Hello ServBay!"html<div style="text-align:center"> <h1>Hello ServBay!</h1> <p>นี่คือ Angular app ของคุณรันผ่าน ServBay!</p> </div>
1
2
3
4
3. รันโปรเจกต์ในโหมดพัฒนา
ในขั้นตอนพัฒนา เราจะใช้ Angular CLI รัน Server (ng serve
) ซึ่งรองรับ Hot Reload อย่างสะดวก และใช้ ServBay ตั้งค่ารีเวิร์สพร็อกซีเพื่อเปิดเว็บด้วย Local Domain
เริ่มต้น Dev Server ของ Angular: รันคำสั่งนี้ที่โปรเจกต์ โดยตั้งพอร์ต เช่น
8585
เพื่อไม่ให้ชนกับพอร์ต Web Server หลักของ ServBaymacOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Windows:
bashcd C:\ServBay\www\servbay-angular-app ng serve --port 8585
1
2จะได้รับ Dev Server ที่รันที่
http://localhost:8585/
ต้องเปิดหน้าต่าง Terminal ค้างไว้ให้ Server ทำงานต่อไปตั้งค่าเว็บไซต์แบบรีเวิร์สพร็อกซีใน ServBay: เปิดแผงควบคุม ServBay ไปที่หน้า "เว็บไซต์" แล้วเพิ่มเว็บไซต์ใหม่ โดยตั้งค่าตามนี้:
- ชื่อ (Name): เช่น
My Angular Dev Site
(ชื่อแสดงใน ServBay) - โดเมน (Domain): แนะนำใช้ชื่อโดเมนทดสอบ เช่น
servbay-angular-dev.servbay.demo
โดย.servbay.demo
จะชี้ไปที่127.0.0.1
ให้อัตโนมัติ - ประเภทเว็บไซต์ (Website Type): เลือก
Reverse Proxy
- ที่อยู่รีเวิร์สพร็อกซี (Proxy Address): ใส่
127.0.0.1
- พอร์ตรีเวิร์สพร็อกซี (Proxy Port): ใส่พอร์ตที่ใช้กับ
ng serve
เช่น8585
ตั้งค่าเสร็จแล้ว กดบันทึกและนำไปใช้
- ชื่อ (Name): เช่น
เข้าชมเว็บไซต์โหมดพัฒนา: เปิดเบราว์เซอร์ ไปที่
https://servbay-angular-dev.servbay.demo
เนื่องจากเข้าผ่าน ServBay และ ServBay รองรับใบรับรอง SSL อัตโนมัติที่สร้างผ่าน User CA หรือ Public CA คุณสามารถทดสอบ HTTPS แบบ Local ได้ทันที เหมือนใช้งานจริงใน Production
4. สร้างโปรเจกต์สำหรับใช้งานจริง (โหมดโปรดักชัน)
เมื่อโปรเจกต์ Angular พร้อมเปิดใช้งานจริง ต้อง Build เป็น Static File สำหรับ Host ด้วย Static Server ของ ServBay
Build โปรเจกต์เวอร์ชันโปรดักชัน: รันคำสั่งสร้าง Production Build ที่โฟลเดอร์โปรเจกต์
macOS:
bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # หรือใน Angular CLI เวอร์ชันใหม่: # ng build
1
2
3
4Windows:
bashcd C:\ServBay\www\servbay-angular-app ng build --prod # หรือใน Angular CLI เวอร์ชันใหม่: # ng build
1
2
3
4ธง
--prod
จะเปิดใช้งาน AOT Compile, Minify, Tree-shaking ฯลฯ (Angular CLI ใหม่ใช้โดยอัตโนมัติ) ไฟล์ที่ Generate จะอยู่ในdist/servbay-angular-app
(หรือชื่อโปรเจกต์ตามตั้งค่า)กำหนดเว็บไซต์แบบ Static File ใน ServBay: ในแผงควบคุม ServBay ไปที่หน้า "เว็บไซต์" เพิ่มเว็บไซต์ใหม่ โดยชี้ไปที่ Static Directory ที่ Build ไว้
ชื่อ (Name): เช่น
My Angular Production Site
โดเมน (Domain): ใช้โดเมนทดลองอีกตัว เช่น
servbay-angular-prod.servbay.demo
ประเภทเว็บไซต์ (Website Type): เลือก
Static
โฟลเดอร์รากเว็บไซต์ (Website Root Directory): ใส่ Directory Output จากขั้นตอนที่แล้ว
- macOS:
/Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
- Windows:
C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app
ระบุไปถึงที่มีไฟล์
index.html
- macOS:
ตั้งค่าเสร็จ กดบันทึกและนำไปใช้
เข้าชมเว็บไซต์โหมดโปรดักชัน: เปิดเบราว์เซอร์ ไปที่
https://servbay-angular-prod.servbay.demo
ตอนนี้คุณจะเห็นโปรเจกต์ Angular เวอร์ชันโปรดักชันที่รันจาก Web Server ประสิทธิภาพสูงของ ServBay (Caddy หรือ Nginx ตามแต่ที่ตั้งค่า) พร้อมใบรับรอง SSL อัตโนมัติ
จุดเด่นของ ServBay ในการพัฒนา Angular
- ระบบติดตั้งรวม: สลับเวอร์ชัน Node.js ง่ายดายใน ServBay โดยไม่ต้องตั้งค่า Environment Variable เอง
- การจัดการเว็บไซต์ที่ยืดหยุ่น: ตั้งค่า Reverse Proxy และ Static File Server ง่ายดายผ่าน UI สลับโหมดการเข้าถึงได้ทันที
- รองรับ SSL ในตัว: บริการใบรับรอง SSL ฟรีและตั้งค่าอัตโนมัติใน Local Dev เหมือน Production ป้องกันปัญหา Mixed Content
- รองรับ Full Stack: ถ้าโปรเจกต์เชื่อมกับ Backend API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot ฯลฯ) หรือฐานข้อมูล (MySQL, PostgreSQL, MongoDB, Redis) ก็เชื่อมและติดตั้งใน ServBay ได้ทันที ระบบอัปเดตฟีเจอร์บริการครบทุกการใช้งาน
- สำรองข้อมูลง่าย: มีฟีเจอร์สำรองและเรียกคืนข้อมูลเว็บไซต์ ฐานข้อมูล ใบรับรอง SSL ครบครัน ปกป้องข้อมูล Dev ของคุณ
- ตั้งรหัสผ่านฐานข้อมูลใหม่: เซตหรือรีเซ็ตรหัส root ของ MySQL, MariaDB, PostgreSQL ง่าย สะดวกสำหรับนักพัฒนา
คำถามที่พบบ่อย (FAQ)
- ถาม: รัน
ng new
หรือng serve
แล้วขึ้นว่าcommand not found: ng
ทำอย่างไร? ตอบ: นั่นแปลว่า Angular CLI ยังไม่ติดตั้งหรือ PATH ไม่ถูกต้อง ตรวจสอบว่าติดตั้ง @angular/cli แบบ Global ด้วยnpm install -g @angular/cli
แล้ว และ Node.js จาก ServBay รวมอยู่ใน PATH ลองรีสตาร์ท Terminal หรือ ServBay - ถาม:
ng serve
ไม่รันเพราะพอร์ตถูกใช้งาน ต้องแก้ยังไง? ตอบ: พอร์ตเช่น 8585 ถูกโปรแกรมอื่นใช้ เลือกพอร์ตอื่นด้วยng serve --port 8586
แล้วไปอัปเดต Proxy Port ใน ServBay ให้ตรงกัน - ถาม: ตั้งค่า ServBay แล้ว เข้าดูผ่านโดเมนไม่ได้? ตอบ: ตรวจสอบสิ่งต่อไปนี้:
- ServBay ต้องรันอยู่
- โหมดพัฒนา ให้แน่ใจว่า
ng serve
รันบนพอร์ตตรงกับที่ตั้งใน Proxy - โหมดโปรดักชัน ตรวจสอบโฟลเดอร์รากเว็บไซต์ว่าชี้ตรงกับที่มีไฟล์
index.html
(dist/ชื่อโปรเจกต์
) - ดู Log ของ ServBay เพื่อหารายละเอียดข้อผิดพลาด
- ชื่อโดเมนที่เข้าต้องตรงตามที่ตั้งไว้ใน ServBay
- ถาม: เลือกใช้ Web Server แบบต่างๆ (Caddy/Nginx/Apache) ใน ServBay เพื่อ Host Angular ได้ไหม? ตอบ: ได้ ServBay รองรับทั้ง Caddy, Nginx หรือ Apache เพื่อเป็น Static File Server โดยอัตโนมัติตามที่เลือก ทุกตัวประสิทธิภาพดีและเหมาะกับ Static Site
สรุป
จากคำแนะนำนี้ คุณจะสามารถสร้างและรันโปรเจกต์ Angular ใน ServBay ได้อย่างสมบูรณ์ โดยเรียนรู้วิธีเอา Reverse Proxy มาช่วยในโหมดพัฒนา และ Build โปรเจกต์ไป Host แบบ Static สำหรับโหมดโปรดักชัน ใช้ Node.js ของ ServBay พร้อมฟีเจอร์จัดการเว็บไซต์และ SSL อัตโนมัติช่วยให้พัฒนา Angular Local ได้เต็มศักยภาพได้อย่างมั่นใจ รองรับเทคโนโลยี Full Stack ทุกรูปแบบในอนาคต