This post elaborates on a specific learning from our work Athena Intelligence.
One great feature of Azure Web Apps is deployment slots. I recently had an excellent use case for them as a small startup I’m working with is trying out ASP.NET MVC. In the process, we learned how effectively deployment slots allowed their team to work on the project commit code, test it against a test DB as if in production, then quickly swap when ready to the new site and the production database.
Here’s a quick sketch to highlight what I’ll be demoing today:
This tutorial provides a specific workflow for deploying and testing code using Visual Studio 2015, Azure SQL Server, and Web Apps for Azure. It is designed to help you quickly get resources into the clowd, supporting users, testing deployments, working with a small devops cycle and learn by doing.
There are 10 parts to this tutorial:
Creating a Azure SQL Server Instance in a Resource Group
Creating a Web App in Visual Studio
Push Your Project to GitHub and add Version Control
Create a Web App in Azure
Create a deployment slot
Connect the Staging Slot to your GitHub Repository
Update the Application Settings to connect to your Test Database
Check Data is Entering the Database
Move onto production setup
Make the swap
1. Creating a Azure SQL Server Instance in a Resource Group
Go to https://portal.azure.com
Select new > SQL Database
Database name: TestDatabaseJanuary
Create new or use existing Resource group (creating a new one makes it easier to tear down when done)
Server: Create a new server – name = januarysqlserver, admin login = conductor, password = d0nt4get! location = same as everything else in Resource group
Select a price and select create.
Here’s what it looked like for me:
After the SQL DB instance is spun up and the database is provisioned, go to the overview page.
In the top right corner you can see the name of the server hosting this DB, and a show connection strings link:
After selecting that link, you’ll see a number of different connection strings. In this case, we’ll be using ADO.NET to connect to it from an ASP.NET web application.
Keep track of that string. You’ll also notice that the ‘username’ and ‘password’ are left empty. That’s the username and password you set when you created the SQL server instance.
Now that we have a Database ready to go, let’s get a web app connected to it.
2. Creating a Web App in Visual Studio
Open up any Edition of Visual Studio 2015 and select File > New Project.
Then select Templates > Visual C# > Web.
You’ll see ASP.NET as an option.
Give it a name e.g. MyDemoApp
Then Press okay.
You’ll then be met with an MVC Scaffolding page:
Select MVC and make sure the authentication is “Individual User Accounts”
For now I’ve unselected "Host in the Cloud" we’ll take care of this later.
Press Okay again and you’ll soon have a basic web application using ASP.NET MVC with User Authentication Cooked In.
Press F5 or select the green arrow on the toolbar of Visual Studio to see you application:
Right now when you register an account you’re updating a localdb called MSSQLLocalDB
BONUS: You can test your database from your local machine by editing your Web.Config Connection strings.
Change the “DefaultConnection” from local to the string connection string provided by the Azure SQL Server Instance:
This isn’t required for this tutorial but good to know if you want to see if its working meow.
3. Push Your Project to GitHub and add Version Control
In this case we’re going to use Git via the command prompt. Open up a command prompt to you DemoApplication Directory:
And enter the command C:\echo > .gitignore
This will create a .gitignore file. We want this file next too your .sln file.
Should look like this, make sure *.mdf and *.ldf are in your .gitignore:
Save the file and close the text editor.
Now go to GitHub.com and create a new repository:
Next, Initiate the repository, add your files, and commit your code.
These instructions on the github page are accurate:
And here they are again:
C:\ echo # MyDemoApp >> README.md
C:\ git init
C:\ git add .
C:\ git remote add origin http://yourrespoastaoisdgaosuhd.git
C:\ git push -u origin master
And what it looked like on my machine:
Great!
You now have code in a GitHub repository that you can share with lots of different developers.
As they push changes we want to see how they look and if they break the application, so let’s go create a web app.
4. Create a Web App in Azure
Go to the Azure Portal and the resource group that has the SQL Database we created earlier
Select add in the top left corner > Then Search Web App:
Here you can see I’ve configured the name and placed it in the same resource group.
After that’s provisioned we can can make our first deployment slot!
5. Create a deployment slot
Go to the overview blade of your Web App and select “Deployment Slots”
Then Add Slot in the top left corner.
Now create a slot called “staging”
You can create as many slots as you want. They are essentially other Web Apps that are related to each other.
It will take a second to spin up, but once ready you can treat it like its own web app.
6. Connect the Staging Slot to your GitHub Repository
Select the staging slot and select “Deployment Options”:
You now get to pick a deployment source. In this case, we’re going to use GitHub. You’ll authorize Azure to pull your repositories and choose the ASP.NET Project you created a repository for in step 3:
7. Update the Application Settings to connect to your Test Database
Now that the project is deploying from the GitHub we need to connect it to a database to support the user login functions.
We have the code, now we need the data.
Go to the Application Settings and scroll down to connection strings.
Set the name to: DefaultConnection
And the Value to something like this: Server=tcp:januarysqlserver.database.windows.net,1433;Initial Catalog=TestDatabaseJanuary;Persist Security Info=False;User ID={your_username};Password={your_password};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;
This is the connection string we took down in step 1.
Note: the {your_username} and {your_password} needs to be substituted with the SQL Server settings you set during step 1. It can be helpful to make the changes in a text editor before copying into that small textbox.
Also make sure you mark this as a slot setting. This tags this setting to only be used in this slot and is really the meat of this whole operation.
Here’s what that looked like for me:
Go back to the overview for the staging slot and select the url to visit your new site. Try registering some accounts and making sure everything works properly. If you get errors during registration that might be because the string was copied improperly or you used the wrong username and password. Try again, that’s what the cloud is for!
Here’s my site url and me registering an account:
Nice!
8. Check Data is Entering the Database
Visual Studio 2015 has a SQL Object Explorer cooked in! It makes it super easy to check the state of your database and make sure you’re getting data.
Go to Visual Studio select View -> Server Explorer from the toolbar.
Now select connect to Azure Subscription if there isn’t one there already.
Login with the same credentials you do when you go to the portal in the browser.
Once connected drop down into SQL Databases and right click on the “TestDatabase” and select “Open in SQL Server Object Explorer”
Now open YouDatabaseName > Tables > Right Click AspNetUsers > Select “View Data”
Here’s a couple results from my data:
Isn’t that sweet!?
9. Move onto production setup
Now we have a working web app talking to a test database. Let’s create a production Database just like we did in step one and connect our web app to that.
I followed the same steps as Step 1, but now named the Database JanuaryDemoProductionDB:
And grabbed the connection string:
Eg: Server=tcp:januarysqlserver.database.windows.net,1433;Initial Catalog=JanuaryDemoProductionDB;Persist Security Info=False;User ID={your_username};Password={your_password};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;
Now let’s go place this in our original Web App Connection string.
Don’t forget to mark it as a slot setting.
Okay, time for the big finale. This represents the future of our development workflow.
Let’s go make a small change in our local copy of the web app.
Here you can see I changed the text on the home page:
Now we commit the change and push to github:
The Staging slot picks up on this change and deploys the changes to our staging slot:
We check the staging slot site to make sure everything is still working
Looks good! And we can still login with our test accounts.
10. Make the Swap!
Now let’s put it into production!
Select Swap from the Overview Blade of our Main Web App (not staging):
Select the source and destination of the swap:
And wait a minute:
Now go visit your production site!
http://test-january-webapp.azurewebsites.net/
And try to login with one of your test accounts.
No Luck!
This slot is now on its own db.
Not very often you get to be excited about invalid login attempts!
10b. Finally
Now you can keep pushing changes to GitHub without worrying about messing up your production environment. After everything checks out, you can push it over to production and your customers.
Thank you deployment slots!
Let me know if you have any questions in the comments below or say hi on Twitter: @timmyreilly
Really looking forward to the next generation of Surface.
There are three parts to this tutorial:
A. Generate an SSH Key
B. Create a VM in Azure that uses the public key
C. Connect to VM using SSH keys
Prerequisites:
Bash
ssh-keygen ($ info ssh-keygen to learn more)
An Azure Subscription
A. Generate an SSH Key
Open bash and enter: $ ssh-keygen -t rsa -b 2048 -C "Ubuntu@azure-server"
Keyname: server-key
Passphrase: somethingMemorable
Copy the contents of server-key.pub $ cat server-key.pub
Should look like this: ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDMlUr7PCEdBmCVZHG5RqI8i7GgYAzd2G/FZ987XXa63vnqxZmZogVmmXrTnBHeM6oDv7v7g495CiiiINhJbGR4o7t4agiHOM43egDv7BbiViTlfVr3y5AxLUvRwHnC3egl8ABVX1anfXXR73x7IS3YRNWkh6gXtlhImw8UKG04UoZEmWB9BLt53lk/9c3Hxz22YZarzImrpQYy1XEUZ096B9mK/Fe+/McH78ZHUpXEgOZBIDP5KdqPk5XKznpwUDJ4/SPXPEWWCCjQ8gOoTFcFMaiMnXp5o5Udsi/DFO1TS/t8BeCRymkr5tdPvzexjkjkjkjkjkjkjkjkjkjkjkjt Ubuntu@azure-server
Here’s what it looks like for me:
Cool and you’ll also notice that there’s another file in that same directory – server-key $ ls | grep server
Here’s what that looks like for me:
Now that we have our public and private keys let’s get our VM setup.
B. Create a VM in Azure that uses the public key
1. Go to the Azure Portal
2. Select New -> Search: Ubuntu Server
(I’m using 14.04 this time)
3. Make sure you’ve selected Resource Manger and click Create:
4. Now configure the basics per our ssh-keygen parameters
Name: azure-server
VM Disk Type: Up To You
User name: Ubuntu
Authentication type: SSH public key
SSH public key: Paste the results of $ cat server-key.pub
Subscription: Depends how you want to pay for the server
Resource Group: Up to you – I’m going to create a new one so I can quickly delete it.
Location: Up to you
Should look like this:
Then select OK to go to the next section.
5. Choose Virtual Machine Size
I’m going with the smallest VM for testing.
You can also view all different VM sizes to find the right one for your use case.
6. Configure optional Features
Setting the Storage account name to something you’ll remember easily is good.
And if you want to configure ports now you can select Network Security group to allow ports specific traffic.
Here’s what that looks like:
Click okay to continue to the Summary of your VM.
Here’s our summary:
Select okay to start your VM.
7. Wait for it to be ready.
Dashboard will have an icon and you’ll get a notification when its ready:
8. Once ready select on it to see the overview and the IP address.
Should look like this:
Great! We have a VM and its IP address. Lets use our Private SSH key to connect.
C. Connect to VM using SSH Keys
1. Open bash to file location you created the keys in.
Make sure they’re there: $ ls | grep server
2. Enter this command to use SSH to connect: $ ssh -i server-key Ubuntu@52.183.31.11 -v
or more generally $ ssh -i keyname username@ip.address -v
Make sure you’re using server-key and not server-key.pub
Tip: -v is the verbose option. Not necessary, but it helps to see if the key is being accepted
3. Great, now accept the certificate, and enter your memeroablePassphrase
Whole thing should look like this:
You just built an application that connects with a Database on your local machine, but now you want to share it with the world. But you don’t want to share everything about your application with the world.
Azure web apps supports a number of different web platforms, but to effectively build while maintaining code on GitHub we need to keep configuration details of our app private including the connection string for our database.
In this case we’re going to be using a Node JS application connected to a Mongo Database hosted on a Virtual Machine.
Before we get started…
Do you have a MongoDB up and running?
Nope. – Read this post!
Yep! – Great keep going!
For reference, I’m starting with a chat application originally written by fellow evangelist Rami Sayar for an excellent Node Course he taught recently.
Prereqs:
Git
Azure Subscription
Connection string for a DB in Mongo – mine looks like this:
mongodb://40.83.182.555:27017/test
The Steps:
1. Clone or fork the repository
2. Create an App Service
3. Connect App Service to Repository
4. Add app settings in Azure Portal
5. Try it out!
1. Clone or fork the repository
The project I’m using for this demonstration is found here: Github
Now clone the project to your local machine, or fork it in GitHub.
Take a quick look at these files:
– package.json : checkout out the dependencies of the project, notice how we’re using the official mongodb driver
– mongoClientTest.js and dbTest.js : provide other examples/test files to run, just substitute your ip address of where mongo is being hosted to make sure you’re able to connect.
– app.js : this is the main file that will be run by Azure Web Apps (app.js or server.js will automatically be started by the cloud when deployed). Also, in app.js you’ll see we set ‘db’ using process.env app.set('db', process.env.DB ); – we’ll be using that in step 4.
Once comfortable with the files locally or in GitHub we’re ready to spin up our App Service in Azure.
2. Create an App Service
App Service is a PaaS service offered by Azure to make deployment of website/web services simple and easy to maintain, develop against, and scale.
To begin select the ‘Plus’ button in the upper left corner and select web+mobile, then select Web App:
Now configure your web app:
You may have to create a app service plan and resource group if you haven’t created one yet, for more info on this portion of the architecture click here and here
You’ll see this icon on your dashboard while the resource is spinning up:
Once running the portal should automatically take you to that resource, if not you’ll see it on your dashboard:
Here’s the overview pane and the items we’ll be using in the rest of this tutorial highlighted:
3. Connect App Service to Repository
Now that we have an app service, let’s connect it to our repository.
There are a number of options for deployment.
In this case we’re going to deploy from GitHub, but we could have also used a local repository by adding Azure as a remote repo.
Azure will detect changes made to the repository on GitHub and redeploy the project. This makes deployments during hackathons super easy.
Select Deployment options from the overview pane -> Choose Source -> GitHub:
Note: You can also select Local Git Repository if you’ve liked to keep your code off of GitHub and add Azure as a remote repository git add remote azure "http://git.asdfgafdgasdfgasdf" – will be displayed in overview portal once initialized.
You’ll then be asked to login to GitHub so it can access the list of your repos.
Select your forked repo or the cloned repo you’ve committed to GitHub:
Once selected you’ll see a notification in the top right corner with a loading bar for the deployment:
Once that’s finished, you have code ready to roll in the cloud.
Azure has automatically installed the packages listed in your package.json and found the file named server.js to deploy. Next let’s configure it to talk to Mongo!
4. Add App Settings in Azure Portal
Now we have a project connected and deployed on Azure, but it won’t store the data anywhere, because a connection string hasn’t been included in the environment variables (aka application settings).
To add our monogodb to the project we just need to include the variable name and the connection string.
In our project, as noted before, we set db using process.env.DB
Select application settings and scroll down to until you see app settings then enter into the two empty fields “DB” and the connection string mentioned earlier: mongodb://40.83.182.555:27017/test
Like this:
Then hit save!
Go back to your website and try entering some chatter!
Try it out!
If you visited the page it should look something like this:
In the middle of the above screen shot you can see a terminal with a connection to the VM and same data in the MongoDB.
If you’re running into issues try connecting using dbTest.js or mongoClientTest.js after you add the specific IP for your VM hosting mongo.
Hope this made it super simple to connect your application to a database using Azure Web Apps.
Please let me know if you run into any issues in the comments below.
There are four steps:
1. Open the appropriate port on Azure
2. Install Mongo
3. Configure Mongo to connect to all external IPs
4. Connect your application
1. Open the appropriate port on Azure
Go to your virtual machine’s landing page and select the resource group in the top left corner:
Resource groups are the way Azure breaks down how our VM interacts with the internet, other VMs, storage, and public/private networks.
To open the port we need to change our Network Security Group, which is represented by the shield and underlined in the screenshot above.
Then, once you’ve selected the Network Security Group, select Settings -> Inbound Security rules
This will allow us to open up our VM to the Public Internet via a port that we’ll connect our client side application to.
You’ll notice that SSH is already included, that’s what we’re using in our terminal. You may also have other ports opened if you’ve followed some of my other posts.
We’re going to create a new Inbound Security Rule called MongoPort where we’ll set the Destination port range to 27017 (the default port for MongoDB)
You can see the configuration pane in the screenshot above identified as item 3.
Once you hit ‘Okay’ or ‘Save’ the port will be opened in a couple seconds.
You should see a notification in the top right corner once completed. Now the port is available to the open internet, but Mongo isn’t installed or configured to be listening at that port. So let’s get to it.
2. Install Mongo
Installing Mongo on Ubuntu is easy and well documented by the MongoDB group. Just enter a few commands and you’ll be up and running in no time.
Make sure you’re following along with the directions for your specific instance of Ubuntu.
To check your version of Ubuntu enter: $ lsb_release -a
Once you’ve followed the directions provided by Mongo, here are some other helpful commands to make sure everything is configured properly.
See a log of what MongoDB is doing: $ cat /var/log/mongodb/mongod.log
See all the processes running on your machine: $ ps -aux
See all the processes with mongo in the listing: $ ps -aux | grep mongo
See the status of the ports: $ netstat -ntlp
Here’s what the bottom of my log file looks like as well as a double checking of the current status of Mongo and what port its running on.
Before we access this DB from our application we need to change one setting so Mongo accepts connections from different IP addresses besides the local IP address.
3. Configure Mongo to connect to all external IPs
Before we go on, I need to make it clear that this is not a best practice, and no user data should be stored on a VM with an open port like this. But for development and practice purposes we’re going to make it easy to connect.
If you’re going to go into production, please refer to MongoDBs security checklist HERE.
Okay, having said that.
Open up the mongod.conf file using nano:
$ sudo nano /etc/mongod.conf
And uncomment the binding IP by adding an octothorpe at the beginning of the line like so:
Save and close the file. ( Ctrl+X -> y -> enter )
Alright, now MongoDB should be ready to be connected to!
4. Try it out and Connect your application
Open the Mongo Command line by typing mongo in your ssh terminal.
And show your DBs and collections show dbs show collections
The connection string for the VM is the IP address and the DB you’d like to write too. To connect to the test database on the is vm the connecion string to use looks something like this:
mongodb://40.83.182.555:27017/test
In the next blog I’ll show you how to connect your Azure Web App to Mongo on this VM!
Before we start make sure you can ssh into your machine and run
$sudo apt-get update
It’s a four step process:
1. Open the appropriate port on Azure
2. Install pip, virtualenv, virtualenvwrapper, and flask
3. Write our code and run it
4. Keep it running with Gunicorn
1. Open the appropriate ports on Azure
Go to you virtual machines landing:
Then select the resource group in the top left corner:
Resource groups are the way Azure breaks down how our VM interacts with the internet, other vms, storage, and public/private networks.
Top open the port we need to change our network security group, which is represented by the shield. (Underlined in the screenshot above)
Then select settings -> Inbound Security Rules:
This will allos us to open up our VM to the public internet so we can visit what’s presented at the port like a regular website.
You should see SSH already included, that’s the port we’re using in our ssh client/terminal.
We’re now going to add two new Inbound Security Rules one called FlaskPort where we’ll set the destination port range to 5000 and use for debugging. The second will be called FlaskProduction that we’ll use to deploy our complete app.
Here’s the configuration panel for FlaskPort:
Press okay to accept the settings.
And the other panel for FlaskProduction:
Again press okay to accept the settings.
Notice how the ‘Source Port Range’ is ‘*’ that just means that we’ll accept connections from the port of any machine. This tripped me up the first time.
In a couple seconds the port will be open we’ll be ready to visit it, but nothing will be there because we haven’t create an application server.
To do that we’ll install the basics.
2. Install pip, virtualenv, virtualenvwrapper, and flask
To use Python effectively we utilize virtual environments to help keep our various python project and required libraries in order.
If you get lost in these steps or want more context Gerhard Burger provides the same setup on a very helpful post on askubuntu.
First we install pip: $ sudo apt-get install python-pip
Second we install virtualenv and virtualenvwrapper
Now for our photo we’re going to download an image into our static file using curl.
$ cd static
$ curl 'http://timmyreilly.azurewebsites.net/wp-content/uploads/2015/12/Snapchat-1802119159214415224.jpg' -o 'photo.jpg'
Cool! We have an app!
To run it simply enter: $ python app.py
Visit from a browser!
Type in the IP address of your virtualmachine with a colon at the end followed by the port.
Mine looks like:
http://138.91.154.193:5000/
And this is what I see!
Neato! But when we close the terminal we lose the application… Hmmmm let’s fix that!
If you’d like to learn more about this Open Source HTTP Server Software checkout their website.
Second, we start nginx. $ sudo /etc/init.d/nginx start
And begin configuration for our project
We’re naming our nginx configuration the same as the parent directly of our app.py file in this test case.
Here are the commands:
$ sudo rm /etc/nginx/sites-enabled/default
$ sudo touch /etc/nginx/sites-available/Photo-App
$ sudo ln -s /etc/nginx/sites-available/Photo-App /etc/nginx/sites-enabled/Photo-App
Now we add the config settings for our app.
$ sudo nano /etc/nginx/sites-enabled/Photo-App
Here’s the raw text:
server {
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /static {
alias /Photo-App/static/;
}
}
Then restart the server.
$ sudo /etc/init.d/nginx restart
And navigate to your Python PhotoApp project, and start it using Gunicorn: $sudo gunicorn app:app -b 0.0.0.0:8000 --reload
You’re using gunicorn to start app hosted at 0.0.0.0:8000 with the reload tag configured.
The reload will look for changes in your code and reload the server everytime you change any server side stuff. It won’t auto-reload for HTML changes, but will reload them once you make a change to the python code.
Now try navigating to: http://138.91.154.193:8000/ or whatever your IP address is.
You can now close you’re ssh terminal and it will continue to run.
To stop it we have to kill the actual thread it’s running on. $ pkill gunicorn
Like I said at the beginning of this step this was adapted from the realpython.org and they have some awesome next steps available for git deployment + automating the whole process.
The Basic Steps to using node on an Azure VM:
1. Open the Port
2. Install Git and Install Updates
3. Install Node and NVM
4. Code and Install Express
5. Run it and check it out!
6. Use forever to keep it alive
1. Open the Port
We’re not talking battleships or submarines we’re talking Infrastructure as a Service.
Visit the landing page for your Ubuntu Virtual Machine:
And select the resource group in the top left corner:
Resource groups are the way we break down how our VM interacts with the internet, other vms, storage, and public/private networks.
To open the port we need to change our network security group which is represented by the shield. (Underlined in the above screenshot)
Then we’ll select settings -> Inbound security rules
This will allow us to open up our VM to the Public Internet so we can visit it like any other website.
Under ‘Inbound security rules’ SSH is already included:
We’re going to add a new Inbound security rule named ExpressServerPort where we’ll set the Destination port range to 3000 which we’ll see later when starting our server. Here’s the configuration pane for our ExpressServerPort:
2. Install Git and Check Updates
Git is fun!
SSH into our Virtual Machine like we did in the VM intro then enter: $ sudo apt-get install git
Yay! We have Git
Let’s run our update command just to double check we’re up to date:
NVM is a version manager for Node you can install using curl:
Enter this command to install it: $curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash
Then source your profile to add it to your commands: $ source ~/.profile
Then check out the version to make sure it installed: $ nvm --version
It should look like this:
NVM is installed!
Let’s install a version of Node! $ nvm install 5.0
With node comes ‘npm’ which allows us to install a whole bunch of node awesomeness. One of the more popular packages is express a minimalist web framework, we’ll install this to start coding away.
First let’s create our a directory, cd into it and initialize our app using nom.
$ mkdir myapp
$ cd myapp
$ npm init
After entering npm init we’ll be walked through a configuration step for our app. The only one that matters for now is (index.js) which will be the entry point for our app everything else can be the default for now.
If you were actually going to submit/share this code you’d want to accurately fill out this info.
After the initialization step we’ll add express and list it as a dependency: $ npm install express --save
Here’s what those steps look like:
Weeee now have express and an app ready for your code!
Lets open nano and put the helloworld sample into index.js
$ sudo nano index.js
Now lets run our app! $ node index.js
Now that its running lets visit it by entering the IP address and port number into our browser.
In my case the URL is: http://13.88.180.170:3000/
When I search:
Node JS Server Azure, Ubuntu, JavaScript, Mongo, Postgres, Flask, VM
I turn up with all sorts of unhelpful results.
So I dedicated a couple days to creating a couple guides for common Cloud Stacks on Azure VMs to make it as simple as possible to start deploying your code to the cloud.
This is the introduction and at the bottom of this blog post you’ll see other workflows fill in.
So, Here’s a guide to deploying an Ubuntu VM on Azure:
1. Gather Materials
2. Create VM
3. Check VM using SSH
There are lots of configurable deployments available if you feel like exploring.
Then select Create, but make sure the deployment model is Resource Manager as its more future ready then the classic model:
We’ll then get to the basic configuration tab, fill out the info and pick a User name and Password that you’ll remember because you’ll need it later!
If you’re not familiar with Resource Groups check out THIS ARTICLE
I’ve named my resource group: ResourceGroupOne
Hit Okay to go to the next configuration pane
Select the Size of your VM. To see all the options select ‘View All’
We’re going to go with the cheapest option A1 Standard:
Hit Okay to take us to our final configuration Pane, “Settings”.
There are a number of different settings presented here.
First up is Storage:
This will configure what we want to name the storage account for our vm. I’ve changed mine to ‘resourcegrouponestorage’, but I could have selected any of my previous storage account in the same region, in this case westus.
Second is Network:
We can configure a Virtual Network to allow our virtual machines to connect to other resource on our network by default. We can also change this later. So in this case I’m creating the default virtual network.
Again, I could have selected a previously created Virtual Network Called ‘Databases’ which is in the same region.
Third is Extensions:
We won’t add any extensions
Fourth is Monitoring:
Which we’ll disable for simplicity sake, but is a very powerful tool one you start needing to make scaling decisions.
Fifth and finally is Availability:
We won’t use an availability set, until we need to scale out our app.
Here’s what the lower portion of our settings pane looks like:
And we’ll select OK to finish with our settings. This will take us to the summary page so we can do a one more check on our machine, don’t get to anxious about making mistakes because we can always tear this one down and spin up another if we messed something up!
Hit Okay one last time!
You’ll then be taken to your dashboard where you’ll see a nice loading tile:
It’ll take ~5 minutes to spin up and then we’ll be ready to take on the world!
Once ready it’ll look like this:
Click the tile to hit the landing page for our VM:
See that public IP address?
We’ll use that to SSH into our machine.
In my case: 13.88.180.170 !
3. Check VM using SSH
Let’s SSH into our box.
Pull out your preferred SSH client. Here’s bash on Windows and Putty Side by Side:
Notice ‘Timothy’ Triple underlined?
That’s the User Name we set during basic configuration and is paired with the password that we also set in Azure.
When you connect you might have to accept the ras2key fingerprint. It’ll look like this when using putty. Or it’ll be in the terminal using bash. Type ‘yes’ or Select Yes to continue.
Then type in your password and marvel and your creation:
Let’s test our vm by installing updates! Yay Updates!
Now that bash is on Windows, I wanted to try and make all the other guides I’d writen for Python on Windows irrelevant.
So here’s how to setup an effective environment for Python on Ubuntu on Windows.
1. Install Bash on Windows
2. Check for updates
3. Check out the REPL
4. Install Pip
5. Install VirtualEnv
6. Install VirtualEnvWrapper
7. Create your first virtualenv
8. Configure bashrc to keep it working
9. Install some packages
10. Test Flask
Now we’ll install Pip: sudo apt-get install python-pip
If you have permission issues try starting an elevated prompt: $ sudo -i $ apt-get install python-pip $ exit
Use exit to return to the regular prompt.
Should look like this:
Yay we’ve got pip!
Try pip list to see what comes standard.
5. Install VirtualEnv
Now we’re basically following along with the guide presented at hitchhikersguidetopython.com
Again, you might need to start an elevated prompt to install virtualenv.
$ sudo -i
$ pip install virtualenv
$ exit
$ cd my_project_folder
$ virtualenv venv
Then to use the VirtualEnvironment
$ source venv/bin/activate
You should now see a little (venv) before your prompt.
Like this:
Now you’ve created a virtualenv inside of your my_project_folder directory. Which is cool, but can be confusing with git, sharing code, and testing package versions.
So we use VirtualEnvWrapper to keep our virtualenvs in the same place.
Before we move on make sure you deactivate your env deactivate
Here’s an example of what it looks like to remove our venv directory and instead use venvv which will be stored in the directory underlined in red.
8. Configure bashrc to keep it working
This might not happen to you, but when I opened a new bash terminal I had to re-source my virtualenvwrapper.sh and WORKON_HOME.
So instead I added those lines to my bashrc script.
$ sudo nano ~/.bashrc
-- type in password --
This is what it looks like in nano for me.
Ctrl+X to exit and y-enter to save.
Then either:
Source ~/.bashrc
Or start a new command prompt->bash and try “workon” or “lsvirtualenv”
See the next image for a simple workflow.
9. Install some packages
Now lets install ‘requests’ into our newly created virtualenv:
Isn’t that nice!
10. Test Flask
Finally we’re going to test this with flask.
First we install the required files using pip into our activated ‘venv’
Then runserver -> navigate to the designated address -> and see our site.
Here’s what it looks like:
Have fun building with Python, on Ubuntu, on Windows!
The steps include:
1. Gathering the materials
2. Preparing the Raspberry Pi
3. Installing our software
4. Connecting our LED and PushButton
5. Connecting to our raspberry pi
6. Deploying our push button app
7. Connecting our app to IoT Hub
8. Connecting our app to weather data
1. Gathering the materials
For this workshop you’ll need about $55 worth of hardware, but all the software is free.
Seriously though, they did an awesome job with the documentation.
If you followed along to their step 4 you’re ready for our step 5.
5. Connecting our LED and PushButton
Now that we have our pi configured and Visual Studio up to date, let’s plug in our neat hardware!
Here’s an overview of the pin layout for the raspberry pi 3:
And the wiring diagram for the led + push button looks like this:
Sweet, lets light it up!
6. Connecting to our raspberry pi
We need our raspberry pi’s IP address before we try to deploy our code.
Power it up with a micro USB cord and connect it to a monitor with HDMI and see the landing page for your machine.
With the Windows IOT Core Come a super helpful web portal that allows you to configure your machine through a browser.
Navigate to that IP:
http://you.have.an.ip:8080/
https://192.168.1.145:8080/ is the IP address of my machine when I tried this
You’ll be prompted with a login panel.
The default user name is:
Administrator
The default password is:
p@ssw0rd
Here’s what you should see in the portal:
From here you can configure the name/password, get network info like the MAC address under Networking, and even test out some samples.
Sweet! This is one of my favorite Window IoT Features.
7. Deploying our push button app
The pi is setup, our computer is updated with the newest build tools, now its time to deploy some code!
And setup visual studio debugging by right clicking on PushButton project like this:
Then under debug set the remote machine ip to the ip you collect from the IoT Dashboard or from the raspberry pi itself by plugging in a monitor.
You will then need to rebuild your solution, and restore nuget packages.
Poke around for a minute, put a break point in the buttonPin_ValueChanged method and step around to see what’s going on with the push button.
8. Connecting our app to IoT Hub
Next we’re going to turn on the IoT Hub Connection.
Go into the azure portal and create a new IoT Hub like this:
Then create a new device called MyDevice in the IoT Hub.
More information about the IoT Hub can be found RIGHT HERE.
Then we’ll want to add our connecting strings to the app at the very bottom of MainPage.xaml.cs
static string iotHubUri = "YOURHUB.azure-devices.net";
static string deviceKey = "TOKENasQOPUesD1BmSOMETHINGCOMPLICATED";
static string deviceId = "MyDevice"; // your device name
Next we’ll uncomment this line of code on line 78:
SendDeviceToCloudMessagesAsync();
To see what’s happening in the event hub there is a small console application that we’ll run alongside to see what’s making into the cloud.
Sweet, now run both those apps at the same time, push the button, and see the glory that is Internet of things.
9. Connecting our app to weather data
Now that we’ve got it talking to the cloud, lets listen to what the clouds have to say!
We’re going to use forecast.io to provide weather data to our app, then use Speech. Synthesis to read it out over a the audio jack.
Navigate to forecast.io and signup register an account, then copy the complicated token highlighted here:
And replace what you see at line 168:
private const string FORECAST_URL = "https://api.forecast.io/forecast/YOURSECRETOKEN/";
Then if you want to be more specific about where you’re getting weather data replace the string on line 76.
var words = await GetWeatherString("37.8267,-122.423")
Make sure that the code in lines 72 through 81 are uncommented.
Deploy the app, press the button, and listen to the weather like never before!
It’s all very simple code and ready to be spun into lots of fun projects.
Here’s a list of all the ones that me and my friends could thing of:
Tap into the band app cloud
Morse code
Dance party
Send a random act of kindness
Tap into yammer
Time to finish breast feeding start and stop button
Random stats button
Gives you weather, or distance walked
Morse code each other
Send bro to someone random – twilio
Launch a middle
Listener recognition and ignore
Competitive button clicking
Obscure metadata
Best reflexes tester
Hope you had fun getting started with Windows IoT!
