There are more and more tools for making web development easier, and allowing you to build applications from within your browser. We previously covered an example of creating a basic web app using just JSFiddle, but this approach has it’s limitations, you can build the front end of an application, but how about creating the back end too? There are lots of options for doing this, but one we are going to cover today, uses Amazon Web Services (AWS) to allow you to build a development environment.
For this example we will be using a LAMP stack (Linux, Apache, MySQL and PHP) but your can create all sorts of other software stacks using the same process. We will also need an integrated development environment (IDE). Fortunately AWS provide the great Cloud9 which integrates nicely with their other offering. We will be creating an EC2 instance to host our development environment. There will be a small cost for this, although AWS do have a quite generous free tier for new users which should cover most of what you will need for the first year, and we will cover ways of keeping the cost down at the end.
Creating the Environment
If you have not already, you will want to get yourself set up with an AWS account. We will only cover the parts of AWS needed for your dev environment, because there is a lot of functionality you can get from your AWS account. Once your account is set up, from the home screen, search for Cloud9. On the screen that comes up you will see the option New AWS Cloud9 environment:
You will be asked for a name, which you can change later, for example “LAMP stack dev environment” so it’s easy for us to know what’s on the environment. The next screen gives us a lot more options. As we are creating the instance in AWS we keep the top option to create the instance.
For what we are doing, we can stay with the default instance type t2.micro. This has the added benefit that this instance is included in the free tier. The only option we will change is the Platform. By default AWS selects Amazon Linux, but we want to keep our options open about where we will be deploying this app, so lets instead select Ubuntu Linux.
You can now proceed and create the environment, it might take a while for the new server to be provisioned.
Using the LAMP Stack
Once the screen has loaded you will be taken to the Cloud9 Interface. The first thing we want to do is sort out our LAMP stack and get it configured properly. To do this we can use the terminal that can be found in the bottom of the IDE screen.
Fortunately AWS have some great guides for setting up and doing the basic configuring of the LAMP stack. If you follow the first three steps here. You should be left with a fully configured LAMP stack. The last command you run (the one called Get the URL to the index.php file within the web server root) gives you an IP Address based url you can use to view your site, this address will be your instance ip addess with /index.php after it.
So, now you can preview your site in the browser, we don’t want to run the final fourth step in the guide because that will delete the AWS security rules you have just created and stop your dev site being publicly visible. Because we want to be able to continue previewing it as we work, we will instead just add some password protection to the server.
To do this run the following command to install the apache password utils:
sudo apt-get install apache2-utils
Now, you can create the user that you will use to view the site:
sudo htpasswd -c /etc/apache2/.htpasswd demo_username
This command will create a user called demo_username and prompt us to give it a password.
Now we just need to enable password restriction on the server. Firstly we open the apache config:
sudo nano /etc/apache2/sites-enabled/000-default.conf
And add the following directive:
<Directory "/var/www/html"> AuthType Basic AuthName "Restricted Content" AuthUserFile /etc/apache2/.htpasswd Require valid-user </Directory>
just before the closing Virtualhost tag (</VirtualHost>).
You can test the change with:
And if the test passes you can restart the server with the command:
sudo service apache2 restart
Now check your test url again. It should bring up a password prompt which you must fill before you can view the page. Enter the username and password you chose, and you should now be able to view your site. Now you have a basic dev environment, you can start building your application in the default /var/www/html directory.
Of course you can now create more sites in the Environment with other locations. If you want these sites to be password protected too, don’t forget to set the same directive as above for those locations as well.
We have just taken a tiny step into all the functionality available using these tools. The AWS Cloud9 user guide is a great resource for digging deeper into this. Once you have closed your IDE tab, as long as you left the default settings enabled when you created the environment it will turn off after half an hour. This ensures you will only have to pay for the instance when you are actually using it. You can check this by searching for EC2 in the AWS dashboard and going through to the instances section, and checking that the instance is stopped (more info is available here) and of course when the instance is stopped your test url will stop working.
Another cost to bear in mind is the Elastic Block Store volume that is attached to the instance hosting your environment. Unfortunately you have to pay for this even when the instance is not running. The cost is pretty low, depending on your region it’s around $0.11 per GB per month which adds up to just over one dollar a month for the default 10GB Environment. Fortunately the free tier comes with 30GB of free storage for the first year, so enough for three of those.
One great advantage of this approach is that you dev environment is now totally separate from your own machine. You can work on it from any machine with a web browser, and share Environments with other people too.