Start and Stop Azure VMs Using Microsoft Flow

 

You have a few VMs on Azure and not ordered to be accessible at 24/7. However, you regularly forget to turn it off after use. As you know, keep the VMs running idly on Azure is wasted. So if you are looking for a tool that helps you to turn off your VM without login to the Azure portal? Then this post is for you. You might know about the Microsoft Flow application that allows automating the manual actions. So get used of the Flow, I would like to show you how to create a button on Flow to start and stop your Azure VMs.

1. Setup Automation Account and Runbook

Runbook is a helpful feature that allows automating the manual tasks in the Automation Account. So get used of this, the following steps will show you how to create and integrate the Runbooks with Flow. You shall found more information about the Runbooks here.

2. Implement Runbooks

To running a Runbook the Automation account need to be established. Here I will create a new Automation account named HbdAutoAccount.

Navigate to Runbook Gallery, look up and import  2 Runbooks Start Azure V2 VMs and Stop Azure V2 VMs with following names Start-Steven-PC and Stop-Steven-PC.

Now, I will have 2 Runbooks in the automation account as below screenshot.

3. Create Webhooks

Turn into each runbook, click Edit and Publish buttons before using it, because Azure is not allowing to run the unpublished Runbooks. If any change on the Runbook, remember to publish it again to get effective.

Next, go to the Webhooks position of Runbook and create a hook with the following information.

  • Name: Start Steven PC
  • Enabled: Yes
  • Expires: 1 year from today.
  • URL:
  • Parameters:
    • Resource Group Name: VMs, the resource group of  VM.
    • Name: Steven-PC, the VM name.

Create the same hook for Stop-Steven-PC. After 2 Webhooks had been set up, I have 2 URLs as below. These URLs will be used to create two buttons on Microsoft Flow.

  • Start Steven PC: https://s3events.azure-automation.net/webhooks?token=q5F3KX1nRol1vjgkIz61NRLj6T%2fxNCQOeC4jDunBQaA%3d
  • Stop Steven PC: https://s3events.azure-automation.net/webhooks?token=q5F3KX1nRol1vjgkIz61NRLj6T%2fxNCQOeC4jDunBQaA%3d

4. Create the start and stop buttons on Flow.

1. Create Start and Stop buttons on Microsoft Flow.

After logged into Microsoft Flow (if you don’t have Flow account just create one, it is free). Click on My Flow and Create From Blank then select Flow button for Mobile with action is HTTP:

  • Flow name: Start Steven-PC
  • Http method: POST
  • URL: the start Steven PC URL had been established previously.

Then click Create Flow button. After this step, I will have a Mobile Button on Flow to start the VM. Following the same for the stop button.

Download Microsoft Flow for iPhone, and now I can Start and Stop my VM on Azure by using my phone directly.

2. Enable the auto shutdown of Azure VM.

Moreover, the Azure VM has the other feature so-called Auto Shutdown. It will help to shut down the VM during certain time periods. In here, the shutdown time of my VM is 1:00 am. So in case I missed, It will shut down my VM at 1:00 am every day automatically.

  • With Flow button you can able to start and stop a set of VMs at the same time by adding the HTTP actions contexcturely.
  • As I have openned 2 webhooks for Flow buttons this is a Security gap so shiuld not disclose the hook URLs to anyone even your wife.
  • The expire date of the hooks should keep it as short as manageable and when it is expired, you should create a new one and update the URL back to the Flow buttons.
  • Recently, the Azure for mobile has been released that allow you to manage Azure Resources on the go. However, using that tool is required the Azure Subscription. In case you want to release the VM for someone that they don’t have subscription, Flow is still useful for you.

The Vietnamese version here.

The Mef for MVC and Azure DocumentDb Demonstration 

 

As I’d already shared the Mef libraries for WPF, WinForms and Console Application. So In this post, I would like to share one more Mef library for .Net MVC.

As you may know, The MVC is supporting Areas that allow developing a set of Views, Controllers, and Resources (Images, CSS and Javascript) inside Areas folder. However, the areas are still a part of MVC application, and the resources need to be imported into the _Layout view manually and deploy along with the application. Beside of that, if any changes in the areas may impact to the whole application and need to be tested carefully before going live.

I. HBD.Mef.Mvc Introduction

PM> Install-Package HBD.Mef.Mvc

The Definition.

  • Workspace: this is an MVC website (a Shell) considering as Module container that allows deploying and run multi modules separately.
  • Module: this is a loosely couple MVC area that is implementing independently with Workspace and able to deploy into the Workspace lately.

