Upload a New Home Page Using Ftp Azure Web App

First published on MSDN on December 22, 2015
Editor's Note: The post-obit is a guest mail service from Almir Vuk, a Microsoft Pupil Partner who attends University "Džemal Bijedić" Mostar, Faculty of Information Technology in Mostar, Bosnia and Herzegovina where he is a Informatics Major.

How to upload a website to Microsoft Azure via FTP is the topic of this tutorial. In order to consummate the action, nosotros will use FileZilla Open-source (GNU GPL) FTP client for Windows. The main reason I am writing this tutorial is to complete my Hello Cloud workshop for Microsoft Student Partner program. This arroyo is useful when using older PC hardware with an older Windows Bone, or an OS that cannot run Visual Studio.

For this tutorial, I will employ Microsoft Azure , Visual Studio Code (new Microsoft code editor) and FileZilla FTP client for Windows .

Start we will create a new Spider web App on our Azure portal with these elementary steps:

" + New " ->

Web + Mobile ->

Web App

Under App Service Name , we blazon our unique name for Spider web App/Site, and it will use ".azurewebsites.net" domain at the cease, and then that is the hereafter URL for our site.
The App Service Name I will use is "Demo-Elektro-FTP". For Subscription , we use the type of subscription on our Azure business relationship (DreamSpark or MSDN). I use my Resources Group named "HelloWorldCloudRes." Usually, we utilise Resource group that we accept created onetime in the past. If you lot don't have whatsoever Resource Group nosotros can create information technology it like this, get to the main Azure portal and in the left-hand area go to Resource Group , than we click on the " + Add " sign. Next, nosotros volition take a window that we volition fill with our data. (If you have created Resource Grouping sometime in the past, you can ignore and skip this pace).

One time we have created our new Resource Group, nosotros can keep with creating a Spider web App. When nosotros have filled in all the fields – App Service Name, Subscription, Resource Group, App Service Program – we can create our new Web App.

When we confirm our input with the Create button, our new Web App is created. That process tin take  about infinitesimal or more. After that we tin can encounter our Spider web App on the main Azure portal page. It should expect something similar this:

When nosotros have created our Web App on Azure, nosotros can beginning to make our little site on a local PC with Visual Studio Lawmaking (code editor). The site will exist very elementary, merely two paragraphs of "Hello World" text fashion, with the HTML looking something like this:

Now, nosotros have our Web App up and running on Azure and our simple website on our local PC. Our master goal is to learn how to publish a website to Azure without Visual Studio, and then nosotros utilise FileZilla FTP client for Windows. After we install FileZilla on our local PC, nosotros need to configure some details on our Web App Settings. And then nosotros become into the Azure portal and navigate to our Spider web App. So we go Settings with these steps:

Web App -> All settings -> in Publishing find the Deployment credentials ...

In front end of u.s. nosotros take the Settings window Fix deployment credentials . We demand to configure the FTP user name and password (twice). You tin can use a default user name from Azure, or you can use a custom 1 if you want.

After successfully completing the last step, we can keep to the FileZilla part of the tutorial. Nosotros open FileZilla -> File -> Site Manager -> New Site... (requite information technology a name, in my case it was "BlogTutorijal")

Now we have this window on the screen:

At present, if nosotros endeavor to Connect or click OK , we will receive a message maxim we don't have a Hostname setup. That is OK, considering we already have information well-nigh the Hostname, User and Password on Azure in our Web App. In the following image, at that place are side-by-side windows. On left side is Azure Web App Settings, and on right side is FileZilla Site Managing director. With these colored arrows, I connect the parts from Azure that nosotros need to copy to FileZilla Site Manager. My useful tip for y'all is to employ the Click to Copy function in Azure, and then that the username and hostname can be copied correctly. Under Password, we type the password that nosotros setup in the last step under the Set deployment credentials settings page.

If we accept everything correctly from Web App settings, click on Connect – after few seconds, yous will meet this type of log message in FileZilla:

At this moment, we accept a connection with the FTP Server on Azure Cloud and on our local PC. In the correct-lower corner in the FileZilla windows nether the Remote site : we have a main folder and two subfolders. For us the almost of import is the folder called " site ". In that folder is a wwwroot folder.

Open the wwwroot folder and, using Elevate and Driblet, re-create the index.html file we created earlier on our local PC. When we have copied the index.html file inside of the wwwroot folder, we have something like this on the screen:

If everything is completed successfully, we should now accept the URL of our Web App on our local PC index.html .

If the to a higher place window appears, then that ways we have successfully completed our tutorial, our index.html file is on Azure as an alphabetize folio and information technology is published equally a Spider web App on the Azure deject platform.

I promise this tutorial was helpful for you, and that now you know how to upload a website to Azure using a code editor and an FTP customer programme.

If you'd like to tap into the power of the cloud, be sure to sign up for our free Microsoft Azure offer for students . And so, go to work perfecting your cloud ability coding skills and register for the Hi Deject competition , a cinch way to make your résumé smoothen with employers looking for developers with established cloud development skills.

Thanks for participating!

Almir

zimmermanyounfelf.blogspot.com

Source: https://techcommunity.microsoft.com/t5/student-developer-blog/microsoft-azure-tutorial-how-to-upload-a-website-to-the-cloud/ba-p/311793