การสร้างและรันโปรเจกต์ Angular ใน ServBay

ภาพรวม

เอกสารฉบับนี้จะแนะนำวิธีการสร้าง ตั้งค่า และรันโปรเจกต์ Angular ในสภาพแวดล้อมพัฒนาเว็บภายในเครื่องของ ServBay โดยจะใช้ศักยภาพของ Node.js ที่ ServBay มีให้ พร้อมกับฟีเจอร์จัดการเว็บไซต์ (ชื่อเดิม “โฮสต์”) ที่ยืดหยุ่น เพื่อเตรียมพร้อมสำหรับทั้งโหมดพัฒนาและโปรดักชัน พร้อมรองรับการเข้าถึงด้วยโดเมนที่ตั้งเอง และใบรับรอง SSL เพื่อความปลอดภัยสูงสุด ServBay รวมแพ็กเกจซอฟต์แวร์ที่จำเป็นสำหรับการพัฒนา (ชื่อเดิม “บริการ”) เช่น Node.js, PHP, Python, Go, Java, และฐานข้อมูลต่าง ๆ ทำให้เหมาะสำหรับการพัฒนาแบบฟูลสแตคบนเครื่องของคุณ

Angular คืออะไร?

Angular คือเฟรมเวิร์กฝั่งหน้า (Frontend) แบบโอเพ่นซอร์สที่กูเกิลพัฒนาและดูแล สำหรับสร้างเว็บแอปพลิเคชันแบบ Single Page Application (SPA) ที่มีประสิทธิภาพสูงและตอบสนองรวดเร็ว Angular พัฒนาบน TypeScript และมาพร้อมชุดเครื่องมือครบถ้วน เหมาะอย่างยิ่งสำหรับแอปพลิเคชันขนาดใหญ่และซับซ้อนระดับองค์กร

คุณสมบัติหลักและข้อดีของ Angular

• สถาปัตยกรรมแบบคอมโพเนนต์: พัฒนา UI ด้วยคอมโพเนนต์ที่นำกลับมาใช้ซ้ำได้ ช่วยให้โค้ดดูแลรักษาและขยายผลได้ง่าย
• รองรับ TypeScript: สนับสนุนการตรวจสอบชนิดข้อมูลแบบสเตติก และฟีเจอร์เชิงวัตถุ ช่วยเสริมคุณภาพและประสิทธิภาพการพัฒนา
• Dependency Injection: ทำให้คอมโพเนนต์ทดสอบและจัดการการพึ่งพาได้ง่ายขึ้น
• CLI อันทรงพลัง: Angular CLI ช่วยสร้างโปรเจกต์ สร้างคอมโพเนนต์ เซอร์วิส โมดูล และจัดการ build หรือทดสอบได้ง่าย
• โซลูชันในตัว: มีโมดูลสำเร็จรูปสำหรับ Routing, Form, HTTP Client และอื่น ๆ
• ประสิทธิภาพสูง: รองรับเทคนิค AOT (Ahead-of-Time) Compile, Tree-shaking เพื่อเร่งความเร็วแอป

เมื่อใช้ Angular บน ServBay ที่มอบสภาพแวดล้อมเสถียรและครบเครื่อง นักพัฒนาจึงโฟกัสกับตรรกะสำคัญของธุรกิจได้เต็มที่

สิ่งที่ต้องมีเบื้องต้น

ก่อนเริ่มต้น โปรดตรวจสอบให้แน่ใจว่าคุณได้เตรียมสิ่งต่อไปนี้แล้ว:

1. ติดตั้ง ServBay: คุณได้ติดตั้งและเริ่มใช้งาน ServBay บน macOS เรียบร้อย
2. เปิดใช้งานแพ็กเกจ Node.js: ในหน้าควบคุมของ ServBay ตรวจสอบให้แน่ใจว่าติดตั้ง Node.js เวอร์ชันที่ต้องการ (ServBay รองรับการติดตั้งและสลับหลาย Node.js เวอร์ชันได้อย่างง่ายดาย)

การตั้งค่าและรันโปรเจกต์ Angular ด้วย ServBay

