Deploy WordPress with Azure DevOps

In this new post, I show you how to deploy WordPress with Azure DevOps using an instance of WordPress app service created in the Azure.

WordPress on Azure

First, in the Azure portal if we search for WordPress, with my surprise, we have different versions:

• WordPress is an instance of App Service where Azure installs WordPress. Also, the process creates a MySQL instance for it
• WordPress Server is a virtual machine where Azure installs IIS and, under it. PHP and then WordPress. Then, phpMyAdmin to administer MySQL. It is possible to connect to this machine using RDP.

So, in this post I use the first option. Now, I create a new resource, search for WordPress and select the first one (in the following screenshot).

Now, you see a page like the following screenshot where the WordPress resource is explain. To continue, press the Create button and follow the very simple instruction (just names).

Then, at the end of the process, you have the credentials to access to your new MySQL. Save them because it won’t be easy to find or change them later. So, if everything is clear and ready, click on the Create button.

After waiting few minutes that Azure is creating the resources, we are ready to the next step.

Configure WordPress

Now, that WordPress is installed from Azure, we are ready to configure it. So, open the website URL and start to configure your new instance of WordPress. First, select the language.

Now, set the Site name, the admin username and the password and the admin email. Then, click on the button Install WordPress.

After few seconds, the blog is ready to go and use and we see the following screenshot.

Now, we have to configura the App Service for Azure DevOps.

Configure the App service

So, now start the tricky part. We have to configure the App Service that contains WordPress to allow FTP. For that, click on Configuration from the menu on the left, then click on the tab General settings and then select FTPS only in the FTP state.

With that, we can are ready to use the Secure FTP to upload files. But first, we need the credentials to connect to the FTPS.

Update Deployment Center

Now, again in Azure, click on Deployment Center on the left. So, under FTPS credentials you must copy FTPS endpoint, Username and Password to use in the pipeline in Azure DevOps.

Configure the repository

Now, we want to deploy WordPress with Azure DevOps. I create a new repository for my WordPress project. Via FTP I copied all the file and push them in the repository.

Easy and straightforward. Nothing strange. The only thing we have to change is the web.config. By default, the website is not configure to provide fonts, videos or other type of files but HTML and CSS files. For that, we have to comunicate to IIS to provide some files with a specific MIME type.

Now, in the following web.config I configured to response videos (webm and ogv) and fonts (woff, woff2). with the right MIME.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
			<rule name="WordPress: https://azuks-cs-wordpress-srv-d1.azurewebsites.net" patternSyntax="Wildcard">
				<match url="*"/>
					<conditions>
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
						<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
					</conditions>
				<action type="Rewrite" url="index.php"/>
			</rule></rules>
    </rewrite>
	<staticContent>
		<mimeMap fileExtension=".webm" mimeType="video/webm" />
		<mimeMap fileExtension=".ogm" mimeType="video/ogv" />
		<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
		<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" /> 
    </staticContent>
  </system.webServer>
</configuration>

Add a new pipeline

Finally, the last step: the configuration of the pipeline with YAML. Also, you can use a classic job but YAML is the way.

# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: FtpUpload@2
  inputs:
    credentialsOption: 'inputs'
    serverUrl: '<your ftp server>'
    username: '<your username>'
    password: '<your password>'
    rootDirectory: 'src'
    filePatterns: '**'
    remoteDirectory: '/site/wwwroot'
    clean: false
    cleanContents: false
    preservePaths: true
    trustSSL: false

Now, run the pipeline and it should work fine. When you copy the server URL from the Azure resource, the URL is ending with /site/wwwroot: remove it and place it in the remoteDirectory

The final blog

What does the blog look like? This is the result. Nothing that we haven’t seen. You can see it immediately after the first installation. But now, if you change the project, the blog will change.

Wrap up

In conclusion, this is how to deploy WordPress with Azure DevOps. Is this post useful for you? Do you have any problem? How can I improve this post or the code in it? Please leave your message.