How to Install and Run WordPress on Microsoft Azure

This post is not just about installing and running WordPress on Microsoft’s cloud platform, Azure, but it is to show you the many ways you can. Each developer has their own style. Each client or customer has their own needs. If you are implementing WordPress you can choose the approach based on the needs for the project. We will look at simple one click deploys to full virtual machine environments.

Did you know there are actually six different approaches to configuring WordPress out on Azure? Web Apps, Scalable Web App, Virtual Machine, LAMP Virtual Machine, WordPress Virtual Machine, Web App + Virtual Machine!

I have a Channel 9 video or you can follow step by step below.

Web Apps

  1. Log in to the Azure Management Portal.
  2. Click New -> Web + Mobilenew-web-app
  3. Search for WordPress. Make sure you choose just WordPress. We will look at some of the others later on.wordpress-search
  4. Click Create to get to the installation and configuration of the Web App. 
  5. Enter a host name for the web app in the Web app box. This name will be the URL that you will use to access the website. {myhostname.azurewebsites.net}. Depending upon your App Service plan, you can change that hostname to a custom domain name. Also, your hostname will have to be unique. You will see a red x if it is not.
  6. Select a Resource Group or create a new one. For more information about resource groups, see Using the Azure Portal to manage your Azure resources.
  7. Select an App Service plan/Location or create a new one. For more information about App Service plans, see Azure App Service plans overview
  8. Click Database. This is the configuration for the MySQL DB. You will need to provide a Database Name, keep the Database Type as Shared, choose a Location (should be the same location as your web app) and then a Pricing Tier.
    Something to note – the MySQL DB is hosted by a company called ClearDB. They have their own plans and pricing which is different from Azure. There is a free tier, however the size of the DB is very small. Be sure you review the pricing before you continue.
    cleardb-pricing
  9. Click OK.
  10. You will need to accept the legal terms from Clear DB and then click Create.
  11. In a mater of moments your site should be created. You will get a prompt in the portal when it is complete.
  12. You can navigate to your website and finish the WordPress installation.
    wordpress-install

A few things to note with the Web App. You can utilize a free tier with Azure. If you choose the Free plan and the Free ClearDB you will pay nothing. Also, be sure you look at all of the plans. Some allow custom domains, staging slots and more!

app-service-plans

Scalable Web App

I am not going to go into too much detail with this one. This web app provides various sets of optimizations and plugins such as using Azure Storage for Media content, Jetpack etc. It was built to maximum performance of running WordPress on Azure Websites. You still need a MySQL DB hosted by ClearDB.

The steps for installing this is identical to the Web App, except you need to find Scalable WordPress when you search.

scalable-wp

Also, there is an option that is required to configure an Azure Storage Account.

  1. Click on Storage Account configuration to either link a new or existing storage account to this resource group.
    Tip – I would first create a Storage Account and then link it to this web app.

    1. Search for Storage Account
      storage-search
    2. Then follow the configuration blade by entering a name for the account, pricing, resource group and location.
      storage-config
    3. Be sure you look at the pricing and the redundancy!
      storage-price
  2. The rest is the same as the Web App.
  3. When all complete, login on WordPress Admin and go to Plugins to make sure the Azure Storage Plugin is installed.
  4. Then look at Settings and Azure to make sure the Storage Name is added as well as the access key!

Super fast to get going and now you are ready for the traffic to hit your site!

Virtual Machine

I am not going to go into detail at all with this option. Basically you stand up a Linux VM and start install everything on it. I have a blog post that walks you though the steps. At the end you are left with a LAMP VM running WordPress. In order for it to scale make sure you choose the appropriate plan and if you want a bit of redundancy make sure you create an availability set.

LAMP Virtual Machine

You might say, wait a minute, isn’t that the same as what you just said above. YES! It is. However, the one above you do all the work to get everything installed. A LAMP stack VM is done for you.

There are Projects that MS Open Tech builds, HTML5 Labs that contributes to the Edge platform and VM Depot where a community managed repository of Linux and FreeBSD virtual machine images for easy deployment to Microsoft Azure reside.