So, get used of Area in MVC, I would like to introduce my HBD.Mef.Mvc library, it had been implemented based on the Mef technology allows you to build and manage the MVC areas as a module not only in a separate folder but also in different projects.

Before going to details of the library implementation, I would like to discuss a few questions below.

Why do we need the Modularization application?

  1. Let’s imagine, if you have many development teams and try to make the teams are working independently and separately as much as possible. However, if three or four teams are working a the significant changes of a complex application and that application does not support modularization. So when any team needs to deploy the changed to the Stagings or Production environments, they need to inform all the other teams to ensure there is no conflict between the teams. After deployed,  the other teams need to merge the changes into their source code branches. Managing this situation is a nightmare for the project manager.
  2. The other scenario, if the application doesn’t support modularization, so any change even the small one you need to conduct the System Integration Test (SIT) and User Acceptant Test (UAT) for the whole system because of the impact and the efforts will charge back to the business. You know, The business users may surprise why the simple change is costly?
  3. Micro-Services adoption: as you know, Micro-service is new technology that structures an application as a collection of loosely coupled services, which implement business capabilities. The microservice architecture enables the continuous delivery/deployment of large, complex applications. It also enables an organization to evolve its technology stack.
Micro Service Architecture

So the advantage of the Modularization application:

  • Allow the teams are working on the modules independently, parallelly.
  • Speed up and enable continuous development, delivery process: In term of the Agile development process. Normally, the sprint time is two weeks, and the recommendation to the development team is releasing a small workable feature of the application and demo to the Business users on the Sprint demonstration meeting.
  • Help to scale down the impact of the changes and increase the scalability, flexibility, and stability of the application.
  • Developing and maintain the automation tests or UI tests for a module is much easier for the whole complex application.

What is Mvc Module?

As you know, develop a Module is not just a Views and Controllers but also the settings, configuration, resources, Business and Data logics also. On the next sections, I will show you how to build a Workspace and create a module for that Workspace separately by using HBD.Mef.Mvc.

II HBD.Mef.Mvc Features

1. Navigations

Along with a Module is a set of navigation that We need to add into the top menu of the Workspace to allow users to navigate and using your modules functions. Let’s see, if developing a module and the navigation are adding directly to the _Layout view of the Workspace, and overwriting the  _Layout file of the Workspace in every deployment. In this case, the dependence happens again if there are more than one development teams are working the same Workspace and on each team, they also maintain a different version of _Layout view on their modules.

  • INavigationService

So in this library is provided an INavigationService allows registering the navigations into the Main Menu of Workspace dynamically.

Currently, the Main menu is supported two level only. You can add a navigation link directly in the main menu, or add a menu and navigation links are children of that menu.

  • IFooterNavigationService

Similarly, the IFooterNavigationService allows registering the links into Footer portion of the Workspace dynamically.

  • Navigation and Authorization

In the MVC some controller actions are required a particular Roles for the execution. So if the current user doesn’t have the necessary Roles, she is not able to execute that actions. In this case, the Workspace will hide all the navigation related to that actions automatically. If there are no visible children of a menu, the Workspace will hide the parent menu as well. It will help to save the main menu space for the other modules.

2. Resource Bundle Handling.

Working with MVC, you will know that the framework provides a feature called Bundle to allows to import the CSS and javascript files into the views.

Similar to navigation. Including all resources into the _Layout view of the Workspace is not recommended and it may conflict with the resources of the other Areas.

To resolve this issue. I have implemented a helper class in the library allows to register the module resources into the bundles and manage to render that bundles when accessing the module viewsIt means the Workspace will present the resources of the accessing module into the _Layout page at runtime. This feature will ensure that no CSS or java scripts conflicts between the Modules.

3. Controllers scanning.

You may be aware that, if we want to export a class into Mef container, we need to mark the class with Export attribute. What happens if you forgot to mark this attribute to the controllers? No worry this case had been covered in this library. It will scan all controllers in your binaries and export into Mef container automatically.

4. Configuration management.

As you know, running a .Net website the AppSettings and ConnectionStrings will be loaded into ConfigurationManager class of System.Configuration.

Definitely, on each Module, it will have a separate set of App Settings and Connection strings. Instead of adding the configuration into Workspace config file. You can keep it in a Wed.config and place it in the top level of your Module. The library will load and merge into the ConfigurationManager automatically.

Currently. Only AppSettings and ConnectionString sections are supporting. As the configuration will merge into Workspace configuration, so I would recommend using the Module Name as the prefix of the configuration keys.

The sample code to show you how to use all features above will be provided on the Module development below.

III. Develop a new Workspace.

The idea to implement an MVC Workspace as a core foundation application, that allows to add-in the modules and services independently.

