Uploading to Azure Web Apps Using FTP

QR codes featured
In this post, I’m going to show you how you can upload your web content to an Azure web app using FTP.
 

 

Upload My Code!

What good is a web hosting plan if you cannot put your website code on it? Azure offers a few ways to get code into an Azure web app or app service from automated solutions using the like of Visual Studio Team Services (VSTS) and GitHub to a more basic option such as using FTP.
In this post, I will show you how to use an FTP client to upload your website into a web app. My web app is called preprod. It’s actually a pre-production deployment slot for a web app called petri, which has its own FTP configuration.

Configure FTP Account

Each web app and deployment slot has its own FTP username and address. You must enter a new password to use this FTP account, which is known in Azure as a deployment credential.
 

 
To set up the FTP user account, open the web app and browse to Deployment Credentials under the Deployment settings. Here you can specify the user account name and the password. Please note that the password:

  • Must be between 8 and 60 characters long and longer is better.
  • Must have at least two of the following: uppercase letters, lowercase letters, and numbers.

Configuring the Azure web app FTP account in Deployment Credentials [Image Credit: Aidan Finn]
Configuring the Azure Web App FTP Account in Deployment Credentials [Image Credit: Aidan Finn]
 
Note that the FTP/Deployment Username is not the complete username that you will require in your FTP client. You will retrieve that in the next step.

Retrieve FTP Details

You will need a server name or address to connect to with your FTP client; this can be found in the Overview of your web app or deployment slot. Note that you can find the FTP and FTPS addresses here.
You will also get the complete FTP username. In the previous step, I set the Deployment Username to petriadmin2. However, the actual username that I need to enter in my FTP client is shown below: petri__preprod\petriadmin2. It is named after the web app and deployment slot.

The FTP address of the Azure web app [Image Credit: Aidan Finn]
The FTP Address of the Azure Web App [Image Credit: Aidan Finn]

FTP Client

I have installed an FTP client on my PC and created a new connection. I entered the following information into the New Site dialog:

  • The FTP Hostname from the web app’s overview into the Host/IP/URL box.
  • The FTP/Deployment Username from the web app’s overview into the Username box.
  • The password that I set in the web app’s Deployment Credentials into the Password box.

Connecting to the Azure web app using FTP [Image Credit: Aidan Finn]
Connecting to the Azure Web App Using FTP [Image Credit: Aidan Finn]
 
When I connect to the website, I can browse the web host’s file structure. You can see the familiar wwwroot folder from IIS in the below screenshot; this is where I will upload my web content.
Browsing the web app folder structure using FTP [Image Credit: Aidan Finn]
Browsing the Web App Folder Structure Using FTP [Image Credit: Aidan Finn]
 
I can now use the FTP tool to upload and download content to the web app’s folder structure. I’ve already extracted the website content on my PC and it’s an easy upload to the wwwroot folder from there.
 

Testing the Site

The default document of my site is index.php. I should verify that the Application Settings of the web app or deployment slot have the following:

  • php is one of the default documents.
  • It is also higher priority than the default document of the web app (hostingstart.html).

Now, I can browse to the URL of the web app or deployment slot and my web content should load.