ServBay

Bahasa Melayu

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Polski
Nederlands
Українська
ไทย
한국어

Bahasa Melayu

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Mencipta dan Menjalankan Projek Angular di ServBay ​

Pengenalan ​

Dokumen ini bertujuan untuk membimbing anda tentang cara mencipta, mengkonfigurasi dan menjalankan projek Angular dalam persekitaran pembangunan web tempatan ServBay. Kami akan memanfaatkan persekitaran Node.js yang berkuasa disediakan ServBay berserta sistem pengurusan laman web (dahulunya dipanggil "hos") yang fleksibel agar dapat mengatur persekitaran pembangunan dan produksi dengan mudah, dan memastikan akses selamat melalui domain tersuai dan sijil SSL. ServBay mengintegrasikan pelbagai pakej pembangunan (dahulunya "servis"), termasuk Node.js, PHP, Python, Go, Java, pangkalan data, dan banyak lagi, menjadikannya pilihan ideal untuk pembangunan full-stack tempatan.

Apakah Itu Angular? ​

Angular ialah kerangka kerja frontend sumber terbuka yang diselenggara oleh Google untuk membina aplikasi satu halaman (SPA) yang dinamik dan berprestasi tinggi. Ia dibina berasaskan TypeScript, menawarkan set alat lengkap dan pendekatan pembangunan yang terstruktur, sangat sesuai untuk aplikasi perusahaan berskala besar dan kompleks.

Ciri-ciri Utama dan Kelebihan Angular ​

  • Seni Bina Berasaskan Komponen: Membina antara muka pengguna melalui komponen boleh guna semula, meningkatkan kemudahan penyelenggaraan dan skalabiliti kod.
  • Sokongan TypeScript: Menawarkan semakan jenis statik dan ciri pengaturcaraan berorientasikan objek yang mantap, meningkatkan kualiti kod dan produktiviti pembangunan.
  • Suntikan Kebergantungan (Dependency Injection): Memudahkan pengujian dan pengurusan kebergantungan dalam komponen.
  • CLI (Antara Muka Baris Perintah) yang Berkuasa: Memudahkan penciptaan projek, penjanaan komponen, servis, modul, serta tugas pembangunan lain seperti binaan dan ujian.
  • Penyelesaian Dalaman: Modul terbina siap untuk ciri biasa seperti routing, pengurusan borang, klien HTTP, dan banyak lagi.
  • Pengoptimuman Prestasi: Menyokong kompilasi AOT (Ahead-of-Time), tree-shaking, dan teknologi lain untuk mengoptimumkan prestasi aplikasi.

Dengan menggabungkan Angular dan persekitaran stabil ServBay, pembangun boleh lebih fokus kepada logik perniagaan aplikasi.

Prasyarat ​

Sebelum bermula, pastikan anda telah menyiapkan perkara berikut:

  1. Pasang ServBay: Pastikan anda telah berjaya memasang dan memulakan ServBay di macOS anda.
  2. Aktifkan Pakej Node.js: Dalam panel kawalan ServBay, pastikan anda telah memasang dan mengaktifkan versi Node.js yang diperlukan. ServBay menyokong pemasangan berbilang versi Node.js serta pertukaran yang mudah.

Menyediakan & Menjalankan Projek Angular Menggunakan ServBay ​

Kita akan gunakan persekitaran Node.js yang disediakan oleh ServBay untuk mencipta dan menjalankan projek Angular. Dalam mod pembangunan, kita akan konfigurasikan sistem laman web ServBay untuk proksi terbalik ke pelayan pembangunan Angular; untuk produksi, kita akan bina projek dan gunakan fungsi servis fail statik ServBay.

1. Cipta Projek Angular ​

Pertama sekali, kita perlu cipta satu projek baru menggunakan Angular CLI.

  1. Pasang Angular CLI: Buka Terminal anda, dan gunakan persekitaran Node.js ServBay untuk memasang Angular CLI secara global. Jika persekitaran Node.js ServBay tidak ditambah secara automatik ke dalam PATH sistem anda, anda mungkin perlu menukar ke persekitaran Node.js ServBay terlebih dahulu. Biasanya, ServBay akan menguruskan PATH secara automatik.

    bash
    npm install -g @angular/cli

    Ini akan memasang arahan ng ke dalam sistem anda supaya anda boleh menggunakan Angular CLI secara global.

  2. Cipta Projek Angular Baru: Tukar ke direktori root laman web yang disyorkan ServBay /Applications/ServBay/www dan gunakan arahan ng new untuk mencipta projek Angular baharu. Kami cadangkan menggunakan nama projek dengan penjenamaan ServBay, misalnya servbay-angular-app.

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

    Angular CLI akan bertanya beberapa soalan semasa penciptaan projek. Berikan input atau pilihan mengikut kesukaan anda:

    ? Would you like to add Angular routing? Yes  # Tambah fungsi routing, disyorkan pilih Yes
