Azure: How to upload Web Site with FTP
How to upload Web site to Microsoft Azure with FTP approach is a topic of this blog post mini tutorial.
For this tutorial, we will use [FileZilla] open source (GNU GPL) FTP client for Windows. The main reason for this tutorial is a Hello Cloud workshop for the Microsoft Student Partner program. This approach is useful when we have old PC hardware with an older Windows OS, or an OS that cannot run Visual Studio.
For this tutorial, let's use Microsoft Azure with DreamSpark (or in this case MSDN), 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 it's the future URL for our site.
App Service Name used is "Demo-Elektro-FTP", for Subscription we use our type of subscription on our Azure account (DreamSpark or MSDN), Resource Group named "HelloWorldCloudRes" that we have created sometime in the past. If you don't have any Resource Group we can create it like this. Go to main of Azure Portal and in the left area go to Resource Group, click on "+ Add" sign. In front of us, we have the following window that we fill with our information. (In case that you have created a Resource Group sometime in the past you can ignore this step).
Now when we have created our new Resource Group, we can continue with creating Web App. When we filled 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 Create button, our new Web App is created and that process can last about minute or more. After that we can see our Web App on the main Azure Portal page as something like this:
Once we have created our Web App on Azure, we can start to make our site on our local PC with Visual Studio Code (code editor). Site will be very simple, only two paragraphs of text ("Hello World") style. HTML is something like this:
Right now, we have our Web App up-and-running on Azure and our simple web site on our local PC. Our main goal is to learn how to publish a web site 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 enter Azure Portal and navigate to our Web App. Then we go to settings with these steps:
Web App -> All settings -> in Publishing and find the Deployment credentials ...
In front of us we have a settings window Set deployment credentials. We need to configure FTP user name and password (twice). You can use default user name from Azure, or you can use custom one if you want.
After successful last step, we can go with FileZilla part of tutorial. We open FileZilla -> File -> Site Manager -> New Site... (give it a name, in this case it was "BlogTutorial").
Now we have this window on the screen:
Now if we try to Connect or click OK, we will have a message that says that we don't have Hostname setup. That is OK because information about Hostname, User and Password we have on Azure in our Web App. On following image there are side-by-side two windows. On left side is Azure Web App Settings, and on right side is FileZilla Site Manager. With these colored arrows, connect the parts from Azure that we need to copy in FileZilla Site Manager. A useful tip is to use Click to Copy function in Azure so that username and hostname can be copied correctly. Under Password we type our password that we setup in the last step under the Set deployment credentials settings page.
If we have done everything correctly in Web App settings, with a click on Connect after a few seconds you will see this type of log message in FileZilla:
At this moment we have a connection with FTP Server on Azure Cloud and our local PC. In right lower corner in FileZilla window, under the Remote site, we have main folder and two subfolders. For us, the most interesting is folder names "site", and in that folder there is a wwwroot folder.
Our goal is to open the wwwroot folder and with Drag and Drop copy our index.html file which we are created in previous steps on our local PC. When we have copied index.html inside the wwwroot folder we have something like this on the screen:
If everything is completed successfully, the URL of our Web App should have same content as the copy of local PC index.html.
This window is proving that our tutorial is correctly done, and that our index.html which we created is on Azure as the index page. It is successful published on Web App on Azure cloud platform.