First published on MSDN on Dec 22, 2015
Editor’s Note:
The following is a guest post from Almir Vuk, a Microsoft Student Partner who attends University “Džemal Bijedić” Mostar, Faculty of Information Technology in Mostar, Bosnia and Herzegovina where he is a Computer Science Major.
How to upload a website to Microsoft Azure via FTP is the topic of this tutorial. In order to complete the activity, we 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 approach is useful when using older PC hardware with an older Windows OS, or an OS that cannot run Visual Studio.
For this tutorial, I will use
Microsoft Azure
,
Visual Studio Code
(new Microsoft code editor) and
FileZilla FTP client for Windows
.
First we will create a new
Web App
on our Azure portal with these simple steps:
"
+ New
" ->
Web + Mobile
->
Web App
Under
App Service Name
, we type our unique name for Web App/Site, and it will use ".azurewebsites.net" domain at the end, so that is the future 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 account (DreamSpark or MSDN). I use my Resource Group named "HelloWorldCloudRes." Usually, we use Resource group that we have created sometime in the past. If you don't have any Resource Group we can create it it like this, go to the main Azure portal and in the left-hand area go to
Resource Group
, than we click on the "
+ Add
" sign. Next, we will have a window that we will fill with our information. (If you have created
Resource Group
sometime in the past, you can ignore and skip this step).
Once we have created our new Resource Group, we can continue with creating a Web App. When we have filled in all the fields – App Service Name, Subscription, Resource Group, App Service Plan – we can create our new Web App.
When we confirm our input with the
Create
button, our new Web App is created. That process can take about minute or more. After that we can see our Web App on the main Azure portal page. It should look something like this:
When we have created our Web App on Azure, we can start to make our little site on a local PC with
Visual Studio Code
(code editor). The site will be very simple, only two paragraphs of "Hello World" text style, with the HTML looking something like this:
Now, we have our Web App up and running on Azure and our simple website on our local PC. Our main goal is to learn how to publish a website to Azure without Visual Studio, so we use FileZilla FTP client for Windows. After we install FileZilla on our local PC, we need to configure some details on our Web App Settings. So we go into the Azure portal and navigate to our Web App. Then we go Settings with these steps:
Web App
->
All settings
-> in
Publishing
find the
Deployment credentials ...
In front of us we have the Settings window
Set deployment credentials
. We need to configure the FTP user name and password (twice). You can use a default user name from Azure, or you can use a custom one if you want.
After successfully completing the last step, we can continue to the FileZilla part of the tutorial. We open
FileZilla
->
File
->
Site Manager
->
New Site... (give it a name, in my case it was "BlogTutorijal")
Now we have this window on the screen:
Now, if we try to
Connect
or click
OK
, we will receive a message saying we don't have a Hostname setup. That is OK, because we already have information about the Hostname, User and Password on Azure in our Web App. In the following image, there are side-by-side windows. On left side is Azure Web App Settings, and on right side is FileZilla Site Manager. With these colored arrows, I connect the parts from Azure that we need to copy to FileZilla Site Manager. My useful tip for you is to use the
Click to Copy
function in Azure, so that the username and hostname can be copied correctly. Under Password, we type the password that we setup in the last step under the
Set deployment credentials
settings page.
If we have everything correctly from Web App settings, click on
Connect –
after few seconds, you will see this type of log message in FileZilla:
At this moment, we have a connection with the FTP Server on Azure Cloud and on our local PC. In the right-lower corner in the FileZilla windows under the
Remote site
: we have a main folder and two subfolders. For us the most important is the folder called "
site
". In that folder is a
wwwroot
folder.
Open the
wwwroot
folder and, using Drag and Drop, copy 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 have the URL of our Web App on our local PC
index.html
.
If the above window appears, then that means we have successfully completed our tutorial, our
index.html
file is on Azure as an index page and it is published as a Web App on the Azure cloud platform.
I hope 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 client program.
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
. Then, get to work perfecting your cloud power coding skills and register for the
Hello Cloud competition
, a sure-fire way to make your résumé shine with employers looking for developers with established cloud development skills.
Thanks for participating!
Almir