Geeks With Blogs
James Norman

For some of you this will be too much explanation, or too many pictures; but not everyone is at the same level.  I’ve broken this down into two major parts.  First, there is creation which will have the same steps regardless of whether you are deploying .Net or Java.  Then we will talk about deployment, using Visual Studio and then using FTP.  At the end I’ll point out a couple of miscellaneous things that I think are useful to know.

Also be aware, if you don’t have a lot of money to spend, there is a “free” option.  Keep reading.

Creation

Once you log into Azure’s portal, you should see the Dashboard, and the name of your subscription, along with your remaining monetary credit.  On the right you will be a vertical bar of icons, which may or may not have labels.

 Dashboard

From here you will need to create a Resource Group if you have not already done so.   Click on "Resource groups" and then "+ Add"

ResourceGroupAdd

On the next screen enter your Resource Group name and optionally change the "Resource group location."  From there, click on the Create button.  In this example, I created one that is called “GeeksWithBlogs”.  After I typed GeeksWithBlogs, it put a green checkmark at the end to indicate the name was acceptable.  I also changed my “Resource group location” to a location near me.  I do not know if this is actually used anywhere yet; I have not experimented.  You will see why I say this later in the post.

ResourceGroup

Once your Resource Group has been created you will see a notification pop up.  At that time, you need to click on “Refresh” from within the Resource Group screen to see your new group. Once you see your new group in the list, click on it.

ResourceGroupList

Now you are ready to add a Web App (and a Web App Plan) to the group.  Start by clicking on the “+ Add” button.

ResourceGroupAddWebApp

You will then be taken to a screen whose title starts out as “Marketplace” and then quickly changed to “Everything”.  Type in (without quotes) “Web App” and then hit the Enter key.  You will get a tempting list of Web Apps, and certainly you are welcome to choose a template you think is a better fit.  However, I’ve only tried the techniques in here with the generic Web App so far, which appears to work for most of the scenarios I would need for a “basic” application without a database.

Choose “Web App”.

Everything

On the next screen read (or ignore) the marketing hype and click on “Create”

 

WebAppMarketing

Now we come to a particularly important screen.  The first thing you should know is your app name has to be unique within all of azurewebsites.net.  I chose “geekswithblogs” and when I did so, it happened to be available, and will be at least once again once I delete this web app after making this post.  But the second person who goes out and gets it will see a red X at the end of the input box.  

 

For our Resource Group I use the one we just created.  But now I have to pick an App Service plan/Location, which is to say, I need to pick the right amount of “power” at the right price for me.  So once you have chosen your Web App name, and Resource Group click on the text under “App Service plan/Location”

WebAppCreation

 

Now as you create more Web Apps, you can likely choose an existing plan.  But as we are assuming that you are doing all of this from scratch, click on “+ Create New”

ServicePlan

First you have to name your plan.   I got rather cutesy with the name here, but unlike naming the web app itself, this one only has to be unique within your account.   Now remember when I said earlier about “Resource group location” – we had set it to “West US 2” in my example above, but it chose “South Central US” for  us.   It looks like a bug to me, and honestly I’m not sure any harm would come of having the Resource Group location be one thing, and the App Service plan location be another.  I’d rather be consistent.   So I change this and click on the text under “Pricing tier”.

AppServicePlan

Now you get to select computing power, features and price.   To me, it looks like “View All” rather than “* Recommended” is selected, but it’s actually the opposite.  There’s only three items in the recommended list.  Click on View all and then scroll all the way down.

ChoosePricingTier

FreeOption

Hey there’s a “F1 Free” options as well.  The price is certainly right if you don’t need multiple deployment spots, custom domains, backup, SSL, speed, etc. I’ve never been able to use more than one free one in my account, but I haven’t experimented with multiple Resource Groups either.   Once you have picked the plan you like by clicking on it, free or not, click on “Select” which goes back to the previous screen, then “OK” which goes back another screen and then, finally, “Create”.

WebAppCreation_2

Azure will then show you that deployment has started in the notification area, which is in the upper right portion of your screen.   At this point you will want to close out most of your screens, and return to the list of Resource Groups and then choose your group.

BackAtHome

From here, choose your App Service (Web App) and that will take you to the Web App Overview screen.  This shows you several important things, including the URL you need to reach your application, your FTP/Deployment username, and FTP hostname.   Now, if you are using Visual Studio to do your deployment, the FTP username/hostname is not important to you.   Now our scenarios diverge a little bit between whether you are using ASP.Net MVC/MVC Core/File Server or Java. 

Overview

If you are using Java, and maybe even if you are using .Net, you will definitely want to go down and look at “Application Settings”.

AppSettingsOverView

