How to Use Vultr CDN with Apache Webserver

Introduction

Apache is a web server application that enables the hosting and delivery of web applications using your domain. Direct user requests to the Apache web server increase the server load and contribute to your general web application performance. You can integrate the Apache web server with your Vultr CDN Zone URL to deliver cached assets to your site visitors.

This article explains how to use Vultr CDN Zones with the Apache web server. You will set up a new Apache virtual host configuration to forward specific request patterns to your Vultr CDN to improve the general web server performance.

Prerequisites

Before you begin:

• Create a Vultr CDN Pull Zone or a Vultr CDN Push Zone to deliver cached assets.
• Deploy a LAMP instance using the Vultr Marketplace application.
• Set up a domain A record that points to the public server IP address.
• Access the server using SSH as a non-root user with sudo privileges.

Locate the Apache Virtual Host Configuration

1. Test the active Apache configuration for errors.

   console Copy

   $ apachectl configtest
   

   Explain Code

2. Switch to the main Apache data directory.

   console Copy

   $ cd /etc/apache2/
   

   Explain Code

3. Search all files in the Apache directory using your domain name to verify the active virtual host configuration file. Replace example.com with your actual domain name.

   console Copy

   $ grep -r "example.com" /etc/apache2/
   

   Explain Code

   Output:

   /etc/apache2/sites-available/example.com.conf:  ServerName www.example.com

   The above output returns example.conf as the active virtual host configuration file associated with the example.com domain. By default, Apache uses the /etc/apache2/sites-available/000-default.conf file when no virtual host configuration is available on your server.

4. View your virtual host configuration file and verify the working DocumentRoot directory.

   console Copy

   $ cat /etc/apache2/sites-available/example.com.conf | grep DocumentRoot
   

   Explain Code

   Output:

   DocumentRoot /var/www/html

5. Switch to your document root directory.

   console Copy

   $ cd /var/www/html/
   

   Explain Code

6. Create a new images directory to test the Apache request patterns.

   console Copy

   $ sudo mkdir images
   

   Explain Code

7. Switch to the directory.

   console Copy

   $ cd images
   

   Explain Code

   Upload sample files to the directory to test your Apache request patterns.

Method 1: Set Up Response Modification

Apache response modification matches requests and modifies the original request URL with your Vultr CDN URL. The response modification process uses mod_substitute and mod_filter modules to filter and modify requests to your Vultr CDN URL. Follow the steps below to set up response modification and forward request patterns to your Vultr CDN.

1. Enable the Apache mod_substitute module.

   console Copy

   $ sudo a2enmod substitute
   

   Explain Code

   Output:

   Enabling module substitute.
   To activate the new configuration, you need to run:
    systemctl restart apache2

2. Enable the Apache mod_filter module to filter requests by MIME type.

   console Copy

   $ sudo a2enmod filter
   

   Explain Code

3. Restart Apache to activate the modules.

   console Copy

   $ sudo systemctl restart apache2
   

   Explain Code

4. Open the Apache virtual host configuration file using a text editor such as Nano.

   console Copy

   $ sudo nano /etc/apache2/sites-available/example.com.conf
   

   Explain Code

5. Add the following configurations to the file before the </VirtualHost> directive. Replace example.com and cdn-example88.vultrcdn.com with your actual values.

   apacheconf Copy

   AddOutputFilterByType SUBSTITUTE text/html
   
   Substitute s|example.com/images/|cdn-example88.vultrcdn.com/images/|i
   Substitute s|example.com/css/|cdn-example88.vultrcdn.com/css/|i
   Substitute s|example.com/js/|cdn-example88.vultrcdn.com/js/|i
   

   Explain Code

   Save and close the file.

   The above response modification configuration matches all requests with either the images, css, or js directory pattern. All files under the matching request pattern are modified to the Vultr CDN URL. For example, the requestexample.com/images/image.png is modified to cdn-example88.vultrcdn.com/images/image.png. Within the configuration:

   • AddOutputFilterByType SUBSTITUTE: Filters the request patterns by MIME type. /text/html matches HTML requests including embedded elements such as images, stylesheets, and scripts. Other MIME types include text/css,application/javascript,application/custom,image/jpg,image/png, image/webp which filter requests depending on your web application structure.
   • Substitute s|.....|...|: Converts the source s| URL to match with the destination | Vultr CDN URL. For example, Substitute s|example.com/images/|cdn-example88.vultrcdn.com/images/|i modifies the example.com/images request pattern to your Vultr CDN URL cdn-example88.vultrcdn.com/images.
     • $1: Loads the initial request type to match the correct Vultr CDN URL.
     • |i: Matches all casing formats in the request pattern. For example, both example.com/images/IMAGE.png and example.com/images/logo.png are modified to the respective Vultr CDN URL.

   To match additional request patterns in your configuration, add new Substitute directives to modify request patterns to your Vultr CDN URL. Your modified Apache virtual host configuration should look like the one below:

   apacheconf Copy

   <VirtualHost *:80>
   <Directory /var/www/html/>
   Options -Indexes
   Require all granted
   </Directory>
   
   ServerName example.com
   DocumentRoot /var/www/html
   
   DirectoryIndex index.htm index.html
   
   AddOutputFilterByType SUBSTITUTE text/html
   Substitute s|example.com/images/|cdn-example88.vultrcdn.com/images/|i
   Substitute s|example.com/css/|cdn-example88.vultrcdn.com/css/|i
   Substitute s|example.com/js/|cdn-example88.vultrcdn.com/js/|i
   
   </VirtualHost>
   

   Explain Code