I have developed a Workspace named HBD.Mvc.Shell using HBD.Mef.Mvc and published to Github, if you want to develop a new Workspace by yourself you can reference my source code in here.

Workspace

However, I would like to highlight a few things as below.

1. Bootstrapper class in the App_Start folder.

After installed HBD.Mef.Mvc from Nuget, a new Bootstrapper class, will be added to App_Start folder automatically.

Only one thing you need to do is overwrite the RegisterMainNavigation method and add the navigation of Workspace in. Because the Menu bar, Footer bar will be rendering from INavigationService and IFooterNavigationService instead of maintaining the menus manually.

The rest of configuration, modules loading, resources management will be done automatically by Bootstrapper itself. However, all methods of Bootstrapper are in virtually so in case you want to customize the logic you can overwrite them easily.

Please note that the DisplayAt and AlignAtRight only supported int the root menu level for both The main menu and Footer navigation.

The FontAwesome and Glyphicon icons also supported on both levels of menu. If you want to display an image on the menus instead, you can replace the Glyphicon with a virtual path of the image location. When rendering the Workspace will scan the image from both Area and global Workspace folders and display the image properly.

2. Main menu and Footer partial views.

In HBD.Mvc.Shell Workspace, I had moved the main menu and footer of _Layout view to the partial views. So, in future if any changes on the menu rendering we just need to re-deploy the small part view files instead of a whole _Layout file. This will help to minimize the impact of the changes to the Workspace.

 

Navigation Partial Views

3. Navigation Authorization.

As mentioned above. The navigations are supporting the Authorization, and I would like to move to a separate section to show you how the navigation can pick up the Roles from a controller, or you can specify the Roles manually.

  • Auto Pickup the Roles from Authorize attribute.

The sample code to add a navigation for a controller action

With above code, we will add a navigation titled Import Account From File for the ImportFromFile action of ImportController and below is controller code.

The For extension method will check the Authorize attribute of ImportFromFile action to whether any Authorize with Roles had been specified and pick up the Roles for the navigation automatically. If there is no Authorize attribute had been found it will check at the Controller level for the same.

Note that this automation only happens when there is no Roles had been provided. It means if you already provided the Roles for navigation the auto role pick up won’t be executed.

  • Specify the Roles manually.

Below code is a sample for the manual Role specification:

The WithAuthorize is an extension method that allows you to determine the Roles for navigation. If calling WithAuthorize without any parameter provided, it means the navigation just require the current user is authorized.

IV. Quick start Module development.

To prove my library is working. I have implemented a simple module named Azure Notes. This module is a personal notebook and using Azure DocumentDb to store the note items.

Before starting with the Module implementation, we need to create the Azure DocumentDb first. There is two option for the developers.

1. Setup DocumentDb on Azure Portal

If you already had the Azure Subscription, you can log in to the portal and create a DocumentDb account and then create a collection with the following information.

  • Database name: AzureNotes
  • Collection Id: AzureNotes
  • Partition Key: AzureNotes
  • Storage Capacity: 10GB.
  • Throughput Capacity: 400 RU/s

If you don’t have Azure Subscription, you can install Azure DocumentDb Emulator here, and the create a similar collection as above.

2. Module Implementation

  • Create new Module

Create new Mvc Web application and install the latest version of HBD.Mef.Mvc from nuget. After installed you can delete all the redundant files and just keep the below folders and files.

  • Content folder
  • Controllers folder
  • Views folder
  • Scripts folder
  • all configuration files.

And then add a new class named <YourModuleName>AreaRegistration and then inherited from MefAreaRegistration in HBD.Mef.Mvc this class will help to register your module as an Area in the Workspace application.

Your module should look similar as below.

  • Register Module Routing

  • Register Main Menu Navigation

  • Register Footer Navigation

  • Register Module Bundles

  • Update the App Settings of Web.config file
    • Using Azure DocumentDb Emulator

    • Using Azure DocumentDb

The DocumentDB Account URL and Key can be found in the DocumentDb Account Keys

  • Controller and Views Implementation

You shall continue to implement your controllers and views logics as usually. However, remember to add the Export attribute to your Controllers.

3. Module Deployment

To deploy your module into Workspace. All the folder below need to be copied into Areas\<YourModuleName>\ folder. All binaries of your module will be copied to the bin folder of Workspace.

  • Debug Mode

Running your module on the localhost, you can use set below command line into the post-build event of your module. It helps to copy the necessary files and folders into the Workspace on every build.

  • Deploy to Production