? Which stylesheet format would you like to use? CSS # Pilih format stylesheet, contohnya CSS

    Selesai proses ini, Angular CLI akan mencipta folder baru bernama servbay-angular-app dalam /Applications/ServBay/www dengan struktur projek asas.

  3. Pasang Kebergantungan Projek: Masuk ke direktori projek baharu anda dan pasang kebergantungan yang diperlukan oleh projek.

    bash
    cd servbay-angular-app
npm install

    Arahan npm install akan membaca fail package.json dan memuat turun kebergantungan ke dalam folder node_modules.

2. Ubah Kandungan Output Projek Angular (Pilihan) ​

Untuk mengesahkan projek berjalan dengan betul, kita boleh ubah sedikit pada paparan halaman utama projek.

  1. Ubah fail src/app/app.component.html: Guna editor kod kegemaran anda untuk buka fail servbay-angular-app/src/app/app.component.html. Padam atau tukar kandungan supaya hanya memaparkan satu tajuk mudah, sebagai contoh paparkan "Hello ServBay!".

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>Ini ialah aplikasi Angular anda yang dijalankan melalui ServBay!</p>
</div>

3. Jalankan Projek dalam Mod Pembangunan ​

Semasa pembangunan, kita biasanya akan gunakan pelayan pembangunan CLI Angular (ng serve) — pelayan ini menyokong reload automatik dan amat mudah untuk debugging. Seterusnya, kita akan manfaatkan fungsi proksi terbalik ServBay untuk mengakses pelayan ini melalui domain tempatan.

  1. Mulakan Pelayan Pembangunan Angular: Dalam root projek (/Applications/ServBay/www/servbay-angular-app), gunakan arahan berikut untuk mulakan pelayan pembangunan. Tetapkan port (cth. 8585) untuk elak konflik dengan port utama ServBay.

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

    Arahan ini akan kompilasi projek Angular anda dengan serta-merta dan memulakan pelayan web di http://localhost:8585/. Pastikan terminal dibuka agar server boleh terus berjalan.

  2. Konfigurasi Laman ServBay (Proksi Terbalik): Buka panel kawalan ServBay, pergi ke bahagian tetapan "Laman Web" (dahulunya "hos"). Tambahkan konfigurasi laman web baharu dan tunjukkan domain tempatan ke pelayan pembangunan Angular melalui proksi terbalik.

    • Nama: Contoh My Angular Dev Site (untuk penggunaan dalaman ServBay)
    • Domain: Disarankan gunakan nama domain ujian berjenama ServBay seperti servbay-angular-dev.servbay.demo. ServBay akan menyelesaikan domain ke 127.0.0.1 secara automatik.
    • Jenis Laman: Pilih Reverse Proxy (Proksi Terbalik).
    • Alamat Proksi: Masukkan 127.0.0.1.
    • Port Proksi: Masukkan port yang anda guna di langkah sebelum ini, cth. 8585.

    Selesai konfigurasi, simpan dan aktifkan perubahan dalam ServBay.

  3. Akses Website Mod Pembangunan: Buka pelayar anda dan layari domain tempatan yang telah anda konfigurasikan, misalnya https://servbay-angular-dev.servbay.demo.

    Kerana anda mengakses melalui ServBay dan ServBay menyokong penjanaan serta konfigurasi sijil SSL automatik untuk laman web tempatan (melalui ServBay User CA atau ServBay Public CA), anda boleh akses laman dengan selamat melalui HTTPS. Ini mensimulasikan persekitaran produksi dengan lebih baik, membolehkan pengesanan awal untuk isu berkaitan HTTPS.

4. Bina & Jalankan Versi Produksi ​

Apabila projek Angular anda siap dan sedia untuk deploy, anda perlukan binaan versi produksi yang dioptimumkan. Ini akan menjana fail statik yang boleh dihos menggunakan sebarang pelayan fail statik. Kita akan gunakan fungsi laman web statik ServBay.

  1. Bina Versi Produksi: Dalam root projek (/Applications/ServBay/www/servbay-angular-app), gunakan arahan berikut untuk membina projek dalam mod produksi:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# Atau untuk Angular CLI versi terbaru:
# ng build

    Flag --prod (kini default pada CLI baru) akan mengaktifkan pelbagai pengoptimuman seperti kompilasi AOT, kompres kod, tree-shaking, dan sebagainya. Fail keluaran akan berada di dalam dist/servbay-angular-app (atau nama folder mengikut konfigurasi projek anda).

  2. Konfigurasi Laman ServBay (Servis Fail Statik): Buka panel kawalan ServBay, dan pergi ke tetapan "Laman Web". Tambahkan laman baharu dan kaitkan domain tempatan ke direktori output statik versi produksi.

    • Nama: Contoh My Angular Production Site
    • Domain: Disarankan gunakan domain ujian lain berjenama ServBay, contohnya servbay-angular-prod.servbay.demo.
    • Jenis Laman: Pilih Static (Statik).
    • Root Direktori Laman: Arahkan ke folder output binaan projek anda. Biasanya /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Pastikan ia mengarah ke direktori yang mengandungi fail index.html.

    Selesai konfigurasi, simpan dan aktifkan perubahan dalam ServBay.

  3. Akses Website Mod Produksi: Buka pelayar anda dan lawati domain tempatan yang telah anda tetapkan, misalnya https://servbay-angular-prod.servbay.demo.

    Kini, anda akan dapat melihat versi produksi projek Angular anda yang dihos menggunakan pelayan web berprestasi tinggi ServBay (sama ada Caddy atau Nginx bergantung pada konfigurasi anda) dalam bentuk fail statik. Seperti sebelumnya, ServBay akan mengurus sijil SSL untuk memastikan akses yang selamat.

