การสร้างและรันโปรเจกต์ 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 ช่วยให้นักพัฒนามุ่งเน้นที่การสร้างธุรกิจได้มากขึ้น

ข้อกำหนดเบื้องต้น

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

1. ติดตั้ง ServBay: คุณได้ติดตั้งและเปิดใช้งาน ServBay (รองรับ macOS และ Windows) แล้วเรียบร้อย
2. เปิดใช้งาน 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 สร้างโปรเจกต์ใหม่

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

   npm install -g @angular/cli

   คำสั่งนี้จะติดตั้ง ng CLI ไว้ใช้งานได้แบบ Global

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

   macOS:

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

   Windows:

   cd C:\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 # เลือกรูปแบบ Style Sheet เช่น CSS

   รอให้คำสั่งทำงานเสร็จ จะได้โฟลเดอร์ใหม่ชื่อ servbay-angular-app โครงสร้างครบถ้วนอยู่ที่:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. ติดตั้ง Dependencies ของโปรเจกต์: เข้าไปในโฟลเดอร์โปรเจกต์แล้ว ติดตั้ง Dependencies ในโฟลเดอร์ Local

   cd servbay-angular-app
   npm install

   คำสั่งนี้จะติดตั้ง Dependency ที่อยู่ใน package.json ลงใน node_modules

2. แก้ไขเนื้อหาหน้าแรกของโปรเจกต์ (ปรับแต่งได้)

เพื่อทดสอบว่าโปรเจกต์ใช้งานได้จริง อาจแก้ไขหน้าแรกให้เห็นข้อความที่ต้องการ

1. แก้ไขไฟล์ src/app/app.component.html: เปิดไฟล์ servbay-angular-app/src/app/app.component.html ด้วย Editor ที่ชอบ แล้วลบหรือแก้ไขเนื้อหาให้แสดงข้อความง่ายๆ เช่น "Hello ServBay!"

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>นี่คือ Angular app ของคุณรันผ่าน ServBay!</p>
   </div>

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

ในขั้นตอนพัฒนา เราจะใช้ Angular CLI รัน Server (ng serve) ซึ่งรองรับ Hot Reload อย่างสะดวก และใช้ ServBay ตั้งค่ารีเวิร์สพร็อกซีเพื่อเปิดเว็บด้วย Local Domain

1. เริ่มต้น Dev Server ของ Angular: รันคำสั่งนี้ที่โปรเจกต์ โดยตั้งพอร์ต เช่น 8585 เพื่อไม่ให้ชนกับพอร์ต Web Server หลักของ ServBay

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   จะได้รับ Dev Server ที่รันที่ http://localhost:8585/ ต้องเปิดหน้าต่าง Terminal ค้างไว้ให้ Server ทำงานต่อไป

2. ตั้งค่าเว็บไซต์แบบรีเวิร์สพร็อกซีใน 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

   ตั้งค่าเสร็จแล้ว กดบันทึกและนำไปใช้

3. เข้าชมเว็บไซต์โหมดพัฒนา: เปิดเบราว์เซอร์ ไปที่ 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

1. Build โปรเจกต์เวอร์ชันโปรดักชัน: รันคำสั่งสร้าง Production Build ที่โฟลเดอร์โปรเจกต์

   macOS:

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

   Windows:

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

   ธง --prod จะเปิดใช้งาน AOT Compile, Minify, Tree-shaking ฯลฯ (Angular CLI ใหม่ใช้โดยอัตโนมัติ) ไฟล์ที่ Generate จะอยู่ใน dist/servbay-angular-app (หรือชื่อโปรเจกต์ตามตั้งค่า)

2. กำหนดเว็บไซต์แบบ 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

   ตั้งค่าเสร็จ กดบันทึกและนำไปใช้

3. เข้าชมเว็บไซต์โหมดโปรดักชัน: เปิดเบราว์เซอร์ ไปที่ 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 ทุกรูปแบบในอนาคต