Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) · Pelajaran

Menyajikan Kandungan Statik dengan Nginx

Konfigurasikan Nginx untuk menyajikan fail dan aset statik dengan cekap, sambil mengoptimumkan prestasi aplikasi web.

Pelajaran 3 daripada 410 langkah

Menyajikan Kandungan Statik dengan Nginx ialah pelajaran Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) merangkumi sejumlah 4 pelajaran.

Apakah Kandungan Statik?

Apabila Anda melawat sebuah laman web, Anda sering melihat gabungan pelbagai kandungan. Sesetengahnya kerap berubah (seperti suapan berita), manakala sesetengahnya kekal sama.

Kandungan statik merujuk kepada fail yang dihantar kepada pengguna tepat seperti fail tersebut disimpan. Kandungan ini tidak berubah berdasarkan orang yang melihatnya atau masa ia dilihat.

  • Fail HTML: Struktur halaman web Anda.
  • Fail CSS: Gaya dan persembahan visual.
  • Fail JavaScript: Unsur interaktif dan logik pada sisi pelanggan.
  • Imej: JPG, PNG, GIF, SVG.
  • Fon: Fon web seperti TTF, WOFF.

Nginx sangat cekap dalam menyediakan fail statik ini.

Menetapkan Direktori Akar

Untuk memberitahu Nginx tempat mencari fail statik Anda, gunakan arahan root. Arahan ini menentukan direktori asas untuk kandungan laman web Anda.

Apabila Nginx menerima permintaan, ia menambahkan URI yang diminta pada laluan root untuk mencari fail tersebut.

http {
  server {
    listen 80;
    server_name example.com;

    root /var/www/mywebsite; # Nginx looks for files here
  }
}

Blok Location untuk Laluan

Blok location penting untuk mengarahkan Nginx tentang cara mengendalikan pelbagai jenis permintaan berdasarkan laluan URLnya.

Anda boleh menentukan peraturan khusus untuk permintaan ke / (akar laman Anda), /images/, /css/ atau mana-mana laluan lain.

server {
  # ...
  root /var/www/mywebsite;

  location / {
    # Rules for requests to the root path
  }

  location /images/ {
    # Rules for requests to /images/...
  }
}

Menyediakan Halaman HTML Asas

Mari gabungkan root dan location / untuk menyediakan halaman HTML ringkas. Nginx akan mencari index.html secara lalai jika Anda menyertakan arahan index.

Jika permintaan dibuat untuk http://localhost/, Nginx akan cuba mencari /usr/share/nginx/html/index.html.

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;

  location / {
    index index.html index.htm; # Try to serve index.html or index.htm
  }
}

Mengendalikan CSS dan JavaScript

Anda tidak semestinya memerlukan blok location yang berasingan untuk setiap jenis fail. Jika arahan root ditetapkan dengan betul, Nginx akan menyediakan fail seperti /css/style.css atau /js/app.js secara terus.

Walau bagaimanapun, Anda boleh menggunakan blok lokasi khusus untuk kawalan yang lebih terperinci, seperti menggunakan peraturan penyimpanan cache tertentu pada jenis fail tertentu.

server {
  listen 80;
  server_name myapp.com;
  root /var/www/myapp/public;

  location / {
    index index.html;
  }

  location ~* \.(css|js)$ {
    # This matches .css or .js files
    # Could add specific headers or caching here
    add_header X-Content-Type-Options nosniff;
  }
}

Arahan 'index'

Arahan index memberitahu Nginx fail yang perlu dicari apabila permintaan dibuat untuk suatu direktori, bukan fail tertentu.

Contohnya, jika pengguna meminta http://example.com/blog/, Nginx akan terlebih dahulu mencari index.html di dalam direktori blog. Jika tidak ditemui, Nginx akan cuba mencari index.php, dan seterusnya.

server {
  # ...
  root /var/www/mywebsite;

  location / {
    index index.html index.php default.html; # Order matters!
  }
}

Memahami Jenis MIME

Jenis MIME (Multipurpose Internet Mail Extensions) ialah label yang mengenal pasti jenis kandungan dalam sesuatu fail, seperti text/html untuk dokumen HTML atau image/jpeg untuk imej JPEG.

Apabila Nginx menyediakan fail, ia menghantar pengepala HTTP Content-Type dengan jenis MIME yang sesuai. Pengepala ini memberitahu pelayar cara mentafsir fail tersebut.

Nginx biasanya mempunyai fail mime.types terbina dalam yang memetakan sambungan fail kepada jenis MIME yang betul, jadi Anda jarang perlu mengkonfigurasikannya secara manual untuk fail statik yang biasa.

Penyimpanan Cache untuk Prestasi

Untuk mengoptimumkan prestasi, Nginx boleh mengarahkan pelayar dan pelayan proksi supaya menyimpan fail statik dalam cache. Ini bermakna pelawat berulang tidak perlu memuat turun fail yang sama sekali lagi.

Arahan expires menetapkan pengepala HTTP Expires dan Cache-Control, yang memberitahu klien berapa lama mereka boleh menyimpan fail sebelum memintanya semula.

server {
  # ...
  location ~* \.(jpg|jpeg|gif|png|css|js|ico)$ {
    expires 30d; # Cache these files for 30 days
    add_header Cache-Control "public, no-transform";
  }

  location ~* \.html$ {
    expires 1h; # HTML files might change more often, cache for 1 hour
    add_header Cache-Control "public, no-transform";
  }
}

Semakan Ringkas: Kandungan Statik

Pertimbangkan petikan konfigurasi Nginx berikut:

server {
  listen 80;
  server_name example.com;
  root /var/www/myproject/public;

  location / {
    index index.html;
  }

  location /assets/ {
    expires 7d;
  }
}

Jika permintaan dibuat untuk http://example.com/assets/image.png, di manakah Nginx akan mencari fail image.png?

Ulang Kaji & Langkah Seterusnya

Syabas! Anda telah mempelajari asas penyediaan kandungan statik dengan Nginx.

  • Arahan root menentukan direktori asas untuk fail Anda.
  • Blok location membantu Anda menggunakan peraturan khusus berdasarkan URL permintaan.
  • Arahan index menentukan fail lalai untuk permintaan direktori.
  • Nginx mengendalikan jenis MIME secara automatik untuk kebanyakan fail.
  • Penggunaan arahan expires meningkatkan prestasi dengan membolehkan penyimpanan cache pada pelayar.

Penyediaan kandungan statik yang cekap ialah salah satu kelebihan utama Nginx, menjadikan aplikasi web Anda lebih pantas dan lebih responsif. Dalam pelajaran seterusnya, kita akan meneroka konfigurasi Nginx yang lebih kompleks!

Percuma untuk bermula

Pelajari Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
12
Pelajaran
48

Soalan Lazim

Adakah pelajaran “Menyajikan Kandungan Statik dengan Nginx” percuma?

Ya — teks penuh “Menyajikan Kandungan Statik dengan Nginx” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway), tingkat taraf kepada CoddyKit PRO. Kursus Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyajikan Kandungan Statik dengan Nginx”?

Konfigurasikan Nginx untuk menyajikan fail dan aset statik dengan cekap, sambil mengoptimumkan prestasi aplikasi web. Anda berlatih Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Menyajikan Kandungan Statik dengan Nginx” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) ini?

Ya. Setiap pelajaran Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Pemasangan dan Persediaan Nginx
  2. Konfigurasi Asas Nginx
  3. Menyajikan Kandungan Statik dengan Nginx
  4. Blok Location Nginx & Pemadanan Permintaan
← Kembali ke Gerbang API & Proksi Songsang (Nginx + Spring Cloud Gateway)