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 cara membina, mengkonfigurasi, dan menjalankan projek Angular menggunakan persekitaran pembangunan web lokal ServBay. Kami akan memanfaatkan persekitaran Node.js yang mantap serta pengurusan laman web (dahulunya dikenali sebagai "host") yang fleksibel dari ServBay untuk menyediakan persekitaran pembangunan dan pengeluaran dengan mudah, serta memastikan akses selamat melalui domain khusus dan sijil SSL. ServBay menyatukan pelbagai perisian pembangunan (dahulunya dikenali sebagai "servis") termasuk Node.js, PHP, Python, Go, Java, pangkalan data, dan banyak lagi—menjadikannya pilihan ideal untuk pembangunan setempat full-stack.

Apa itu Angular? ​

Angular merupakan rangka kerja sumber terbuka yang dikekalkan oleh Google, direka untuk membina aplikasi satu muka surat (SPA) yang prestasi tinggi dan dinamik. Ia dibangunkan menggunakan TypeScript dan menawarkan set alat yang lengkap serta pendekatan pembangunan berstruktur, amat sesuai untuk membina aplikasi perusahaan berskala besar serta kompleks.

Ciri-ciri dan Kelebihan Utama Angular ​

  • Seni bina berdasarkan komponen: Membina antaramuka pengguna dengan komponen boleh guna semula, meningkatkan penyelenggaraan dan skalabiliti kod.
  • Sokongan TypeScript: Membolehkan semakan jenis statik dan ciri berorientasi objek yang kukuh, sekali gus meningkatkan kualiti dan kecekapan pembangunan kod.
  • Suntikan kebergantungan: Memudahkan ujian dan pengurusan kebergantungan komponen.
  • CLI yang berkuasa (Antaramuka baris arahan): Memudah cara penciptaan projek, penjanaan komponen, servis, modul, serta tugas pembinaan dan ujian.
  • Modul terbina dalam: Membekalkan modul penting seperti routing, pengendalian borang, pelanggan HTTP dan lain-lain.
  • Pengoptimuman prestasi: Menyokong AOT (Ahead-of-Time), tree shaking, dan teknik lain untuk meningkatkan prestasi aplikasi.

Dengan Angular serta persekitaran stabil ServBay, pembangun boleh lebih fokus pada logik perniagaan aplikasi mereka.

Keperluan Asas ​

Sebelum bermula, pastikan anda telah memenuhi syarat berikut:

  1. Pasang ServBay: Anda telah berjaya memasang dan memulakan ServBay (menyokong macOS dan Windows).
  2. Aktifkan pakej Node.js: Dalam panel kawalan ServBay, pastikan anda telah memasang dan mengaktifkan versi Node.js yang diperlukan. ServBay menyokong pelbagai versi Node.js dan memudahkan pertukaran versi.

Cara Menyediakan dan Menjalankan Projek Angular dengan ServBay ​

Kita akan menggunakan persekitaran Node.js ServBay untuk mencipta dan menjalankan projek Angular. Dalam mod pembangunan, kita akan konfigurasikan proksi balikan menggunakan fungsi laman web ServBay untuk menghala ke pelayan pembangunan Angular; dalam mod pengeluaran, kita akan bina projek dan gunakan konfigurasi servis fail statik ServBay.

1. Mencipta Projek Angular ​

Pertama, kita akan menggunakan Angular CLI untuk membina projek baharu.

  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 automatik ke PATH sistem, anda mungkin perlu beralih ke persekitaran Node.js ServBay terlebih dahulu. Biasanya, pengurusan PATH dilakukan secara automatik oleh ServBay.

    bash
    npm install -g @angular/cli

    Ini akan memasang arahan ng dalam sistem anda, supaya anda boleh gunakan Angular CLI secara global.

  2. Cipta projek Angular baharu: Beralih ke direktori root laman web yang disarankan ServBay, dan gunakan arahan ng new untuk membina projek Angular baharu. Contoh nama projek bermula dengan identiti jenama ServBay, seperti servbay-angular-app.

    macOS:

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

    Windows:

    bash
    cd C:\ServBay\www
ng new servbay-angular-app

    Angular CLI akan meminta beberapa maklumat projek. Ikuti arahan dan pilih mengikut keutamaan anda:

    ? Would you like to add Angular routing? Yes  # Tambahkan fungsi routing, disarankan pilih Yes
