How to Use Vultr CDN with Apache Webserver

Updated on January 29, 2024

Introduction

Apache is a web server application that hosts and delivers web applications using your domain URL. Each request to the Apache web server increases the server load and contributes to your general web application performance. By integrating a Vultr CDN URL, the web server delivers specific requests using your CDN to speed up your web application content delivery process.

This article explains how to use Vultr CDN with the Apache web server. You will set up your Apache virtual host configuration to forward specific request patterns to your Vultr CDN URL while maintaining lighter requests on the origin server URL.

Prerequisites

Before you begin:

Locate the Apache Virtual Host Configuration

  1. Test the Apache configuration for errors.

    console
    $ apachectl configtest
    
  2. Switch to the main Apache data directory.

    console
    $ cd /etc/apache2/
    
  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
    $ grep -r "example.com" /etc/apache2/
    

    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
    $ cat /etc/apache2/sites-available/example.com.conf | grep DocumentRoot
    

    Output:

    DocumentRoot /var/www/html
  5. Switch to your document root directory.

    console
    $ cd /var/www/html/
    
  6. Create a new images directory to test the Apache request patterns.

    console
    $ sudo mkdir images
    
  7. Switch to the directory.

    console
    $ cd images
    

    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
    $ sudo a2enmod substitute
    

    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
    $ sudo a2enmod filter
    
  3. Restart Apache to activate the modules.

    console
    $ sudo systemctl restart apache2
    
  4. Open the Apache virtual host configuration file using a text editor such as Nano.

    console
    $ sudo nano /etc/apache2/sites-available/example.com.conf
    
  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
    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
    

    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 that 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
    <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>
    
  6. Test the Apache configuration for errors.

    console
    $ apachectl configtest
    
  7. Restart Apache to apply your configuration changes.

    console
    $ sudo systemctl restart apache2
    

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
    $ sudo a2enmod rewrite
    

    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
    $ sudo systemctl restart apache2
    
  3. Open the Apache virtual host configuration file.

    console
    $ sudo nano /etc/apache2/sites-available/example.com.conf
    
  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
    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]
    

    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
    <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>
    
  5. Test the Apache configuration for errors.

    console
    $ apachectl configtest
    
  6. Restart the Apache web server to apply the configuration changes.

    console
    $ sudo systemctl restart apache2
    

Conclusion

You have set up an Apache web server to forward request patterns to your Vultr CDN URL. Depending on your hosting environment, 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 by your Vultr CDN URL.