Feb 162013
 

This post explains how to set up, on a computer running a version of the Windows O.S.,  a development environment for a typical web site using Apache, PHP and MySQL. This allows the developer to safely try changes and improvements, without affecting the live site.

Introduction

While an internet site, service or online application is being developed, it is desirable to have a local development environment where new functionalities, bug fixes, performance improvements, etc. can be tested without affecting the service already in production. Once the changes have been successfully tested, they can be “launched” into production. The versions of the components used in the development system should be as close as possible to those in the production system. The most commonly used platform to provide internet services is made up of:

  • A Linux operating system (Debian, CentOS,…)
  • An Apache web server
  • A MySQL database
  • A set of scripts written in the PHP programming language (or Perl or Python)

This type of platform is commonly known as LAMP. Linux is often preferred over Windows for its stability and performance. However, quite often the systems used by the development team run a version of Windows. A WAMP (Windows+Apache+MySQL+PHP) platform can be used to set up a development environment in that case.

WampServer

Rather than manually installing each of the components, it is much easier to use one of the bundled packages available at www.wampserver.com. On that site, there are packages for 32bit and 64bit hardware, and for different versions of the components. To perform the installation, point the browser to the wampserver downloads page, and download the package that most closely matches the versions of the components in the production server. We downloaded “WAMPSERVER (64 BITS & PHP 5.4)  2.2E”, including:

  • Apache 2.2.22
  • Mysql 5.5.24
  • PHP 5.4.3
  •  XDebug  2.1.2
  •  XDC 1.5
  • PhpMyadmin 3.4.10.1
  • SQLBuddy 1.3.3
  • webGrind 1.0

When the download link is clicked, a popup window is displayed, warning that the Visual C++ 2010 runtime should also be installed: instalar-wampserver The Visual C++ runtime was already installed in our desktop, and so we proceed to perform the installation of wampserver2.2e-php5.4.3-httpd2.2.22-mysqld5.5.24-x64.exe: instalar-wampserver-2 Once installed, a new icon in the system tray allows us to control the wampserver services. Clicking on it, the control menu is displayed: wampserver-menu In that menu, select “Start All Services”  and then load “http://localhost” in the browser. If the installation was successful, the WampServer configuration page is displayed: wampserver-home

Installing the application on the development environment

To copy the application from the production server to the development environment, we must:

  • Copy the databasse
  • Copy the static content, PHP scripts and configuration files
  • Configure apache
  • Configure the DNS service, editing the “hosts” file

Each of these steps isexplained in detail below.

Copy the database

A database with the same name as the one in production must be created in the local environment. Also a database user with the same name must be created, and the required permissions must be granted to this user, to be able to access the local database exactly in the same way as the production database is accessed. If the production database can be managed with phpMyAdmin, this utility can be used to perform a “Export” of the whole database. If phpMyAdmin is not available but it is possible to establish a ssh connection to the server, a dump of the database can be generated from the command line, and then transferred to the local computer with ftp or sftp. The dump of the database can optionally be compressed to speed up the transfer.

Then, the local phpMyAdmin can be executed from the link in  “http://localhost”, and the database dump can be imported into the local database. Also from phpMyAdmin, the database user can be created, and granted the required access privileges to access the database.

wampserver-import-mysql

wampserver-importar-mysql Note: If the site uses a CMS, there is usually a configuration file where the server, database name, database user and password are configured. For instance, in a wordpress installation, the wp-config.php file includes the sentences:

In the same way, in a  Joomla installation, the configuration file includes the sentences:

Copy of the static content

An FTP client such as FileZilla, or any other available mechanism can be used to copy all the files and directories under the DocumentRoot in the production server to the local computer. The destination directory can be freely chosen (for instance,, “C:wamppublic_html”).

Configuring the Apache web server

In the WampServer installation, the main apache configuration file is located in::

Virtual Hosts can also be configured in the file:

If our production site is in the url “http://www.myserver.com”, this file should be edited to add a virtual host definition as follows:

With this configuration, requests arriving at the local apache server for pages in “www.myserver.com” will be handled according to the directives inside this virtual host. We can add there  any additional directives required by our site. For instance, it is common to add a directive to allow the usage of .htaccess files:

Configuring name resolution

But, how do we configure the computer in a way that a request made by the browser for a page in “http://www.myserver.com” is sent to the local apache server ?. To download a web page, the browser needs to convert first the server name in the requested url into an IP address. To do that, on a Windows computer, the content of the file “C:WindowsSystem32driversetchosts” is consulted first. If the name of the server is found inside this file, the associated IP address is used. Otherwise, the browser requests the translation to the DNS (Domain Name Service) server specified in its network configuration. Therefore, we can edit the  “C:WindowsSystem32driversetchosts” file in our computer, and add a line:

With this, the browser will translate www.myserver.com into the IP address 127.0.0.1 (this is the “localhost” IP address, which always refers to the computer where it is used). Note: The text editor used to edit the “hosts” file (notepad, or any other text editor available) must be run as administrator. With the editing of the “hosts” file, the configuration of the development environment in the local computer is finished. Now, when the url “http://www.myserver.com” is requested in the browser:

  • www.myserver.com is translated into 127.0.0.1, and the request is sent to the local apache server.
  • The request is processed according to the directives in the VirtualHost for “www.myserver.com”. These specify that the DocumentRoot is the directory where we have previously copied the static content and PHP scripts of our site.
  • When any of those scripts connects to the database, the connection is made to the local MySQL database instance.

Note: If we want to access the production server from the development system, we will need to edit again the “hosts” file and comment out the line added. This can be done by prefixing the line with the “#” character:

 Posted by at 11:17 am

 Leave a Reply

(required)

(required)