You can search for a open source product or platform and most likely there is an image that is ready to go and deploy. Let’s use LAMP as an example.

  1. Click on New > Compute
  2. Search for LAMP and you will see a listing of results.
  3. Choose the result that best fits your need. (I usually choose a Bitnami LAMP with Ubuntu)
    lamp-results
  4. Click on Create
  5. A blade will open up with all of you configuration options and configure as needed.
  6. The Azure portal will alert you when it is complete.
  7. Then you can SSH into via the dns name
  8. From there you still need to install WordPress. See my post on installing WordPress.

One thing to note, If you choose a VM with configured software you might need to read the README to find out usernames and passwords to certain products. Bitnami has a wiki that is pretty useful. They are pretty locked down with their VM’s so make sure you check that out to make sure you are able to access the resources.

WordPress Virtual Machine

You now are going to definitely say this is the same as above. Because it is. Instead of searching for LAMP you search for WordPress. You will get VM’s and containers with WordPress already installed.

wordpress-search

Same steps as above and same tips re: preinstalled software. Make sure you find all of that out before you start.

Web App + Virtual Machine

We saw how to stand up a VM. We saw how to deploy a Web App. This version does both. You have MySQL running on the VM and the Web App running on your App Service.

There are a few different approaches.

  • Create a Linux VM with MySQL running on it.
  • Create a Linux VM with MySQL and Apache for the phpMyAdmin tools
  • Create a LAMP VM that is preconfigured
  • Use a MySQL container

In each of the cases, you really want MySQL running and accessible. Some tips.

  • Make sure that port 3306 is open in the endpoint configuration within the VM in Azure.
  • Make sure the local host adddress is not bound in the my.cnf for MySQL to accept incoming requests.
  • Make sure your DB user is either from any host or the web app host

Then from the Web App install side you will do things a bit differently. Instead of using one of Azures WordPress Web App, search for Empty PHP and install that. Same steps with configuration as above.