? Which stylesheet format would you like to use? CSS # Pilih format stylesheet, contoh CSS

    Setelah selesai, Angular CLI akan membina folder baru bernama servbay-angular-app dalam root laman web:

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

  3. Pasang kebergantungan projek: Masuk ke direktori projek baharu dan pasang segala kebergantungan tempatan yang diperlukan.

    bash
    cd servbay-angular-app
npm install

    Arahan npm install akan membaca fail package.json projek dan memasang semua kebergantungan ke dalam folder node_modules.

2. Ubah Kandungan Output Projek Angular (Pilihan) ​

Untuk mengesahkan projek berjalan dengan baik, kita boleh ubah output halaman utama projek.

  1. Ubah fail src/app/app.component.html: Guna editor kod pilihan anda untuk buka fail servbay-angular-app/src/app/app.component.html. Padam atau ubah kandungannya supaya hanya menampilkan tajuk ringkas, contohnya "Hello ServBay!".

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

3. Jalankan Projek dalam Mod Pembangunan ​

Dalam pembangunan, biasanya kita gunakan pelayan pembangunan Angular CLI (ng serve). Pelayan ini menyokong ciri reload pantas untuk memudahkan pembangunan. Seterusnya, manfaatkan fungsi proksi balikan ServBay untuk mengakses pelayan pembangunan tersebut melalui domain lokal.

  1. Mula pelayan pembangunan Angular: Dari root projek, jalankan arahan berikut untuk memulakan pelayan pembangunan. Tetapkan port seperti 8585 supaya tidak bertindih dengan port pelayan web ServBay.

    macOS:

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

    Windows:

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

    Pelayan ini menjalankan di http://localhost:8585/. Pastikan terminal terus dibuka untuk mengekalkan pelayan berjalan.

  2. Konfigurasi laman web ServBay (Proksi Balikan): Dalam panel kawalan ServBay, buka tetapan "Laman web" (dahulunya "Host"). Tambahkan konfigurasi laman baharu melalui proksi balikan ke pelayan pembangunan Angular.

    • Nama (Name): Contoh My Angular Dev Site (hanya untuk paparan dalaman ServBay)
    • Domain: Disarankan guna domain pengujian jenama ServBay, contohnya servbay-angular-dev.servbay.demo. ServBay akan automatik menghala domain .servbay.demo ke IP lokal 127.0.0.1.
    • Jenis laman web (Website Type): Pilih Proksi Balikan (Reverse Proxy).
    • Alamat proksi (Proxy Address): Masukkan 127.0.0.1.
    • Port proksi (Proxy Port): Masukkan port yang anda tetapkan dalam ng serve, contoh 8585.

    Simpan dan gunakan konfigurasi.

  3. Akses laman pembangunan: Buka browser anda dan lawati domain lokal https://servbay-angular-dev.servbay.demo.

    Melalui ServBay, anda mendapat SSL yang dikonfigurasi secara automatik (ServBay User CA atau ServBay Public CA), jadi laman web anda boleh diakses dengan selamat melalui protokol HTTPS. Ini juga menyerupai akses sebenar dan membolehkan anda mengenal pasti isu berkaitan SSL lebih awal.

4. Bina dan Jalankan Versi Pengeluaran ​

Apabila pembangunan selesai dan anda bersedia untuk ‘deploy’, bina versi pengeluaran yang dioptimumkan, menghasilkan fail statik untuk pelayan fail statik ServBay.

  1. Bina versi pengeluaran: Dari root projek, jalankan:

    macOS:

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

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng build --prod
# Atau dengan CLI Angular versi baru:
# ng build

    Pilihan --prod (default dalam CLI baru) mengaktifkan pengoptimuman seperti AOT, compression, dan tree-shaking. Selepas pembinaan, fail statik berada dalam folder dist/servbay-angular-app (nama folder bergantung pada konfigurasi projek).

  2. Konfigurasi laman web ServBay (Fail Statik): Dalam panel kawalan ServBay, buka tetapan laman web dan tambah satu konfigurasi baharu menghala domain lokal anda ke direktori output pengeluaran.

    • Nama (Name): Contoh My Angular Production Site

    • Domain: Guna domain baru, contoh servbay-angular-prod.servbay.demo.

    • Jenis laman web (Website Type): Pilih Statik (Static).

    • Root direktori laman web (Website Root Directory): Arahkan ke direktori output dist:

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

      Pastikan ia menunjuk ke dalam folder yang mengandungi fail index.html.

    Simpan dan guna perubahan.

  3. Akses laman pengeluaran: Buka browser anda dan lawati domain lokal anda https://servbay-angular-prod.servbay.demo.

    Kini anda akan melihat versi pengeluaran Angular anda yang dihidang melalui pelayan web berprestasi tinggi ServBay (Caddy atau Nginx, bergantung pada tetapan anda). ServBay akan mengurus sijil SSL secara automatik untuk memastikan akses selamat.