ขั้นตอนต่อไปนี้คือการสร้างและรันโปรเจกต์ Angular โดยใช้ Node.js ที่มาพร้อม ServBay ในโหมดพัฒนา จะตั้งค่าฟีเจอร์เว็บไซต์ของ ServBay เพื่อรีเวิร์สพร็อกซีไปยัง Angular Dev Server ส่วนในโหมดโปรดักชัน จะ build แอปและใช้ ServBay ให้บริการไฟล์สแตติก

1. สร้างโปรเจกต์ Angular

เริ่มจากติดตั้ง Angular CLI และสร้างโปรเจกต์ใหม่

1. ติดตั้ง Angular CLI: เปิดเทอร์มินัล แล้วใช้ Node.js จาก ServBay เพื่อติดตั้ง Angular CLI ทั่วระบบ หาก Node.js ของ ServBay ไม่ถูกเพิ่ม PATH อัตโนมัติ อาจต้องสลับสภาพแวดล้อมก่อน โดยทั่วไป ServBay จะจัดการ PATH ให้โดยอัตโนมัติ

   npm install -g @angular/cli

   คำสั่งนี้จะติดตั้งคำสั่ง ng ในระบบ คุณจะสามารถใช้งาน Angular CLI จากเทอร์มินัลได้ทั่วเครื่อง

2. สร้างโปรเจกต์ Angular ใหม่: ไปที่โฟลเดอร์รากเว็บไซต์ที่ ServBay แนะนำ /Applications/ServBay/www แล้วใช้คำสั่ง ng new เพื่อสร้างโปรเจกต์ใหม่ เช่น servbay-angular-app เพื่อให้ชื่อตรงกับแบรนด์ ServBay

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Angular CLI จะสอบถามรายละเอียดบางอย่างเกี่ยวกับโปรเจกต์ ให้ตอบตามต้องการ ตัวอย่างเช่น:

   ? Would you like to add Angular routing? Yes  # ต้องการเพิ่มฟีเจอร์ Routing หรือไม่ แนะนำตอบ Yes
   ? Which stylesheet format would you like to use? CSS # เลือกรูปแบบ Stylesheet เช่น CSS

   รอจนคำสั่งเสร็จสมบูรณ์ จะมีโฟลเดอร์ servbay-angular-app ถูกสร้างใน /Applications/ServBay/www พร้อมโครงสร้างและไฟล์พื้นฐานของโปรเจกต์

3. ติดตั้ง dependencies โปรเจกต์: เข้าไปยังโฟลเดอร์โปรเจกต์ที่สร้างใหม่ แล้วติดตั้งแพ็กเกจ dependencies ที่ต้องใช้

   cd servbay-angular-app
   npm install

   คำสั่ง npm install จะอ่าน dependencies จาก package.json และติดตั้งลงใน node_modules

2. แก้ไขคอนเทนต์หน้าแรก Angular (ไม่บังคับ)

เพื่อทดสอบว่าโปรเจกต์รันได้สำเร็จ สามารถแก้ไขหน้าแรกให้แสดงข้อความง่าย ๆ

1. แก้ไฟล์ src/app/app.component.html: เปิดไฟล์ servbay-angular-app/src/app/app.component.html ใน Editor ที่คุณถนัด ลบหรือแก้ไขเนื้อหา ให้เหลือเพียงข้อความต้อนรับ เช่น

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>This is your Angular app running via ServBay!</p>
   </div>

3. รันโปรเจกต์ในโหมดพัฒนา

ระหว่างพัฒนา เราจะใช้เซิร์ฟเวอร์ Angular Dev (ng serve) ซึ่งสนับสนุน hot reload เพื่อความสะดวก และใช้ ServBay ตั้งค่ารีเวิร์สพร็อกซีเข้าถึงเซิร์ฟเวอร์ผ่านโดเมนภายในเครื่อง

1. รัน Angular Dev Server: ที่รากโปรเจกต์ (/Applications/ServBay/www/servbay-angular-app) ใช้คำสั่งเปิด Dev Server โดยกำหนดพอร์ต (เช่น 8585) เพื่อลดโอกาสชนกับ Web Server หลัก

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   เซิร์ฟเวอร์จะรันที่ http://localhost:8585/ อย่าปิดหน้าต่างเทอร์มินัลขณะรัน

