Introspecting your Code with Z-Ray for Azure

Quick experimentation, easy collaboration, automated infrastructure and scalability, together with advanced diagnostic and analytical tools  – all provide PHP developers with good reasons to develop in the cloud.

Z-Ray for Azure is one such reason.

If you’re new to Z-Ray, it’s a powerful debugging tool that gives developers deep insight into all the various PHP elements constructing a page, starting from the request level, to errors and warnings, database queries, functions, time and memory consumption and plenty more.  You can read all about Z-Ray here.

The combination of Z-Ray and the Azure cloud means PHP developers building apps on the Azure web app service get the best of both worlds – Z-Ray’s powerful introspection capabilities and Azure’s rich cloud infrastructure.

The steps outlined below show you how to create a new web app on Azure, how to then upload your code to the new web app using Azure’s Kudo interface, and then how to enable and start using Z-Ray to introspect it.

To follow these steps, all you need is a Microsoft Azure account, some working code, and 5-10 minutes of free time!

Let’s get started!

Step 1 : Creating an Azure web app

Our first step is to create a new web app on Azure. An Azure web app is basically a container that holds all the application’s code and configurations on the cloud.

After logging into the Azure portal, click the New button in the top-left corner, and select Web + Mobile, and then Web App.

In the Web App blade that slides open, we’re now going to configure the settings of our new Azure web app:

  • App Service Name = – enter the name of your application
  • Subscription – select an existing subscription
  • Resource Group – select an existing resource group or create a new one
  • App Service Plan – select an app service plan, or create a new one. A service plan is basically the container that holds your app, with settings that determine the location, costs and resources associated with it.

webapp_settings

Once you’re done configuring the web app settings, simply click Create at the bottom of the blade.

Our new web app is pinned to the Startboard, and will take a few minutes to be created.

Once created, the web app blade opens and we get a notification that our deployment succeeded!

deployment_success

To take a look at the new web app, click Browse at the top of the blade. A default HTML page welcomes us and notifies us that the web app is up and running.

launch_empty_app

Step 2 : Uploading your code

Great! We’ve got our new Azure web app purring like a kitten. Now, it’s time to add some meat and upload some code into the container.

To do this we’re going to access the web app’s Kudo. Kudo is a diagnostic console that exposes Azure’s behind-the-scenes processes and is useful for capturing a memory dump, looking at deployment logs, viewing configuration parameters and much more.

To open Kudo, add ‘scm’ to the web app’s URL as follows: http://<appname>.scm.asurewebsites.net

kudu_launchedOnce you’re in Kudo, select Debug console | CMD in the menu-bar at the top, and then browsee to site | wwwroot.

scm_webrootNext, drag and drop a .zip file containing your code onto the right side of the screen above the CMD window. Kudo will extract your code into the selected location.
In this case, I’m uploading the Zend Framework 2 skeleton application but of course you can upload any code you want.

uploadinfcodeAfter Azure finishes to upload your code, remove the existing ‘hostingstart.html’ file, and open your app in a browser. Make sure to enter the correct path to the opening app file. Example:https://danieldemo.azurewebsites.net/zf2skeleton/public/

code_uploaded2

Step 3 : Enabling Z-Ray

Cool, you’ve got your code running on Azure. Now, how do we get Z-Ray working? It’s very simple.

Open your web app blade in the portal, and click the Tools icon at the top of the blade to open the Tools menu.

In the Develop section, select Zend Z-Ray, and then Enable Z-Ray for Azure.

webapp_settings_newNext, select the pricing tier you prefer, and click Select.

pricing_tierLast but not least, review the licensing info, and click Purchase.

After a short while you’ll get a notification informing you that Z-Ray was successfully enabled.

Well done! To start working with Z-Ray, simply refresh your web app in the browser. Z-Ray is displayed at the bottom of the page with all the info you need on your app right in front of you.

z-ray-enabled2

What next?

You’ve got Z-Ray working on your web app. What now?

  • To learn how to use Z-Ray and more about its various features, take a look at the Online Help
  • One of the more exciting features about Z-Ray is the ability to extend it to show any info you want using extension API. These extensions of Z-Ray are called plugins, and they can be created using extension API. See documentation on GitHub.
  • We’d love to get your feedback! If you have any ideas for imroving Z-Ray, drop us a line at: zray-feedback@zend.com

Enjoy!