Managing Multiple Websites on a Single Apache Web Server: Efficient Hosting Strategies

Overview

In today's digital landscape, efficient resource utilization is paramount for web hosting providers and businesses alike. Apache remains a popular choice for hosting multiple websites on a single server due to its flexibility, robustness, and extensive community support. This article explores best practices and implementation strategies for setting up and managing multiple websites on a single Apache web server environment.

In the previous article, we have already covered the basics of the Apache web server.If you have reviewed the previous article, you'll recall that hosting a React app on an Apache web server requires the deployment of the app's build folder. For this tutorial, I've set up an EC2 instance on AWS and uploaded two project build folders onto it. If you're unfamiliar with transferring folders between Linux machines, you can use the scp command or utilize FTP or SFTP protocols.

root@Anuj:/home/ubuntu# ls
form  portfolio        

As you can see above, I have two project build folders, one for the form and another for the portfolio, stored on my EC2 machine.

Hosting Two Websites on Apache Web Server: A Step-by-Step Guide

• Copy the Build Folders to /var/www/: Ensure the build folders of both websites are copied to the /var/www/ directory. For example, I you have two projects named form and portfolio, copy their build folders as follows:

sudo cp -r /home/ubuntu/form /var/www/form
sudo cp -r /home/ubuntu/portfolio /var/www/portfolio        

• Create Apache Configuration Files for Each Project: Navigate to the Apache sites-available directory and create separate configuration files (form.conf and portfolio.conf) for each project. Here’s how you can do it:

sudo nano /etc/apache2/sites-available/form.conf        

Add the following configuration for project1 on port 80:

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/form

<Directory /var/www/form
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>        

• Repeat the process for other project on port 3000:

sudo nano /etc/apache2/sites-available/portfolio.conf        

<VirtualHost *:3000>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/portfolio

<Directory /var/www/portfolio>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>        

Save and close the file (Ctrl + X, then Y, then Enter).

• Enable Both Sites and Disable the Default Configuration:Enable both form and portfolio configurations:

sudo a2ensite form.conf
sudo a2ensite portfolio.conf        

• Disable the default configuration if it's enabled:

sudo a2dissite 000-default.conf        

• Allow Ports in ports.conf: Ensure the ports 80 and 3000 are allowed in Apache's ports.conf file:

sudo nano /etc/apache2/ports.conf        

Listen 80
Listen 3000        

Save and close the file (Ctrl + X, then Y, then Enter).

• Restart Apache Web Server:To apply the changes, restart the Apache web server:

sudo systemctl restart apache2        

• Access Your Websites: You can now access your websites in a web browser using their respective ports: For example: `http://IP_address:80` or `http://IP_address:3000` .

This is how you can run multiple websites on your web server using different ports.

If you are following along with my article, I will provide you with a scenario: after hosting your website and running your React application in the browser, you notice that when you navigate to different routes and refresh the page, a 404 error occurs. I encourage you to investigate this issue. If you discover the solution, please comment on it. If not, you can search for the solution, attempt it, and I will provide the answer in the next article.

If you encounter any issues or have questions, please feel free to message me.