2. ตั้งค่าเว็บไซต์ ServBay (รีเวิร์สพร็อกซี): เข้าแผงควบคุมของ ServBay ไปที่เมนู “เว็บไซต์” (ชื่อเดิม “โฮสต์”) แล้วเพิ่มเว็บไซต์ใหม่ตามนี้

   • ชื่อ (Name): เช่น My Angular Dev Site (สำหรับแสดงใน ServBay เท่านั้น)
   • โดเมน (Domain): แนะนำใช้โดเมนสำหรับทดสอบเช่น servbay-angular-dev.servbay.demo ServBay จะ map .servbay.demo ไป IP 127.0.0.1 อัตโนมัติ
   • ประเภทเว็บไซต์ (Website Type): เลือก Reverse Proxy
   • Proxy Address: ใส่ 127.0.0.1
   • Proxy Port: กำหนดพอร์ตที่ Dev Server ใช้งาน เช่น 8585

   เสร็จแล้วให้บันทึกและกด Apply ใน ServBay

3. เข้าถึงเว็บไซต์โหมดพัฒนา: เปิดเบราว์เซอร์ ไปที่ https://servbay-angular-dev.servbay.demo

   เพราะคุณเข้าใช้งานผ่าน ServBay และ ServBay จะให้ใบรับรอง SSL อัตโนมัติ (ผ่าน ServBay User CA หรือ ServBay Public CA) สามารถใช้งานเว็บไซต์ผ่าน HTTPS ได้เลย เหมาะกับการทดสอบเหมือนโปรดักชันล่วงหน้า

4. Build และรันโปรเจกต์โหมดโปรดักชัน

เมื่อพัฒนาเสร็จพร้อม deploy ต้อง build โปรเจกต์เพื่อผลิตไฟล์สแตติก แล้วใช้ ServBay ให้บริการไฟล์เหล่านั้น

1. Build โปรเจกต์โปรดักชัน: ที่รากโปรเจกต์ (/Applications/ServBay/www/servbay-angular-app) ใช้คำสั่ง:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # หรือใน Angular CLI เวอร์ชันใหม่:
   # ng build

   ธง --prod (ค่าดีฟอลต์ใน CLI เวอร์ชันใหม่) จะเปิดการทำงานแบบ production พร้อม optimize ต่าง ๆ ไฟล์ที่ build เสร็จจะถูกสร้างใน dist/servbay-angular-app

2. ตั้งค่าเว็บไซต์ ServBay (Static File): ในแผงควบคุม ServBay ไปเมนู “เว็บไซต์” เพิ่มเว็บไซต์ใหม่แล้วตั้งค่าต่อไปนี้

   • ชื่อ (Name): เช่น My Angular Production Site
   • โดเมน (Domain): ตัวอย่าง servbay-angular-prod.servbay.demo
   • ประเภทเว็บไซต์ (Website Type): เลือก Static
   • รากเว็บไซต์ (Website Root Directory): ชี้ไปยังโฟลเดอร์ output จากขั้นตอน build คือ /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app (โฟลเดอร์ที่มี index.html)

   เมื่อครบแล้วให้ Save/Apply

3. เข้าถึงเว็บไซต์โหมดโปรดักชัน: เปิดเบราว์เซอร์ไปที่ https://servbay-angular-prod.servbay.demo

   ตอนนี้เว็บไซต์ Angular ของคุณออนไลน์ในโหมดโปรดักชันและให้บริการผ่าน Web Server ประสิทธิภาพสูงของ ServBay (Caddy/Nginx ตามที่ตั้งค่าไว้) พร้อมใบรับรอง SSL อัตโนมัติ

ข้อดีของ ServBay กับการพัฒนา Angular

