Nginx is a powerful, high-performance web server often used as a reverse proxy, load balancer, and HTTP cache. Its efficiency and scalability make it a popular choice for web applications. This blog will guide you through configuring Nginx to serve both static and dynamic content while enabling Gzip compression to improve performance and reduce bandwidth usage.
1. Understanding Static and Dynamic Content
Static Content: Files like HTML, CSS, JavaScript, and images that do not change unless manually updated. Examples:
An image file (logo.png)
A CSS stylesheet (style.css)
Dynamic Content: Content generated at runtime, often involving serverside languages (e.g., PHP, Python). Examples:
User dashboard in a web application
Blog posts fetched from a database
2. Why Use Nginx for Static and Dynamic Content
Nginx is optimized for high concurrency and low memory usage. Here why its effective:
Static Content: Efficiently serves static files directly from the filesystem with minimal overhead.
Dynamic Content: Acts as a reverse proxy for application servers (e.g., FastCGI, uWSGI) to handle dynamic content generation.
Gzip Compression: Reduces response size, speeding up content delivery.
3. Prerequisites for Configuring Nginx
1. Install Nginx:
bash
sudo apt update
sudo apt install nginx
2. Verify Installation:
bash
nginx v
3. Access to Static Files and Application Server: Ensure static files are stored in a known directory, and the application server (e.g., PHPFPM) is set up for dynamic content.
4. Root Privileges: Necessary to edit Nginx configuration files.
4. Serving Static Content with Nginx
Static content can be served directly from the filesystem using the location block in Nginx configuration.
Steps to Configure:
1. Locate the Configuration File:
Default path: /etc/nginx/sitesavailable/default
2. Add a location Block:
Specify the directory containing your static files:
nginx
server {
listen 80;
server_name yourdomain.com;
location / {
root /var/www/static_content;
index index.html;
}
}
3. Ensure Permissions:
Static files should be readable by Nginx:
bash
sudo chown R wwwdata:wwwdata /var/www/static_content
sudo chmod R 755 /var/www/static_content
4. Reload Nginx:
bash
sudo nginx t
sudo systemctl reload nginx
Example:
If /var/www/static_content/index.html exists, visiting http://yourdomain.com will display it.
5. Serving Dynamic Content with Nginx
Nginx doesnt directly execute serverside code; it forwards requests to an application server like PHPFPM or uWSGI.
Steps to Configure:
1. Install Application Server (PHP Example):
bash
sudo apt install phpfpm
2. Update Nginx Configuration:
Add a block for dynamic content:
nginx
server {
listen 80;
server_name yourdomain.com;
root /var/www/dynamic_content;
index index.php index.html;
location / {
try_files $uri $uri/ =404;
}
location ~ \.php$ {
include snippets/fastcgiphp.conf;
fastcgi_pass unix:/var/run/php/php7.4fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
3. Reload Nginx:
bash
sudo nginx t
sudo systemctl reload nginx
Example:
Place index.php in /var/www/dynamic_content/:
php
<?php echo “Dynamic Content Served”; ?>
Visit http://yourdomain.com to see the output.
6. Setting Up Gzip Compression in Nginx
Gzip compression reduces file size for faster transmission.
Steps to Enable Gzip:
1. Edit the Main Configuration File:
Path: /etc/nginx/nginx.conf
2. Add or Uncomment Gzip Configuration:
nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript;
gzip_min_length 1024;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_disable “msie6”;
gzip on;: Activates Gzip.
gzip_types: Specifies file types to compress.
gzip_min_length: Compresses files larger than 1 KB.
gzip_comp_level: Compression level (19, where 9 is highest but slower).
3. Test and Reload:
bash
sudo nginx t
sudo systemctl reload nginx
4. Verify Compression:
Use curl with the compressed flag:
bash
curl H “AcceptEncoding: gzip” I http://yourdomain.com
Look for ContentEncoding: gzip in the response headers.
7. Testing the Configuration
1. Check Static Content:
Access static files in a browser or via curl:
bash
curl http://yourdomain.com/style.css
2. Check Dynamic Content:
Ensure PHP scripts execute properly:
bash
curl http://yourdomain.com/index.php
3. Test Gzip Compression:
Use tools like Google PageSpeed Insights or GTmetrix to verify content compression.
8. Use Cases for Static, Dynamic, and Gzip Configurations
Static Content:
Use Case: Hosting a portfolio website or serving images and stylesheets.
Example: A photography website with heavy reliance on images.
Dynamic Content:
Use Case: Ecommerce applications requiring backend server processing.
Example: Product listings generated dynamically based on user queries.
Gzip Compression:
Use Case: Hightraffic websites with extensive text content.
Example: Blogs or news sites with significant HTML and CSS files.
9. Best Practices for Configuring Nginx
1. Organize Configuration Files:
Use sitesavailable and sitesenabled directories for modular configurations.
2. Use Caching:
Add caching headers for static files:
nginx
location /static/ {
expires 1y;
add_header CacheControl “public”;
}
3. Secure Your Server:
Disable server tokens:
nginx
server_tokens off;
Use HTTPS with an SSL certificate.
4. Monitor Performance:
Use tools like htop or Nginx Amplify to monitor server metrics.
5. Optimize Gzip Compression:
Test various compression levels to balance performance and CPU usage.
10. What did we learn so far
Configuring Nginx to serve static and dynamic content with Gzip compression is a powerful way to optimize web applications for speed and scalability. By properly setting up static file serving, dynamic content handling, and Gzip, you can reduce server load, enhance user experience, and improve performance across a variety of use cases.
Remember, the key lies in maintaining modular configurations, regularly testing, and keeping performance optimization in mind. With the steps outlined in this guide, you can ensure your Nginx server is ready to handle modern web application requirements efficiently.
Example Configuration Summary:
nginx
server {
listen 80;
server_name yourdomain.com;
root /var/www/website;
index index.html index.php;
Static Content
location /static/ {
root /var/www/static_content;
expires 1y;
add_header CacheControl “public”;
}
Dynamic Content
location ~ \.php$ {
include snippets/fastcgiphp.conf;
fastcgi_pass unix:/var/run/php/php7.4fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
Gzip Compression
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript;
gzip_min_length 1024;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_disable