Setup a Custom Status App with Cachet in Azure Stack Hub

We needed to figure out a good way to provide our customers the status of the Azure Stack services we were supporting. There are quite a few monitoring systems such as Nagios, SCCM, BMC Truesight that might be suitable but we just wanted something sleek and simple. Enter Cachet!

Cachet is an open source status page written in PHP (Laravel) with a nice bootstrap front end. Check it out here: https://cachethq.io/ . Cachet has some really cool features such as components and component groups, maintenance schedules, incident alerts and timelines, subscription with email alerts, metric graphs, and an API for automation. Since we’re so happy with this little status system I thought I’d share with you all how I deployed and configured it.

Since I run Azure Stack, why not deploy this cloud style. The first thing to do was to deploy this into Azure web apps. Simple enough, as long as you are aware of a couple little gotchas.

Deploy an Azure Stack Web App

Open the Azure Stack Portal

• Create a new web app
• Open the app settings or your new web app.
• Set the app to use PHP 7.1 and be 32 bit.
• Set Virtual Path to site\wwwroot\public

• Install the composer extension and restart your web app

Deploy an Azure Stack MySQL Database

• From the Portal Create a new MySQL Database
• Note the Connection String Details

Install The App

• clone the project

git clone https://github.com/CachetHQ/Cachet.git

• rename the .env.example to .env
• populate the .env with relevant values (e.g. database name, password, etc..)
• create a new web.config file in the /public folder of your site with the following:

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
 <system.webServer>
<handlers>
<remove name="PHP71_via_FastCGI" />
<add name="PHP71_via_FastCGI" path="*.php" verb="GET,PUT,POST,DELETE,HEAD,OPTIONS,TRACE,PROPFIND,PROPPATCH,MKCOL,COPY,MOVE,LOCK,UNLOCK" modules="FastCgiModule" scriptProcessor="c:\Program Files (x86)\PHP\v7.1\php-cgi.exe" resourceType="Either" requireAccess="Script" />
</handlers>
 <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>
 <staticContent>
 <remove fileExtension=".svg" />
 <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
 <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
 <clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />
 </staticContent>
 <httpProtocol>
 <customHeaders>
 <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains"/>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,X-Cachet-Token" />
 <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,DELETE,PUT,PATCH" />
 </customHeaders>
 </httpProtocol>
 <rewrite>
 <rules>
 <rule name="Laravel5" stopProcessing="true">
 <match url="^" ignoreCase="false" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 </conditions>
 <action type="Rewrite" url="index.php" appendQueryString="true" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

• install the required packages via composer using the KUDU debug console

composer install --no-dev -o

• Set the application key

php artisan key:generate

*Make sure the new key is in the .env file in APP_KEY and surround with double ticks e.g. “keyvalue”

• install the application again using the KUDU debug console

php artisan cachet:install

Configure Settings

• open your web app url in a browser and go through the setup wizard
• choose cache “file” session “database” and queue “database”.

Now that you’ve got your status page deployed you can configure it using the dashboard as instructed here.

When you’re done you’ll have a sleek and simple status page for your services.