HOW TO . . .

Serve Multiple Domain Names on a Single Server with Apache Virtual Hosts.


Apache is one of the most widely used web servers to serve web content across the internet. With its flexibility and power, Apache can support almost any web developer’s needs. With this power, Apache has the ability to service multiple domain names from a single server. This is accomplished with virtual hosts. Each virtual host services a specific domain, and points to a specific directory containing the web content it will deliver back to the user.

PREREQUISITES

This tutorial assumes you have followed my previous tutorial and installed Ubuntu 14.04 LTS and LAMP. If you have not done so, you may install apache individually using the following commands:
  • First update package lists using: sudo apt-get update
  • Then install apache2: sudo apt-get install apache2
Once the Apache2 install has completed, you can continue with the tutorial.

LETS BEGIN . . .

THE APACHE DIRECTORY STRUCTURE

By default Apache creates the ‘www’ directory under /var. /var/www is the top-level directory used by apache to serve web content. Within /var/www, you will create directories for each site you wish to host. For this tutorial we will use ubuntu.com and apache.com. With the commands listed below, we will create the directories for each virtual host:

  • sudo mkdir -p /var/www/ubuntu.com
  • sudo mkdir -p /var/www/apache.com

Within these directories you may create additional directories. I recommend the following directories:

  • sudo mkdir -p /var/www/ubuntu.com/site
  • sudo mkdir -p /var/www/ubuntu.com/site/css
  • sudo mkdir -p /var/www/ubuntu.com/site/js
  • sudo mkdir -p /var/www/ubuntu.com/site/images
  • sudo mkdir -p /var/www/ubuntu.com/site/cgi-bin
  • sudo mkdir -p /var/www/apache.com/site
  • sudo mkdir -p /var/www/apache.com/site/css
  • sudo mkdir -p /var/www/apache.com/site/js
  • sudo mkdir -p /var/www/apache.com/site/images
  • sudo mkdir -p /var/www/apache.com/site/cgi-bin

Without organization, web development may become overwhelming. With an organized directory structure, the developer (you) can focus on the specific areas of your sites, and quickly locate files within your sites.

Each directory is for the following:

  • site: Serves all html files and houses all subdirectories. This will be the top-level directory for the site. All html files will be placed in this directory.
  • css: Cascading style sheets (CSS) is the language, which allows you to format the look and feel of your web pages. All style sheets with a .css extension will be placed within this directory.
  • js: this directory is used to serve your java-script.
  • images: a directory used to simply serve and organize your images. You may create additional directories within the images directory to further organize your image files.
  • cgi-bin: used to serve your pearl or python cgi scripts.

Once all directories are created, you may change directory to each directory using cd, and follow with list directory contents (ls) and the –l (lowercase L) option to list all files and directories within ubuntu.com/site and the apache.com/site, including their details.

CHANGING OWNERSHIP & PERMISSIONS

After issuing ls –l, you should noticed the directories are owned by root. To ensure that you can edit files within these directories, you will want to change the ownership of each directory. To do this, we will use change ownership (chown) with the -R option to recursively pass through each directory and also change ownership of all subdirectories. Following this, we will use the $USER variable to take the value of the currently loged-on user and user group. The full command for each site should look like:

  • sudo chown -R $USER:$USER sudo mkdir -p /var/www/ubuntu.com/site
  • sudo chown -R $USER:$USER sudo mkdir -p /var/www/apache.com/site

After modifying the directory ownership, we will also want to modify the permissions of each directory, using change file mode bits (chmod). Similar to chown, chmod also has the -R option to recursively modify each directory and its subdirectories permissions. This command should look like the following:

  • sudo chmod -R 755 /var/www

* The permissions presented above are to simply allow access to web content for this tutorial. In a production environment, each file will need specific permissions to ensure the security of your site. For example, many .html files only need a permission of 644, which will only allow read permissions to site visitors.

Now that you have changed all necessary ownership and permissions, we can begin to create the virtual host files for each site.

