Set up Virtual Hosts on macOS Big Sur 11 in Apache

Setting up Virtual Hosts in Apache on on macOS Big Sur is straight forward after you have your local Web Development environment up and running – get your web development up and running first including Apache, PHP and MySQL on macOS following this macOS Big Sur Apache/PHP/MySQL guide here if required.

This guide will also work in macOS Catalina, Mojave, High Sierra and Sierra.

The process of setting up Virtual Hosts is done easier in the Terminal either using nano or vi with sudo or as a root user, or you can you a GUI visual editor like BBEdit which allows access to the /private/etc directory by clicking ‘Show Everything” in the open dialog box.

Allow the vhosts configuration from the Apache configuration file httpd.conf

Open the httpd.conf

sudo nano /etc/apache2/httpd.conf

Search for ‘vhosts‘ and uncomment the include line

# Virtual hosts

Include /private/etc/apache2/extra/httpd-vhosts.conf

Edit the vhosts.conf file

Open this file to add in the virtual host.

sudo nano /etc/apache2/extra/httpd-vhosts.conf

An example domain in the file is given of the format required to add in additional domains, just follow this to create your new virtual host:

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "/usr/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "/private/var/log/apache2/dummy-host.example.com-error_log"
    CustomLog "/private/var/log/apache2/dummy-host.example.com-access_log" common
</VirtualHost>

We can take this example and extend on it, if you wanted a domain named apple.com for example, you can copy the existing text block and edit to suit:

<VirtualHost *:80>
	ServerAdmin [email protected] 
	DocumentRoot "/Users/admin/Sites/apple"
	ServerName apple.com 
	ServerAlias www.apple.com  
	ErrorLog "/private/var/log/apache2/apple.com-error_log" 
	CustomLog "/private/var/log/apache2/apple.com-access_log" common 

</VirtualHost>

So in the example above a vhost for apple.com is created and the document root is in the Sites/apple folder, in the text block above I have also added in some log files, what you need to change is the document root location username and domain name to suit your needs. Finish and save the file.

Now also you need to map the IP address to be the localhost.

Map Your IP address to localhost

sudo nano /etc/hosts

Add the Domain and ‘www‘ alias to resolve to the localhost address

127.0.0.1 apple.com www.apple.com

 

Restart Apache

sudo apachectl restart

Check out your local vhost domain in the browser

Losing Localhost

One caveat to note about virtual hosts is that once set up you lose your older document root previously at /Library/WebServer/Documents or accessed in the browser at http://localhost what happens is that you get a 403 Forbidden Error. But the ~/username document root is still compatible.

To get around this, you need to add in a vhost for localhost and declare this vhost before any of the others, in the same file:

sudo nano /etc/apache2/extra/httpd-vhosts.conf

Add in:

<VirtualHost *:80>
ServerName localhost
DocumentRoot /Library/WebServer/Documents/
</VirtualHost>

Restart Apache

sudo apachectl restart

Changing the WebServer Default User

One of the frustrations of using the Users/username/Sites folder for vhosts is the permissions issues with things like updates and authentication.

wordpress-webserver-permissions

This is because the default webserver user which runs httpd is known as _www, which will not be the user in your local account. If your machine is only in use by you and the webserver will run only under your account then you can change the user.

Find Your User and Group

In the Terminal use the id command to see your username and group

id

You will get a bunch of user groups, you need your primary user uid and group gid names

uid=502(admin) gid=20(staff)

Change this back in /etc/apache2/httpd.conf

Macos User Group Apache

Restart Apache

sudo apachectl restart

Restart Apache and now you are running httpd as your local account.

That’s it, the guide will also work on macOS Catalina, Mojave, High Sierra and Sierra.

3 Comments

  1. Andrea on June 13, 2022 at 2:10 am

    It works on my machine but for some reason I can’t access it on my phone even though they are both on the same wifi.

  2. Ken on March 30, 2022 at 5:30 pm

    You can go to any directory on the Mac with Shift-Command-G. Enter the directory in the dialog box, beginning with the root.

  3. Jim Coyle on March 26, 2022 at 11:49 pm

    Do these instructions also apply to Monterey? I’ve followed all the directions, but I still get the Personal Web Sharing” page when I call up my domain. Thanks

Leave all Comment