Kelebihan Menggunakan ServBay untuk Pembangunan Angular ​

  • Persekitaran Bersepadu: Mudah untuk memasang dan mengurus versi Node.js tanpa perlu konfigurasi kompleks pembolehubah persekitaran.
  • Pengurusan Laman Web Fleksibel: Antaramuka intuitif untuk mengkonfigurasi proksi terbalik dan servis fail statik, menukar akses antara mod pembangunan dan produksi dengan pantas.
  • Sokongan SSL Terbina: Menyediakan sijil SSL automatik, percuma untuk persekitaran pembangunan tempatan, mensimulasikan HTTPS sebenar dan mengelak amaran mixed content.
  • Sokongan Pelbagai Teknologi: Jika projek anda memerlukan backend API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, dsb.), atau pangkalan data (MySQL, PostgreSQL, MongoDB, Redis, dsb.), ServBay boleh mengintegrasikan semuanya dengan mudah untuk membina persekitaran full-stack tempatan. ServBay menyokong dan mengemaskini semua perkhidmatan ini secara berterusan, termasuk fungsi yang dulu kurang disokong kini berfungsi sepenuhnya.
  • Backup & Pemulihan Data: Fungsi backup yang mudah untuk konfigurasi, laman web, pangkalan data, dan sijil SSL, menjamin keselamatan data pembangunan tempatan anda.
  • Reset Kata Laluan DB: Fungsi terbina untuk reset kata laluan root pangkalan data MySQL, MariaDB, dan PostgreSQL, memudahkan penyelenggaraan dan mengatasi masalah biasa pembangun.

Soalan Lazim (FAQ) ​

  • S: Saya mendapat ralat command not found: ng semasa menjalankan ng new atau ng serve. Apa patut saya lakukan? J: Ini biasanya berlaku apabila Angular CLI tidak dipasang dengan betul atau tidak berada dalam PATH sistem anda. Pastikan anda telah memasang @angular/cli secara global (npm install -g @angular/cli), dan persekitaran Node.js ServBay telah dimasukkan ke dalam PATH. Cuba muat semula terminal atau restart ServBay.

  • S: ng serve gagal dijalankan kerana port telah digunakan. Bagaimana cara mengatasinya? J: Ini bermaksud port (contoh 8585) telah digunakan oleh program lain. Gunakan parameter --port dalam ng serve untuk menetapkan port lain yang masih kosong, cth. ng serve --port 8586, dan ubah konfigurasi port proksi dalam laman web ServBay anda.

  • S: Saya telah konfigurasi laman web dalam ServBay, tetapi laman tidak boleh dimuatkan. Kenapa? J: Sila semak beberapa perkara berikut:

    • Pastikan ServBay sedang berjalan.
    • Untuk mod pembangunan, pastikan ng serve berjalan dan port yang digunakan sama dengan yang dikonfigurasikan untuk proksi dalam ServBay.
    • Untuk mod produksi, pastikan tetapan "root direktori laman" betul dan menunjuk ke direktori yang mengandungi fail index.html (contoh, dist/nama-projek-anda).
    • Semak log ServBay untuk maklumat ralat lebih terperinci.
    • Pastikan domain yang anda layari sama seperti yang dikonfigurasikan dalam ServBay.

  • S: Bolehkan saya gunakan pelayan web berbeza (Caddy/Nginx/Apache) dalam ServBay untuk menghos Angular versi produksi? J: Ya, ServBay menyokong Caddy dan Nginx (dan juga Apache) sebagai pelayan fail statik. Semasa anda konfigurasikan laman, ServBay secara automatik akan guna pelayan web yang diaktifkan untuk servis laman anda. Semua pelayan ini menyokong servis fail statik dengan berkesan.

Kesimpulan ​

Dengan panduan ini, anda sepatutnya telah berjaya mencipta dan menjalankan projek Angular dengan ServBay. Anda telah belajar cara menggunakan sistem proksi terbalik ServBay untuk akses domain tempatan ke pelayan pembangunan ng serve, serta bagaimana membina dan menghoskan fail produksi Angular menggunakan servis fail statik ServBay. Dengan persekitaran Node.js ServBay, pengurusan laman web yang mesra pengguna, dan sokongan SSL terbina, anda boleh meningkatkan keberkesanan serta pengalaman pembangunan projek Angular tempatan anda. Sokongan teknologi penuh ServBay juga menawarkan asas kukuh untuk pembangunan full-stack tempatan anda.