Module 66: Web Server Configuration
Server blocks (virtual hosts)
🏠The everyday picture
One building with several shops, each with its own name board and door. The address on a letter decides which shop it goes to.
📘What it really is
- A server block (Nginx's name for a virtual host) describes one site. Nginx chooses which block handles a request by
the domain name the browser asked for (the
Hostheader):
# /etc/nginx/sites-available/crm
server {
listen 80;
server_name crm.example.in;
root /srv/crm/web/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
-
rootis the folder of files to serve;try_files ... /index.htmlsendsindex.htmlfor any address that isn't a real file, which single-page React apps need (Module 36, Lesson 1). -
Enable it:
sudo ln -s /etc/nginx/sites-available/crm /etc/nginx/sites-enabled/, then test and reload. - Several
serverblocks with differentserver_names let one server hostcrm.example.in,test.example.inand others. -
DNS (Module 6) must point each name to the server's IP address with an A record. For lab practice, add a line to your computer's
hostsfile instead. -
Useful extras:
gzip on;for compression;client_max_body_size 5m;to match your upload limit (Module 45); long cache headers for files with hashed names (Vite's build output).
🖱️Try it
Build your React frontend (npm run build) and copy dist/ to /srv/crm/web/dist in your lab. Create the server block
above (with a lab name like crm.lab), add that name to your computer's hosts file pointing at the lab's IP, and open
http://crm.lab. Reload a deep link like /enquiries/new to check try_files works.
✅Quick check
How does Nginx decide which site to serve when several share one server?
Show the answer
By the domain name in the request (the Host header), matched against each block's server_name.
Why does a React app need try_files $uri $uri/ /index.html?
Show the answer
So any app address that isn't a real file still gets index.html, letting the router handle it.
