Menambah Laman Web Fail Statik
ServBay ialah alat pembangunan web tempatan yang berkuasa, menyokong pelbagai bahasa dan pangkalan data. Selain laman web dinamik, ServBay juga sangat sesuai untuk menghos dan menguji laman web berasaskan fail statik, seperti laman web mudah atau aplikasi hadapan yang dibina menggunakan HTML, CSS dan JavaScript.
Dokumen ini akan membimbing anda cara menambah dan mengkonfigurasi laman web fail statik dalam ServBay.
Gambaran Umum
Laman web fail statik terdiri daripada fail yang disajikan terus oleh pelayan web dan tidak melibatkan pelaksanaan skrip bahagian pelayan (seperti PHP, Node.js, Python dan lain-lain). Laman-laman ini biasanya mengandungi halaman HTML, helaian gaya CSS, fail JavaScript, imej, fon dan sumber lain.
Menggunakan ServBay untuk menghos laman web statik tempatan sangat memudahkan proses pembangunan, penyahpepijatan dan ujian, terutamanya apabila anda perlu mensimulasikan akses domain persekitaran produksi, sambungan HTTPS atau menguji perkongsian sumber silang domain (CORS).
Senario Penggunaan
- Membangunkan dan menguji projek frontend tulen (HTML/CSS/JS).
- Menghos laman web dokumentasi statik atau blog.
- Menguji respon pelayan web yang berbeza (Caddy/Nginx) terhadap sumber statik.
- Mensimulasikan akses domain dan HTTPS produksi pada persekitaran tempatan.
- Ujian hasil binaan rangka kerja hadapan seperti React, Vue atau Angular secara tempatan.
Prasyarat
- Anda telah berjaya memasang dan menjalankan ServBay pada sistem macOS anda.
- Anda memiliki fail laman web statik yang ingin digunakan.
Langkah-Langkah
Ikuti langkah-langkah berikut untuk menambah laman web fail statik anda ke dalam ServBay:
Langkah 1: Sediakan Fail Laman Web Anda
Pertama, pastikan semua fail laman web statik anda (contohnya index.html
, style.css
, script.js
dan sebagainya) diletakkan dalam satu folder tersendiri.
Adalah disarankan untuk membuat direktori laman web anda di bawah direktori akar laman web lalai ServBay iaitu /Applications/ServBay/www
bagi memudahkan pengurusan fail. Sebagai contoh, jika anda ingin mencipta laman bernama my-static-site
, anda boleh buat folder my-static-site
dalam /Applications/ServBay/www/
dan letakkan semua fail laman web anda di situ.
bash
# Cipta direktori contoh di Terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo
# Cipta fail index.html mudah
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Laman Statik ServBay</title>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 50px; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Tahniah! Konfigurasi laman statik ServBay anda berjaya!</h1>
<p>Anda sedang mengakses laman statik tempatan ini melalui ServBay.</p>
</body>
</html>' > index.html
# Struktur fail anda kini berkemungkinan seperti berikut:
# /Applications/ServBay/www/servbay-static-demo/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Langkah 2: Tambah Laman Web dalam ServBay
- Buka aplikasi ServBay.
- Pada bar navigasi kiri, klik Laman Web (Perhatian: Pada versi lama ia mungkin dipaparkan sebagai "Hos"; dalam versi baru telah dinamakan semula sebagai "Laman Web").
- Pada bahagian bawah senarai laman web, klik butang Tambah. Satu tetingkap konfigurasi akan muncul.
Langkah 3: Konfigurasi Tetapan Laman Web
Dalam tetingkap konfigurasi, isikan atau pilih maklumat berikut:
- Domain: Masukkan domain yang anda mahu gunakan untuk mengakses laman ini secara tempatan. Disarankan menggunakan domain yang berakhir dengan
.servbay.demo
, contohnyastatic.servbay.demo
ataumy-static-site.servbay.demo
. ServBay akan mengurus resolusi domain.servbay.demo
secara automatik, tanpa perlu mengubah fail hosts secara manual.- Penjelasan: Penggunaan domain
.servbay.demo
mengelakkan pertindihan dengan domain sebenar di internet, dan penyelesai DNS terbina ServBay memastikan domain-domain ini menghala ke komputer anda secara tempatan.
- Penjelasan: Penggunaan domain
- Path: Klik ikon folder di sebelah kanan dan pilih direktori tempat fail laman web anda disimpan, contohnya
/Applications/ServBay/www/servbay-static-demo/
.- Penjelasan: Path menetapkan direktori root pelayan web (Caddy atau Nginx) untuk laman web tersebut, juga dikenali sebagai Document Root. Apabila anda melayari
http://static.servbay.demo/
, pelayan web akan mencariindex.html
atau fail laman utama lain di direktori ini. Pastikan path menunjuk ke direktori, bukan fail spesifik sepertiindex.html
.
- Penjelasan: Path menetapkan direktori root pelayan web (Caddy atau Nginx) untuk laman web tersebut, juga dikenali sebagai Document Root. Apabila anda melayari
- Port: Biasanya biarkan lalai. Port lalai untuk HTTP ialah 80, untuk HTTPS ialah 443. Jika anda ingin menetapkan port bukan standard untuk laman ini, boleh ubah di sini.
- Pelayan Web: Pilih pelayan web yang anda ingin gunakan. Untuk laman web statik, Caddy dan Nginx kedua-duanya pilihan yang baik.
- Caddy: Mudah dikonfigurasi, menyokong HTTP/2 dan penyediaan HTTPS automatik (dengan ServBay User CA), dan menjadi pilihan lalai dalam ServBay.
- Nginx: Berprestasi tinggi, konfigurasi fleksibel, digunakan secara meluas dalam produksi.
- Pilih salah satu daripada dua ini.
- Versi PHP: Tidak diperlukan untuk laman statik. Pilih None.
- Versi Node.js: Tidak diperlukan untuk laman statik. Pilih None.
- Versi Python: Tidak diperlukan untuk laman statik. Pilih None.
- Versi Go: Tidak diperlukan untuk laman statik. Pilih None.
- Versi Java: Tidak diperlukan untuk laman statik. Pilih None.
- SSL: Jika anda ingin mengakses laman statik ini melalui HTTPS secara tempatan, tandakan pilihan ini. ServBay akan menggunakan Sijil CA Pengguna ServBay terbina untuk menyediakan sijil SSL yang dipercayai secara tempatan, memudahkan ujian fungsi berkaitan HTTPS.
- CORS: Jika laman statik anda perlu membenarkan perkongsian sumber silang domain (CORS), contohnya memuatkan fon atau data API dari domain tempatan lain, tandakan pilihan ini dan buat konfigurasi yang diperlukan. ServBay menyokong tetapan header CORS untuk laman web anda.
Langkah 4: Simpan & Terapkan Perubahan
- Setelah semua maklumat diisi, klik butang Simpan di bahagian bawah tetingkap.
- Kembali ke skrin senarai laman web ServBay. Anda akan melihat entri laman baru yang baru sahaja anda tambah.
- Klik butang Terapkan Perubahan di bahagian atas senarai laman web.
- Penjelasan: Mengklik Terapkan Perubahan membolehkan ServBay memuat semula konfigurasi pelayan web (Caddy atau Nginx) supaya konfigurasi laman baru berkuatkuasa. Langkah ini sangat penting; laman yang anda tambah tidak akan dapat diakses jika anda tidak melakukannya.
Sahkan Konfigurasi
Selepas menyimpan dan menerapkan perubahan, buka pelayar web anda dan masukkan domain yang sudah dikonfigurasi (contohnya http://static.servbay.demo
atau https://static.servbay.demo
jika SSL didayakan) di bar alamat.
Jika semuanya dikonfigurasi dengan betul, anda sepatutnya dapat melihat kandungan laman statik anda, seperti halaman index.html
yang telah kita cipta sebagai contoh.
Perhatian
- Pastikan Path yang dikonfigurasi ialah direktori root fail laman web anda.
- Setiap kali menambah, mengubah atau memadam konfigurasi laman web, anda mesti klik butang Terapkan Perubahan agar ia berkuatkuasa.
- Untuk laman web statik, tetapkan bahasa pelayan (PHP, Node.js dll.) kepada None untuk elakkan penggunaan sumber yang tidak perlu dan risiko keselamatan.
- Jika menghadapi masalah akses, pastikan ServBay sedang berjalan, semak status pelayan web (Caddy/Nginx), dan sahkan domain yang ditaip dalam pelayar adalah sama seperti yang dikonfigurasi dalam ServBay.
Soalan Lazim (FAQ)
S: Apakah yang perlu saya buat jika paparan “Laman web ini tidak dapat diakses” atau “Server tidak dijumpai” apabila cuba mengakses domain yang telah dikonfigurasi?
J:
- Pastikan aplikasi ServBay berjalan.
- Pastikan anda telah klik butang Terapkan Perubahan dalam ServBay.
- Semak sama ada domain yang ditaip dalam pelayar sama tepat dengan apa yang dikonfigurasi dalam ServBay (termasuk sama ada menggunakan
http://
atauhttps://
). - Pastikan Path dikonfigurasi dengan betul dan menunjuk kepada direktori fail laman anda.
- Semak fail log ServBay untuk maklumat ralat lebih lanjut.
S: Kenapa halaman direktori dipaparkan atas akses, bukannya fail index.html
saya?
J: Ini biasanya berlaku kerana direktori root laman web anda tiada fail halaman utama lalai (contohnya index.html
). Pastikan direktori root laman anda mempunyai fail index.html
(atau fail lalai lain bergantung tetapan pelayan) dan nama serta ekstensi fail adalah tepat dan peka huruf besar kecil.
S: Bolehkah saya mengkonfigurasi HTTPS untuk laman statik?
J: Ya, anda boleh menandakan pilihan SSL dalam konfigurasi laman web di ServBay. ServBay akan menjana dan mempercayai sijil SSL untuk domain tempatan anda melalui ServBay User CA, membolehkan akses tempatan melalui HTTPS.
Kesimpulan
Dengan ServBay, anda dapat menambah serta mengurus laman web fail statik secara mudah di persekitaran tempatan, tidak kira sama ada ia hanya halaman HTML mudah atau hasil binaan aplikasi frontend yang kompleks. Manfaatkan fungsi pengurusan laman, resolusi domain tempatan dan sokongan SSL ServBay untuk proses pembangunan dan ujian front-end yang lebih cekap dan profesional.