---
title: Aliran Trafik daripada Nginx ke 'Backend'
---
flowchart TD
  A(["NGINX<br>(Reverse Proxy)"])
  A --> B{"BACKEND"}
  B --> C["Apache<br>(PHP-FPM)"]
  B --> D["Flask<br>(Gunicorn)"]
  B --> E["Laravel<br>(PHP-FPM)"]

Dalam pembangunan perisian moden, kita jarang bergantung kepada satu teknologi sahaja. Saya sediakan catatan ini bagi memaparkan bagaimana Nginx boleh digunakan sebagai proksi songsang untuk menyatukan pelbagai pelayan latar; Apache, Flask (melalui Gunicorn), dan Laravel (melalui PHP-FPM), dalam satu mesin pembangunan berasaskan Arch Linux.

Sebelum melangkah lebih jauh, pastikan anda telah menyediakan konfigurasi asas seperti yang diterangkan dalam catatan saya terdahulu: Konfigurasi LEMP dalam Arch Linux.

Saya tak pastilah penyusunan konfigurasi untuk distribusi selain Arch Linux, tapi mungkin tidak jauh beza pun.

Senibina Pelayan

Berikut ialah senarai pelayan yang digunakan dalam sistem ini:

¹ Vite dijalankan di port 5173 melalui composer run dev, namun pelayar tidak berhubung dengannya secara langsung.

127.0.0.1  localhost audio.loc laravel.loc

Kenapa Gunakan Nginx sebagai Proksi Songsang?

• Prestasi tinggi: Sesuai untuk mengendalikan sambungan selari.

• Fleksibel: Boleh mengarah permintaan ke pelbagai pelayan latar (Apache, Flask, Node.js dsb).

• Kefungsian caching dan pengendalian statik secara efisien.

• Kawalan penuh: Boleh digabungkan dengan pengesahan, log, penghalaan pintar dan sekuriti.
  

Apache & PHP-FPM

Pemasangan pakej

sudo pacman -S apache php-fpm

Sunting fail utama Apache

# Tukar port kepada 8100:
Listen 8100

# Nyahkomen modul-modul yang diperlukan:
LoadModule headers_module modules/mod_headers.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so

# Sertakan fail konfigurasi tambahan:
Include conf/extra/httpd-vhosts.conf
Include conf/extra/php-fpm.conf

Konfigurasi untuk Virtual Host Apache

<VirtualHost *:8100>
ServerAdmin webmaster@localhost
DocumentRoot "/srv/http/webakaun"
ErrorLog "/var/log/httpd/webakaun-error_log"
CustomLog "/var/log/httpd/webkaun-access_log" common

  <Directory "/srv/http/webakaun">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
</VirtualHost>

Konfigurasi PHP-FPM

Tambahkan fail berikut:

touch /etc/httpd/conf/extra/php-fpm.conf

DirectoryIndex index.php index.html

<FilesMatch \.php$>
  SetHandler "proxy:unix:/run/php-fpm/php-fpm.sock|fcgi://localhost/"
</FilesMatch>

Nota: Pastikan php-fpm dikonfigurasikan untuk mendengar pada soket UNIX.

Nginx

nginx.conf

• Salin dari catatan blog lama saya, “Konfigurasi LEMP dalam Arch Linux#nginx.conf”.

• Tambah baris berikut ke dalam fail konfigurasi utama nginx pada blok http:

  /etc/nginx/nginx.conf

  http {
    ...
  
    include snippets/gzip.conf
  }

  Mengaktifkan Pemampatan Gzip
  Untuk mengoptimumkan prestasi pelayan web, Nginx boleh dikonfigurasi untuk memampatkan respons HTTP menggunakan gzip. Hal ini membantu mempercepat pemuatan halaman dan mengurangkan penggunaan jalur lebar, terutamanya untuk fail-fail seperti JavaScript, CSS, JSON, SVG dan jenis MIME lain.

Buat snippet untuk konfigurasi umum

Gzip

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_disable "msie6";

gzip_types
  application/javascript
  application/json
  application/xml
  application/rss+xml
  application/vnd.ms-fontobject
  application/x-font-ttf
  application/x-web-app-manifest+json
  application/font-woff2
  font/woff
  font/woff2
  font/opentype
  image/svg+xml
  image/x-icon
  text/css
  text/plain
  text/x-component
  text/xml
  text/javascript;

Security Headers

• Sila salin dari catatan blog lama saya, “Konfigurasi LEMP dalam Arch Linux#Security Headers”.
  

Proxy Headers

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

Contoh Konfigurasi Pelayan Nginx (tanpa SSL)

localhost.conf

Sila salin konfigurasi untuk pelayan “localhost.conf” dari catatan blog lama saya, “Konfigurasi LEMP dalam Arch Linux#localhost.conf”.