6. Test the Apache configuration for errors.

   console Copy

   $ apachectl configtest
   

   Explain Code

7. Restart Apache to apply your configuration changes.

   console Copy

   $ sudo systemctl restart apache2
   

   Explain Code

Method 2: Set Up Redirects

Apache redirects specific request types by rewriting the original request URL with your Vultr CDN URL using the mod_rewite module. Each request pattern is redirected to the respective Vultr CDN URL that delivers cached data in response to the request. For example, a request to example.com/image.png redirects to the CDN URL cdn-example88.vultrcdn.com/image.png. Follow the steps below to redirect specific request patterns to your Vultr CDN URL.

1. Enable the Apache mod_rewrite module.

   console Copy

   $ sudo a2enmod rewrite
   

   Explain Code

   Output:

   Enabling module rewrite.
   To activate the new configuration, you need to run:
    systemctl restart apache2

2. Restart the Apache web server to activate the module.

   console Copy

   $ sudo systemctl restart apache2
   

   Explain Code

3. Open the Apache virtual host configuration file.

   console Copy

   $ sudo nano /etc/apache2/sites-available/example.com.conf
   

   Explain Code

4. Add the following configurations to the file before the </VirtualHost> directive. Replace example.com and cdn.example88.vultrcdn.com with your actual values.

   apacheconf Copy

   RewriteEngine On
   
   RewriteCond %{HTTP_HOST} ^example.com
   RewriteRule \.(jpg|jpeg|png|gif|webp|css|js|scss|svg|pdf|txt)$ https://cdn-example88.vultrcdn.com%{REQUEST_URI} [L,R=301]
   

   Explain Code

   Save and close the file.

   The above configuration redirects all request types that match the file types .jpeg, .jpg, .png,,.webp,.js,.css to your Vultr CDN URL. Within the configuration:

   • RewriteEngine On: Enables the Apache mod_rewrite module.
   • RewriteCond %{HTTP_HOST}: Sets the request rewriting conditions to match your host domain URL pattern.
   • RewriteRule: Defines the redirect rule to rewrite matching request patterns in a regular expression format. The value \.(jpg|jpeg|png|gif|webp|css|js|scss|svg|pdf|txt) matches all requests with the declared file types to your Vultr CDN URL. For example, the request https://example.com/image.png redirects to https://cdn-example88.vultrcdn.com/image.png
     • [R=301,L]: Permanently redirects all matching requests to your Vultr CDN URL with a 301 Moved Permanently status code. L sets the redirect condition to last without additional rewrite rules.

   Your modified Apache virtual host configuration should look like the one below:

   apacheconf Copy

   <VirtualHost *:80>
   <Directory /var/www/html/>
   Options -Indexes
   Require all granted
   </Directory>
   
   ServerName example.com
   DocumentRoot /var/www/html
   
   DirectoryIndex index.htm index.html
   
   RewriteEngine On
   
   RewriteCond %{HTTP_HOST} ^example.com
   RewriteRule \.(jpg|jpeg|png|gif|webp|css|js|scss|svg|pdf|txt)$ https://cdn-example88.vultrcdn.com%{REQUEST_URI} [L,R=301]
   
   </VirtualHost>
   

   Explain Code

5. Test the Apache configuration for errors.

   console Copy

   $ apachectl configtest
   

   Explain Code

6. Restart the Apache web server to apply the configuration changes.

   console Copy

   $ sudo systemctl restart apache2
   

   Explain Code

Conclusion

You have set up an Apache web server to forward request patterns to your Vultr CDN Zone's URL. You can either apply the request forwarding rules in your .htaccess file or the virtual host configuration file to improve your web application performance and user experience. For each configuration method, view your browser developer tools and navigate to the Network or Sources tab to verify all files delivered from your Vultr CDN Zone's URL.