Package your module as the structure below for the production deployment. So that, IT guys can help to copy the folder and files quickly or use the auto deployment tool to deploy the zip file into Workspace application.

  • AzureNotes.zip
    • Areas
      • AzureNote
        • Content: all CSS files of your module.
        • Scripts: all javascript files of your module.
        • Views: all *.cshtml files and folders of your modules.
        • Web.config
    • bin
      • AzureInterfaces.dll
      • AzureNote.dll
      • AzureNoteEntities.dll
      • AzureStorage.dll
      • DocumentDB.Spatial.Sql.dll
      • Microsoft.Azure.Documents.Client.dll
      • Microsoft.Azure.Documents.ServiceInterop.dll

After deployed, just recycle the application pool to re-initialize the Workspace to load new module and displayed on the screen.

4. Live Demo

I have hosted the HBD.Mvc.Shell and Azure Notes module onto my Azure, you may want to take a look at the link below. I just have 25$ on my subscription. So hopefully It is not going to down soon.

V. Source Code

  1. HBD.Mef.Mvc
  2. HBD.Mvc.Shell
  3. AzureNotes

Free SSL For Azure Website

 

In this post, I will show you how to get free SSL from Comodo for your personal Azure website.

Appsolultly, you can found so many articles about the SSL for Azure website on the internet. So In this post, I just want to show you the alternative way to get a free SSL from Comodo using window Internet Information Service (IIS). You may ask a question Why IIS and What’s related? Actually, I’m a lazy developer and prefer to use some tool instead of command line.

Before starting with SSL generation, just highlight that the custom SSL is for the custom domain only. Please check here if your Azure website doesn’t have a custom domain yet.

Note that, if you want to apply the SSL for the Production environment you should buy an SSL certificate that suits to your company. The free Certificate just for the testing purpose should be used for development environment only.

In the below steps, I will use my drunkcoding.net domain for the demonstration.

I. Generate CSR

  1. Open IIS and go to Server Certificate
  2. Click Create Certificate Request fill up your domain information in the pop-up window. By default, the cryptographic service provider will be Microsoft RSA SChannel Cryptographic Provider and Bit Length should be greater than or equals 2048.
  3. Save the CSR request into a text file.

    IIS Screenshots
  4. Go to Comodo website and paste the contain of CSR file into the first textbox and select the Microsoft IIS 7.x and later in the second one then click next.
  5. In the Domain Control Validation part 1 select HTTP CSR Hash in the Alternative Methods of Domain Control ValidationYou shall have 2 hash values names MD5 and SHA-1 at the end of this section.
  6. Create a text file with the name is MD5 value and contain is SHA-1 value and then comodoca.com in a separate line as the screenshot below.
  7. Upload the file into the wwwroot folder of your Azure website. You also can use the Kudo tool of Azure website to create a text file on the host directly.

    The SSL validation file.
  8. Click next and fill up all the require fields and finished the validation.

    The domain control had been validated.
  9. After then, you can use registered account to log in and download your the certificate. It may take 2 minutes to generate your SSL.

    SSL Certificate download.

II. Conver .crt to .pfx

After download and unzipped the certificate file you will have a folder with 4 .crt files. Now go back to the IIS and click Complete Certificate Request and provides required info into the popup window as below:

  • Filename is the location path of yourdomain.crt
  • Friendly name is your domain name
  • Certificate store is Web Hosting
Import certificate to IIS

Now, you shall have a certificate in the Server Certificate. Right-click on it and select export, specify the pfx file path and password then click ok to export the certificate back to the pfx file because Azure website only allows importing the pfx file.

III. Upload and Binding SSL to custom domain on Azure website

Open your website on the Azure portal and go to SSL Certificate setting upload your certificate and add a binding to the corresponding domain.

Binding SSL to the domain name.

Now, open your website with https and verify the Secure flag on your browser.

The free SSL certificate will valid in 3 months. So just remember to renew your certificate every 90 days.

Beside of Comodo there is the other website here also provide the free sll you may want to take a look as well. Both of them are using LetsEncrypt Certificate Authority.

If you would like to have an auto re-new SSL Sertificate function on your website then the post here will help you on that.

Apply custom domain for Azure website

 

If you are hosting a application on Azure and want to add an custom domain for your app then this post had been published for you. The custom domain feature will be supported from Basic B1 app service plan. So you have to ensure that your app service plan supports the custom domain before to buy a new domain for your app. you also can scale up your plan if current one is not supported custom domain.

App service plan

I. Domain configuration

  1. Note down your Azure website URL and IP address. The Azure site IP address and URL you found it on Custom domain setting.
  2. Login to your domain management and config your domain properties as below screenshot.
    App service plan