Once running you will notice the website is blank. We will need to do the following:

  • Click on continuous deployment
    continuos-deployment
  • We then can choose how we will deploy WordPress. Local or Remote. It is up to you.
    exernal
  • I will choose External and enter in the GitHub URL for WordPress (https://github.com/WordPress/WordPress.git) and finish the install.
  • Make sure you add the Storage account and the Azure Storage plugin to take advantage of making your website scream.

View the full video on Channel 9

WordPress Your Way

 

Website Debugging with Vorlon.js

I have worked for digital agencies for most of my career. I was a developer and eventually became the Director of Technology at a few of them. I have worked with web technologies since 1996 and have gone through iterations of design and build trends. From the Adobe Flash splash-screen phase to home page takeovers. From content needing to be “above the fold” to iframes to ActiveX and more! When I was working at Byte Interactive from 2003 to 2007 we were a big .NET and Flash web agency. We did some PHP and Java but most of our clients were .NET. In the 06/07 time frame we started dabbling in the Mobile design space. It wasn’t until we were bought out by Story Worldwide in 2007 when we started to get more into the mobile space. We worked on iOS and some Android and mobile web as well. I then left Story in 2010 and became the Director of Mobile Technology at Affinion Group. This is where I started to get heavy involved with the Mobile Web. From build patterns to testing on all sorts of devices. The “band” was getting back together in late 2010 (ex Byte and ex Story) to form a new company called WELD Media. I jumped in as VP of Technology and we supported web and mobile web heavily before I joined Microsoft.

Marshall St Mayhem
Marshall St Mayhem

During all of these companies we had many types of projects. Ranging from small promotional websites to full blown eCommerce applications. We had to support IE 7 for some time as well as all of the newer mobile devices. When it came to testing we used a bunch of methods that have stood the test of time. Different browsers. Browser add-on (Firebug, YSlow, Web Developer Toolbar) we used F12 and inspect element heavily. Heck, we even set up old PC’s and Macs as a test lab. We purchased iPod Touches, iPads, Android phone and tablets. But the common denominator with all of these is you had to be near the device or using the browser to help debug. It did not matter the “tool” you used. You had to open up the website and see for yourself or try and replicate the issue. And there were issues. As a developer, you are able to keep your dev machine up to date. But not so much your clients. Especially when the IT departments lock down versions.

QA Lab - Photo Credit: Library of Congress
QA Lab – Photo Credit: Library of Congress

I remember a few of our clients were still running IE6 when IE8 and Chrome were the standard. IE6! Ugh, that was the absolute worst. Even better, they might be using the latest version of a browser but the plugins are out of date (see Flash) or not installed. There is nothing you can do when you are trying to debug that type of issue other than heading down to the clients office and see for yourself (we did this a few times).

These issues are all present today and even worse. With the explosion of connected devices accessing the web makes it even harder to debug and troubleshoot an issue. How many flavors of Android are there now? Last count – 10! Even iOS has a lot. And lets not even touch on screen resolution.

So what happens when your client calls you up after the project has launched and says “I am looking at the site on my home computer and it does not work” or “The site is not working on my mobile phone”. Aside from saying the typical developer line “it works on my phone/computer”, what do you do?

Client on phone - Photo Credit: Library of Congress
Client on phone – Photo Credit: Library of Congress

Vorlon.js

In comes Vorlon.js. The remote debug web tool. It is ideal for situations like this. A simple line of code on your website and you can inspect til your heart is content the issue on your clients device. How does this work you say? Magically! Not really. Vorlon.js is built upon some great development library standards like Node.js, Socket.IO and Express. Vorlon.js runs on it’s own server (or Node.js server) to host the dashboard and the service. The service is using Socket.IO to get a connection to the dashboard as well as the various devices that we be connecting to the site that you are debugging. The site that you are debugging contains a reference to a JavaScript file that is served by the Vorlon server which contains all of the plugins and client code to interact with the client and the dashboard.

architecture

Get Started with Vorlon.js

Lets talk about how we use it and get started.

First you need to make sure Node.js is installed. Head on over to Nodejs.org and download and install for your platform of choice.

Once installed, create a project directory somewhere on your computer and you can utilize the Node Package Manager to install Vorlon.js.

That will install Vorlon.js. The -g option with NPM installs the package globally. So you will not see the files in your project directory. You will have to navigate to the directory that global packages are installed to if you want to modify or copy the installation. On Windows you can find it at C:\Users\username\AppData\Roaming\npm\node_modules\ on a Mac /usr/local/lib/node_modules.

Once installed, you can issue the vorlon command to get the server up and running

Now you have a server running on your localhost on port 1337. To get access to the dashboard, just open your favorite browser and navigate to http://localhost:1337/dashboard/.

vorlondash

Start using Vorlon.js

In order to start debugging you will have to add a single reference to your client project.

Hacking Productivity with Microsoft Office 365

Hacking Things Done

Don’t worry, we’re not about to tell you how to code an app in under five minutes. (But if you want to try, we’d love to see it!) We do want to tell you about Hack Productivity, a new online hackathon from Microsoft with $32,500 in prizes for apps that help people make stuff happen — with ease (and panache).

Hack Productivity, launching today, gives you access to the Office 365 APIs for mail, calendar, contacts, photo/video, and files so you can create tech solutions that allow people to do everything they set out to do, and more. As an added challenge, we’re also asking you to build an entirely new Add-in (extension) for your app.

Your solution needs to help people manage their lives — but how is totally up to you. For instance, you could build an app that:

  • helps people create photo albums with images shared by their friends
  • creates a weekly schedule for everyone in the household
  • collates a daily to-do list based on incoming email
  • creates a filing system for school assignments and research work
  • designs a new collaboration system for the office
  • suggests a friend date when you haven’t seen one of your contacts in awhile
  • uses Pavlovian push notifications to defeat procrastination

There are lots of ways to sauce this enchilada, if you know what we mean. Your time-saving, achievement-producing app will be up cash prizes, plus some other shoutout-worthy swag:

  • meeting w/ a Microsoft product exec
  • one-year allowance on a premium Office 365 service
  • expenses-paid trip to a Microsoft conference
  • Surface products

We’ll be providing lots of support throughout the hackathon, including online office hours, tutorials, and tech tips. So check off the first thing on your to-do list: Register & start building your productivity hack @ msoffice365.devpost.com.
Photo Credit: Bain News Service – Library of Congress, Prints and Photographs Division, Washington, D.C. 20540 USA