CREATING VIRTUAL HOST

To begin we will want to use copy (cp) to copy Apaches default http virtual host file for each site. To do this please use the following commands:

  • sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/ubuntu.com.conf
  • sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/apache.com.conf

Now that we have created the virtual host configuration files for each site, we need to modify each of these. First change directory to the sites-available directory:

  • cd /etc/apache2/sites-available/

Before making any changes, you should see the following:

    <VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>>

You will want to make the following changes:

    <VirtualHost *:80>
    ServerAdmin admin@apache.com
    ServerName apache.com
    ServerAlias www.apache.com
    DocumentRoot /var/www/apache.com/site
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>>

Then for the ubuntu configuration file:

    sudo nano ubuntu.com.conf
    <VirtualHost *:80>
    ServerAdmin admin@ubuntu.com
    ServerName ubuntu.com
    ServerAlias www.ubuntu.com
    DocumentRoot /var/www/ubuntu.com/site
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    </VirtualHost>>

OPTIONAL: You may also make these changes to the 000-default.conf. If you choose to do this be sure to make a backup of the original using the copy command:

    sudo cp 000-default.conf 000-default.conf.org

You may then choose to use nano and modify the default configuration to match one of the configurations presented above. This will allow you to visit the ip of the server and see one of the two sites. Be sure to only use one of the two sites configurations in this file!

After making the changes presented above, we can now create our first web page!

CREATING YOUR WEBPAGE

Before creating the webpage we will first need to cd to /var/www/ubuntu.com/site using:

    cd /var/www/ubuntu.com/site
Here is where we will create our first webpage. Using nano we will create and index.html file:
    nano index.html
To get you started with a basic webpage please insert the following into the index.html file:
    <html>
    <head>
    <title>Welcome to Ubuntu.com</title>
    </head>
    <body>
    <h1> If you have reached this page, the Ubuntu.com virtual host is properly functioning </h1>
    </body>
    </html>
Once you’ve copied/typed all text, be sure to save the document by hitting control and the letter ‘X’ (ctl-x). Then continue to do the same for apache.com: Change directories:
    cd /var/www/apache.com/site
Create webpage:
    nano index.html
Copy text into index.html: <html> <head> <title>Welcome to Apache.com</title> </head> <body> <h1> If you have reached this page, the Apache.com virtual host is properly functioning </h1> </body> </html> Save the document ctl-x.

ACTIVATE SITES

Now that we have finished creating our sites, we can now activate them! To activate each site, we will use the apache site enabler (a2ensite):

  • sudo a2ensite ubuntu.com.conf
  • sudo a2ensite apache.com.conf

To ensure these changes take effect, you will need to restart the apache service:

    sudo service apache2 restart

TESTING YOUR SITE

If you’ve completed each step correctly, you should now have two domain names served by a single apache server. If you’ve chosen to use domain names that you own, you should now be able to access them via a web browser. Assuming, you have forwared port 80(HTTP) and 443(HTTPS) to your webservers IP address. If you’ve chosen to use the test domain names illustrated in this tutorial, please continue to read further.

If you completed the optional portion of 'Creating Virtual Host', you may open your web browser and simply type the ip address of your web server. This should take you to the site you specified in your 000-default.conf file.

If you did not complete the option portion, or simply want to access each site by their domain names, you will need to modify the host file of your system. For this tutorial, I will only show demonstrate how to do this on a Windows 7 system.

  • Search cmd in the start menu
  • Right click and hit run as administrator
    In command prompt type:
  • notepad C:\Windows\System32\drivers\etc\hosts
    At the bottom of the file add the following:
  • <your server ip> ubuntu.com
  • <your server ip> apache.com
    Example:
  • 192.168.0.4 ubuntu.com
  • 192.168.0.4 apache.com
  • Now save and then close the hosts file.
If completed correctly, you should now be able to navigate to each site and see the page you previously created. If this does not work, you may need to restart for the changes to the hosts file to take effect.