II. Azure Website Setting

  1. Now, go back to Custom domain setting of your Azure website, click add hostname then key in your domain name, validate and then add the hostname into your website.
  2. Congratulation, now you can access your website with the custom domain.
Custom domain setting

Iphone App and Azure Web Api

 

In this post, I would like to share with you How to develop a native cross platform mobile application that interacts with Azure Web service.

I. Requirement.

As an account manager, I would like to request a mobile application that allows connecting to Azure web service to add, update, delete and view user accounts remotely.

The user account information need be captured as below:

  • First name: the first name of user
  • Last name: the last name of user
  • Account: the account of the user that can be used to login to our systems.
  • Description

II. Build Azure service

1. Configuration Azure Web app and SQL Database.

  • First, I will create an Azure SQL Database named AzureMobileDemo with Basic pricing tier because this is just a sample database for demonstration purpose so no need a powerful one.
  • And then create new Web App + SQL named HBDMobileService in Azure with App server plan is F1 Free and lets it connect to AzureMobileDemo database that created in the previous step.

    Until now, we shall have an HBDMobileServer that connecting to AzureMobileDemo SQL database on the Azure portal. The Application Settings should be shown as below. Please ensure that the connection name is DefaultConnection if not just click on the connection string and rename it. Because we will config this name into the WebApi project later on next section.

2. Develop Web API

Below are tool and libraries I’m using for this project.

  • Tool: Visual Studio 2017
  • Framework: .NetCore 1.1
  • Libraries: EntityFrameworkCore
  • Project Type: Web API

A new Web API project named AzureMobileService had been implemented as the class diagram below.

There is a UserController had been created which exposed all needed actions:

  • Get all users in the database.
  • Get user by primary key.
  • Add new user.
  • Update the existing user.
  • Delete the existing user by primary.

This controller will user MobileDbContect to interact with Database. MobileDbContext is an instance of DbContext in EntityFrameWorkCore that’s using User as data model to transfer the information.

Please note that the name of connection string needs to be provided in the Startup class as below.

As I’m using code first in this project and wishing to execute the database migration automatically when applicate start in the Staging or Production environment. So, I updated the Startup.Configure method as below.

3. Deploy AzureMobileService to Azure.

Before deploying AzureMobileService to Azure we need config the publish profile for this project. The publish setting can be downloaded from HBDMobileService as screenshot bellow.

Right click on the AzureMobileService and click on publish, select import profile and then click create profile button to import the publish profile file. After imported, the Publish configuration should be shown as bellow.

Now, click the Publish button to deploy the web service to your Azure portal. After deployed you can use Postman to verify the Web API to ensure it’s working properly.

Take note the Site URL in the screen shot above we will need it for the iPhone application on next section.

III. Build iPhone application

As the Visual studio 2017 already interested with Xamarin and able to develop a cross-flat form application that can be run on IOS, Android and Window Phone. However, if you want to build an IOS app on Window you still need to link Visual Studio with a Mac that installed XCode and Xamarin. So for simply, I will using Visual Studio for Mac to develop it instead and below is tool and libraries were used to develop this project.

  • Tool: Visual Studio for Mac
  • Framework: .NetCore 1.1
  • Libraries: Xamarin Forms
  • Project Type: Multiplatform – Connected App (Forms)
Open visual studio and create a new solution named AzureDemo the visual studio will create 4 projects:
  • AzureDemo: this is the main project we will implement the views and the logic of the app.
  • AzureDemo.Droid: this project will port the AzureDemo to Android application.
  • AzureDemo.iOS: similar with Droid project, this project will be port the AzureDemo to an iOS application.
  • AzureDemo.Service: this project can be removed as we already develop the Azure service above. The reason I’m using Window to develop the Azure service because Visual Studio for Mac is still previewed version and it is not fully supported Azure deployment.

The implementation of AzureDemo as below:

 There are 3 Views had been implemented:
  • UsersPage: Display the list of users.
  • UserDetailPage: Display details information of Use.
  • NewUserPage: Allow to add new or Edit User information.

The screenshots on iOS

The screenshots on Android

Before running the source code you should update the AzureMobileAppUrl in App class with your Azure service url mentioned above.

IV. Source code

  • Download source code here
  • Report issue here

As you see in the current Web Api source code all APIs are opening for everyone without any restriction. This is bad idea that any application can access your production data. So the recommendation is using Filtering to secure your Web Api? I will post a separate topic to discusing How to secure the Web Api soon.

In these projects, I’m trying to keep the source code as simple as possible for those who want to start learning Azure and Mobile development can catch up easily.

Please feel free to comment your opinion or email to me via [email protected]