Configuring Web Development Environment on Windows

A guide with explanations. Originally, this is just my personal step by step configuration notes.

The Process between URL entered and Web Page Displayed

What Happens After You Hit Enter for A Given URL? The question can be answer as the following based on my own knowledge.

1) The client browser will at first send the url to the Local Domain Name Server, I assume Local Domain Name Server is represented/configured by C:\Windows\System32\drivers\etc\host file. Contents in host will determine the next destination of this URL Request. If the domain of the URL I entered in browser matches one record/line in the host file, then the Local Domain Name Server will use IP Address in the matched record/line as the Will-Requested Server IP.

Example: I entered home.local into Chrome (Web Browser) URL Field and hit enter,Chrome then send this URL to Local Domain Name Server. If there is one line 127.0.0.1 home.local in the C:\Windows\System32\drivers\etc\host file, the URL Request(I use URL Request instead of HTTP Request to make it easier to understand) will be sent to Server with ip address 127.0.0.1.

B-S Structure description when using one machine/PC for development(as both Client and Server): in the first step, my machine acts as the B of B/S Structure, i.e., the Client; in the following steps, my machine acts as the C of B/S Structure, i.e., the Server.

2) After the Server with ip address 127.0.0.1 received URL Request, the Machine Hardware Server employs Apache Software Server to serve the URL Request.

3) When Apache Server received the URL Request which contains the Requested URI and Request HOST information, Apache Server check it configuration file httpd.conf for using which file/script to serve the URL Request.

If vhost is enabled in httpd.conf file, i.e., Include conf/extra/httpd-vhosts.conf is uncommented, Apache Server would also check httpd-vhosts.conf for using which file/script to serve the URL Request.

Information in httpd.conf and httpd-vhosts.conf decide both where the Apache Server to find the Web Files and also whether Apache Server is allowed to access the Web Files to serve the URL Request. (And also need the permission from Server OS User Right Control, check other configuration/settings in this process, but that is off the topic here). The information used from the URL Request here includes the Requested URI and Request HOST which contain Domain Name, Path, GET Parameters and POST Parameters(if any).

Example: If home.local is the URL, and the following contents are in httpd-vhost.conf with Include conf/extra/httpd-vhosts.conf uncommened in httpd.conf.

NameVirtualHost *:80

<Directory "D:/Sites/home">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow, deny
    Allow from all
    Require all granted
</Directory>

<Virtualhost *:80>
    VirtualDocumentRoot "D:/Sites/home"
    ServerName home.local
    UseCanonicalName Off
</Virtualhost>

Then Apache Server will get file from D:/Sites/home to serve this request.

4) If Apache get the Web File/Script, then it employs Web File Preprocessor(If needed, such as PHP for .php file, Python for .py file and so on) to process the Web File/Script to product HTML File, and then send the HTML File to the request Client.

5) After the Client received HTML File, it use the browser to process (make more requests for .css, .js, .jpg and other files) and display it .

Apache Configuration

Based on the procedure explanation above, what we need to do are as following.

Take the web site in D:/Sites/home as an example.

1) add a new line 127.0.0.1 home.local to C:\Windows\System32\drivers\etc\host file; 2) to save or time install XAMPP web development bucket; 3) uncomment Include conf/extra/httpd-vhosts.conf in Apache configuration httpd.conf(for XAMPP, located at C:\xampp\apache\conf) file; 4) uncomment NameVirtualHost *:80 in Apache vhost configuration httpd-vhost.conf file; 5) add the following lines in to Apache vhost configuration httpd-vhost.conf(for XAMPP, located at C:\xampp\apache\conf\extra) file:

<Directory "D:/Sites/home">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow, deny
    Allow from all
    Require all granted
</Directory>

<Virtualhost *:80>
    VirtualDocumentRoot "D:/Sites/home"
    ServerName home.local
    UseCanonicalName Off
</Virtualhost>
  1. restart Apache.

And website in D:/Sites/home is then accessible with URL home.local in browsers.

localhost Problem Solving

I found that, after doing the above configuration, I cannot simply request localhost and get a working HTTP response.

To solve this, add the following code block into httpd-vhost.conf:

<Virtualhost *:80>
    VirtualDocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</Virtualhost>

What is More?

Thanks to the wildcard supporting by Apache config, we can do more.

We can easily provide Apache access permission to all folders under a certain directory in configuration file httpd-vhost.conf. Take my configuration as an example.

<Directory "D:/Sites/*">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow, deny
    Allow from all
    Require all granted
</Directory>

This code block will enable Apache to get files from all folders under D:/Sites.

Now, Apache is able to get files from all folders under D:/Sites, the next question is to tell Apache when to get files from a certain subdirectory of D:/Sites. And we need to make the following configuration.

<Virtualhost *:80>
    VirtualDocumentRoot "D:/Sites/%1"
    ServerName sites.local
    ServerAlias *.local
    UseCanonicalName Off
</Virtualhost>

Notice there is a wildcard in line ServerAlias *.local. To make "Alias" working, the following line need to be uncommented in httpd.conf.

LoadModule vhost_alias_module modules/mod_vhost_alias.so

What is Even More?

You may notice that, for each website in the D:/Site, I need to add one line like 127.0.0.1 home.local into host file. That's not pleasant.

Bad news is Windows host file does not support wildcard. Good news is Acrylic DNS Proxy can help to solve this problem. For how to use it, google it.

By the way, to check whether the Local Domain Name Server is functioning well, for Windows user, the CMD ping command is of help. Try ping localhost, ping home.local and so on by your self! Or tracert is also a good alternative to this!


* cached version, generated at 2019-06-22 17:37:52 UTC.

Subscribe by RSS