• สภาพแวดล้อมรวมศูนย์: ติดตั้งและจัดการ Node.js หลายเวอร์ชันได้ง่ายไร้ปัญหา Environment Variable
• จัดการเว็บไซต์ยืดหยุ่น: ตั้งค่า Reverse Proxy หรือ Static Serve ได้จาก UI รวดเร็ว ปรับเปลี่ยนระหว่างโหมด dev/prod ได้ฉับไว
• SSL ในตัว: ให้ใบรับรอง SSL ฟรีและตั้งค่าอัตโนมัติสำหรับเว็บไซต์ในเครื่อง จำลอง HTTPS production เต็มรูปแบบ ไม่เจอปัญหา mixed content
• รองรับเทคโนโลยีหลากหลาย: หากโปรเจกต์คุณมี API backend (ใช้ Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot ฯลฯ) หรือฐานข้อมูล (MySQL, PostgreSQL, MongoDB, Redis) ServBay สามารถผนวกรวมทุกส่วน ให้คุณได้ฟูลสแตคในเครื่องเดียว มีการอัพเดตสม่ำเสมอ และฟีเจอร์ครบครัน
• สำรองและกู้คืนข้อมูล: มีระบบสำรองและคืนค่าข้อมูลเว็บไซต์ ฐานข้อมูล และใบรับรอง SSL ช่วยปกป้องงานพัฒนาของคุณ
• รีเซ็ตรหัสผ่านฐานข้อมูล: ฟีเจอร์รีเซ็ตรหัส root ของ MySQL, MariaDB และ PostgreSQL ในตัวแก้ปัญหาที่นักพัฒนาเจอบ่อย

คำถามที่พบบ่อย (FAQ)

• ถาม: รัน ng new หรือ ng serve แล้วแจ้งว่า command not found: ng ทำอย่างไร? ตอบ: นี่มักเกิดจากการที่ Angular CLI ยังไม่ได้ติดตั้ง หรือ PATH ยังไม่ถูกเพิ่มเข้าระบบ ให้ติดตั้ง @angular/cli ทั่วโลก (npm install -g @angular/cli) และตรวจสอบว่า Node.js ของ ServBay ถูกตั้ง PATH ถูกแล้ว อาจต้องเปิดเทอร์มินัลใหม่หรือรีสตาร์ท ServBay
• ถาม: ng serve รันไม่ขึ้น แจ้งว่าพอร์ตถูกใช้งานอยู่ ทำอย่างไร? ตอบ: แปลว่าพอร์ต (เช่น 8585) ถูกใช้ไปแล้ว ให้เปลี่ยนพอร์ตในคำสั่ง ng serve --port XXXX (เช่น ng serve --port 8586) และอย่าลืมอัปเดตเลขพอร์ตให้ตรงใน Setting ของ ServBay ด้วย
• ถาม: ตั้งค่าเว็บไซต์ใน ServBay แล้ว แต่เข้าโดเมนแล้วไม่ขึ้นหน้าเว็บ? ตอบ: ตรวจสอบดังนี้
  • ตรวจสอบว่า ServBay กำลังทำงาน
  • กรณี dev mode ให้เช็กว่า ng serve กำลังรันและพอร์ตตรงกับค่าที่ตั้งใน ServBay
  • กรณี production mode ดูว่า “Website Root Directory” ถูกตั้งไปยังโฟลเดอร์ที่มี index.html (dist/your-project-name)
  • ตรวจสอบ log ของ ServBay หากมี error รายละเอียด
  • โดเมนที่เข้าใช้งานต้องตรงตามที่ตั้งไว้ใน ServBay
• ถาม: ใช้ Web Server ต่าง ๆ (Caddy/Nginx/Apache) ใน ServBay โฮสต์ Angular production ได้ไหม? ตอบ: ได้ ServBay รองรับ Caddy, Nginx (และ Apache) ในโหมด Static Website จะเลือกใช้ web server ตามที่ enable ไว้อัตโนมัติ ทุกตัวรองรับ static file ประสิทธิภาพสูง

สรุป

หลังอ่านคู่มือนี้ คุณควรสามารถสร้างและรันโปรเจกต์ Angular ใน ServBay ได้สมบูรณ์แล้ว ทั้งในโหมดพัฒนา (ด้วย reverse proxy ผ่านโดเมนภายใน) และโหมดโปรดักชัน (build และ serve static files) พร้อมใช้ Node.js และฟีเจอร์จัดการเว็บไซต์ของ ServBay เพื่อประสบการณ์การพัฒนา Angular ที่ปลอดภัยและปลอดโปร่ง ServBay ยังสนับสนุนเทคโนโลยีฟูลสแตคอื่น ๆ อีกครบครัน เหมาะกับการพัฒนาเต็มรูปแบบในเครื่องของคุณ