Sedikit perubahan kepada konfigurasi asal. Hanya gantikan listen 80 kepada:

  listen 80 default_server;

audio-server.conf

server {
  listen 80;
  server_name audio.loc;

  # Security Headers 
  include snippets/security-headers.conf;

  # Serve static files (CSS/JS)
  location /static/ {
    alias /home/raihan/webdev/python/audio-server/static/;
    access_log off;
    autoindex off;
    expires 30d;
    add_header Cache-Control "public";
  }

  # Media files (MP3s)
  location /media/ {
    alias /home/raihan/webdev/python/audio-server/media/;
    access_log off;
    autoindex off;
    expires 30d;
    add_header Cache-Control "public";
    add_header Accept-Ranges bytes;
  }

  # Proxy everything else to Flask app
  location / {
    proxy_pass http://127.0.0.1:5000;
    include snippets/proxy-headers.conf;
  }

  error_log /var/log/nginx/audio-server_error.log;
  access_log /var/log/nginx/audio-server_access.log;
}

laravel.conf

Nota: Laravel menggunakan index.php sebagai titik masuk. Nginx perlu menggunakan try_files untuk menyemak kewujudan fail atau folder sebelum menyerahkan ke index.php. Jika menggunakan Vite semasa pembangunan, gunakan pelayan Vite pada port 8000 untuk frontend.

server {
  listen 80;
  server_name laravel.loc;

  # Security Headers 
  include snippets/security-headers.conf;

  root /home/<user>/webdev/php_sql/Laravel/inertia/public;
  index index.php;

  # Serve static files with cache headers
  location ~* \.(?:css|js|woff2?|eot|ttf|otf|svg|jpg|jpeg|png|gif|ico|webp)$ {
    expires 30d;
    access_log off;
    add_header Cache-Control "public, immutable";
  }

  # Laravel routes
  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }
  
  # PHP handling
  location ~ \.php$ {
    include fastcgi_params;
    fastcgi_pass unix:/run/php-fpm/php-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
  }

  # Prevent access to .env and hidden files
  location ~ /\.(?!well-known).* {
    deny all;
  }

  error_log /var/log/nginx/laravel_error.log;
  access_log /var/log/nginx/laravel_access.log;
}

APP_URL=http://laravel.loc
VITE_APP_URL="${APP_URL}"

webakaun.conf

Merupakan proksi songsang ke Apache. Rujuk konfigurasi “/etc/http/conf/extra/httpd-vhosts.conf” di atas.

server {
  listen 81;
  server_name _;

  # Proxy to Apache or other backend (listening on port 8100)
  location / {
    proxy_pass http://127.0.0.1:8100;
    include snippets/proxy-headers.conf;
  }

  error_log /var/log/nginx/webakaun_error.log;
  access_log /var/log/nginx/webakaun_access.log;
}

Penggunaan Nginx sebagai proksi songsang bukan sekadar solusi pembangunan, tetapi satu pendekatan sistematik untuk mengurus pelbagai aplikasi moden dalam persekitaran yang seragam, selamat, dan produktif.

Jangan lupa untuk aktifkan konfigurasi ke /etc/nginx/sites-enabled/.

Jana Sijil HTTPS untuk Domain yang Berasaskan ’localhost'

• Sila rujuk nota sampingan, Jana Sijil HTTPS untuk Domain yang Berasaskan ’localhost’.
  

Contoh Konfigurasi Pelayan Nginx (SSL/HTTPS)

Buat snippet untuk konfigurasi umum SSL

ssl_certificate     /etc/nginx/ssl/localhost.crt;
ssl_certificate_key /etc/nginx/ssl/localhost.key; 

# SSL Hardening
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

Perubahan pada konfigurasi pelayan-pelayan sedia ada

server {
  listen 80 default_server;
  server_name localhost;

  # Redirect HTTP to HTTPS
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  http2 on;
  server_name localhost;

  # SSL 
  include snippets/ssl-common.conf;

  # < Alihkan kesemua blok bermula dari baris 
  #   berikut sehingga baris akhir ke sini >
  include snippets/headers-common.conf;

  ...

  error_log /var/log/nginx/localhost_error.log;
  access_log /var/log/nginx/localhost_access.log;
}

audio.loc

laravel.loc

Semua permintaan pelayar dihantar ke pelayan hadapan Nginx, yang kemudian memproksi permintaan tersebut ke Vite atau Gunicorn di belakang tabir. Oleh itu, log akses yang dicatat oleh Nginx (seperti “audio-server_access.log” atau “laravel_access.log”) menunjukkan keseluruhan aktiviti pelawat, manakala log aplikasi hanya memaparkan permintaan dalaman daripada 127.0.0.1.

Konfigurasi Tambahan: Hugo

Sila rujuk penerangan di hantaran berasingan, “Menghubungkan Hugo dengan Nginx dan LiveReload.”