Kelebihan ServBay dalam Pembangunan Angular ​

  • Persekitaran integrasi: Pasang dan urus pelbagai versi Node.js dengan mudah, tanpa perlu tetapkan pembolehubah persekitaran rumit.
  • Pengurusan laman web fleksibel: Konfigurasi proksi balikan dan servis fail statik secara intuitif, mudah bertukar antara pembangunan dan pengeluaran.
  • Sokongan SSL terbina: Sediakan sijil SSL percuma dan automatik untuk persekitaran pembangunan lokal, menyerupai HTTPS pengeluaran tanpa amaran kandungan bercampur.
  • Sokongan pelbagai teknologi: Jika projek anda terdiri daripada API backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, dll.) atau pangkalan data (MySQL, PostgreSQL, MongoDB, Redis), ServBay boleh mengintegrasikan kesemua ini dan menawarkan persekitaran pembangunan full-stack setempat. ServBay sentiasa mengemas kini dan menyokong semua perisian penting.
  • Sandaran dan pemulihan data: Fungsi sandaran konfigurasi, laman web, pangkalan data dan sijil SSL, melindungi data pembangunan anda.
  • Tetapan semula kata laluan pangkalan data: Fungsi terbina untuk set semula kata laluan root untuk MySQL, MariaDB, PostgreSQL, menyelesaikan isu lazim pembangun.

Soalan Lazim (FAQ) ​

  • S: Kenapa saya dapat mesej command not found: ng bila menjalankan ng new atau ng serve? J: Biasanya ini bermakna Angular CLI belum dipasang atau tidak berada dalam PATH sistem. Pastikan anda telah pasang @angular/cli secara global (npm install -g @angular/cli) dan persekitaran Node.js ServBay telah diatur dengan betul ke PATH. Cuba mulakan semula terminal atau ServBay.
  • S: Kenapa ng serve gagal bermula dan beritahu port telah digunakan? J: Ini bermakna port (contoh 8585) telah digunakan oleh aplikasi lain. Pilih port lain yang tidak digunakan melalui --port dalam arahan ng serve—misal ng serve --port 8586—dan kemas kini port dalam konfigurasi proksi ServBay.
  • S: Kenapa laman web ServBay saya tidak memuatkan halaman apabila mengakses domain? J: Periksa perkara berikut:
    • ServBay sedang berjalan.
    • Dalam mod pembangunan, pastikan perintah ng serve berjalan dan port mendengar sama dengan konfigurasi proksi ServBay.
    • Dalam mod pengeluaran, pastikan "Root Direktori Laman Web" dalam konfigurasi ServBay menunjuk ke direktori mengandungi fail index.html selepas build (dist/nama-projek-anda).
    • Semak log ServBay untuk maklumat lanjut tentang ralat.
    • Domain yang anda akses sama sepenuhnya dengan domain yang anda konfigurasi dalam ServBay.
  • S: Bolehkah saya guna pelayan web berbeza ServBay seperti Caddy/Nginx/Apache untuk menghidang Angular versi pengeluaran? J: Ya, ServBay membenarkan penggunaan Caddy, Nginx atau Apache sebagai pelayan fail statik. Apabila laman statik dikonfigurasi, ServBay menghidang menggunakan pelayan web yang sedang diaktifkan. Semua pelayan ini mampu menghidang fail statik dengan cekap.

Kesimpulan ​

Dengan panduan ini, anda mampu mencipta dan menjalankan projek Angular di persekitaran ServBay. Anda seterusnya telah mempelajari cara mengakses pelayan pembangunan dengan proksi balikan serta domain lokal SSL ServBay, serta membina dan menghidang versi pengeluaran Angular melalui servis fail statik ServBay. Dengan kemudahan Node.js, pengurusan laman web intuitif, dan sokongan SSL terbina, pengalaman dan kecekapan pembangunan Angular lokal dapat ditingkatkan secara ketara. Sokongan penuh teknologi ServBay juga menyediakan asas kukuh untuk keperluan pembangunan full-stack anda.