This is a screen you should explore in detail later on, but for now we will only concern ourselves with the “.NET Framework version” and “Java version” items.   Right now the .NET Framework version only has two options “v4.6” and “v3.5”.   So if you are just using this to serve up files or ASP.Net MVC, you are basically good to go and should skip to the “Deployment” portion of this article.  If you are deploying a JSP application, you will obviously want to change the Java version.  This will give you a few more choices, which will inevitably change from when I originally wrote this article.

  • First you are given a choice of Java 7 or Java 8.  Nothing earlier.
  • Either version of Java will give you a choice of “Newest.”  Java 7 gives you two specific versions 1.7.0_51 and 1.7.0_71.  Java 8 has four specific versions in addition to “Newest”. 
  • Last, you get to choose your “Web container” which basically means Tomcat or Jetty.  Again you get to make choices including “Newest” versions of Tomcat 7, Tomcat 8 and Jetty 9.1 along with some specific versions.

Once you have made your choices and saved the application, a webapps folder will be created and configured under wwwroot.

Deployment

Using Visual Studio

I love the simplicity of this!  Once you have a publish profile file, it’s easy.  Getting the deployment settings file is just as easy.  Once you are back on your web application’s Overview screen, simply click on “… More”

PublishSettings1

and then

PublishSettings2

assuming your pop-up block is not in the way, your publish profile will download.

PublishSettings3

From there you can go into your ASP.Net MVC project within Visual Studio and publish.  Go to the “Build” menu

 

Build

then choose “Publish GeeksWithBlogs” (or whatever name you used locally) and then Import

Publish

at this time  you will get a Browse dialog.  From your downloads folder, pick up the “geekswithblogs.PublishSettings” file, or whatever name applies, and then hit OK.

PublishValidateConnection

At this point I just click on two buttons.  First, “Validate Connection”.  It won’t have a checkmark after it when you first get this screen.  Click on “Validate Connection” and wait for 10-60 seconds, and then you should click the checkmark, at which time you should feel free to click “Publish” and get yourself a quick cup of coffee or tea.  When the publish is finished a web browser window is automatically opened for you to the root of the application.

Using FTP

If you are deploying a Java .WAR file, or just using this web application as a file server, or you just like doing things the hard(er) way, then FTP is for you.  But the process really isn’t that bad.  We are going to assume you are going to push all files in a folder called “c:\ftp” which has  no subfolders, to the root of your application – or in the case of a WAR to the webapps folder.

We need to create an FTP password.  First go back to your web application screen and instead of clicking on Overview, click on “Deployment credentials”

DeploymentCred1

From there you will need to choose a username and password.  The password must be at least 8 characters and have two of the three following groups: uppercase letters, lowercase letters and numbers.  Then go to the top of your screen and click “Save”.  Again look for the little green checkmarks or red X’s for feedback.

DeploymentCred2

Now you are ready to go to your client machine and do the FTP operation.

First, open a Command Prompt Window.  This is when you will need your FTP credentials from the Overview screen of your web application.  If you hover over the right side of the information, a “copy” icon will appear.  Click on it and make your life a little easier.  For this example, we will use the exact information provided in the Overview screenshot earlier in this article, along with the information provided in these last few paragraphs.

ftp waws-prod-mwh-001.ftp.azurewebsites.windows.net

If you are not automatically prompted for the user, type in “User” without the quotes at the FTP prompt.  Do not forget the “fake domain” as part of the username.

geekswithblogs\myself

MyPasswordHere

From there, we want to navigate to our local ftp directory where our source file(s) are

lcd “c:\ftp”

Then we want to go to the webroot of our remote server.

cd site

cd wwwroot

If we are deploying a JAR file, we need to do one more command so we are deploying to the right directory

cd webapps

I like to change the file type to binary

bin

and then finally we put up our file(s):

mput *.*

Or you can use “put” instead of “mput” if there is only one file.  And then finally you can verify your files are there by getting a directory listing.

ls

A Few More Things…

If you are strictly using your Azure web application as a file server, you may want to be able to browse directory listings.   You can do this by putting in a web.config file in your wwwroot folder.  I found this trick here https://www.benday.com/2015/03/25/howto-enable-iis-directory-browsing-on-azure-websites/

Your web.config file should contain:

<configuration>

<system.webServer>

<directoryBrowse enabled="true" showFlags="Date,Time,Extension,Size" />

</system.webServer>

</configuration>

This worked perfectly for me the first time I did it, but not the second time.   The first time when it was a success, I had not deployed an ASP.Net application.  So once I got rid of all traces of an ASP.Net application, and hostingstart.html, I recreated the web.config above and it all worked fine.

DirectoryBrowsing

You will also want to be aware of the console.  This menu option for your web application is quite a ways down, well below “Application Settings”

Console

I found this rather handy for discovering my files and directories, though the “App Service Editor (Preview)” worked well for that too.  The console seems to have a quirk, however.  It takes a few seconds, or sometimes longer, for that “Azure logo” to pop up.  I found out if you type anything before this, it appears to work but is actually ignored.

AzureConsoleQuirk

Posted on Friday, September 9, 2016 9:01 PM ASP.Net MVC , static files , static , Java , Azure , WebApp , Web App | Back to top


Comments on this post: Step by Step with Pictures: Setting up Azure App Services for File Servers, ASP.Net MVC/MVC Core and JSP apps

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © James Norman | Powered by: GeeksWithBlogs.net