What is a staging site?
A staging site, also called as a development site, testing site, or sandbox – is a clone of your actual WordPress website which cannot be accessed by your visitors. This can only be accessed by people who have the staging URL.
Why do you need a staging site for your WordPress website?
A staging site is extremely useful when you are working on a WordPress website. It provides a safe area for development, testing, and experimentation. When you are trying out a new plugin, theme or custom code, there are chances that the website might break leading to downtime for your users, or even cause irreparable damage to your website like loss of content and data.
Users would not be able to see your work in progress. You can make the changes live when you are ready. A staging site helps you experiment with new plugins without being locked to the changes and troubleshoot in case there are any issues. You do not have to rush making changes since your users are safely using the original version.
Although the staging site is a clone of your original website, the changes do not reflect in the original site until you publish the changes, also known as ‘swapping’. In case a new deployment causes issues, you can easily swap the slots back to previous versions, effectively rolling back the changes.
Staging sites can be immensely useful for scenarios such as A/B testing, allowing you to gather feedback from users and make informed decisions.
How to create a staging site in WordPress on Azure App Service?
Note: We will make use of Deployment slots feature of App Service to create staging sites for our WordPress application. However, this scenario is not completely same as WordPress on App Service also uses an Azure database for MySQL instance.
Scenario 1: Creating a staging site while creating WordPress sites on App Service
Step 1: Go to https://ms.portal.azure.com/#create/WordPress.WordPress . Go to Deployment tab. Check ‘Add staging slot’.
Scenario 2: Creating a staging site for an already created WordPress site on App Service.
There are five parts to this:
Part 1: Create the App Service deployment slot.
Step 1: Once you have a WordPress website on Azure App Service (See how to create one here), go to the App Service Overview. Then go to Deployment Slots.
Step 2: Click on Add Slot
Step 3: Enter your preferred name for the staging slot. In the ‘Clone settings from:’ select the deployment slot from there you wish to copy the settings. In this case, the name of the staging slot is ‘staging’ and deployment slot is ‘wpsite01’. Notice that the staging site can be accessed using the link wpsite01-staging.azurewebsites.net
Click on Add.
Step 4: Now you can see that the staging slot has been added. Click on Close.
Part 2: Connect the staging slot to VNET.
Step 1: Go to App service staging slot.
Step 2: Go to networking.
Step 3: Check outbound networking. If not configured, click on link.
Step 4: Click on connect.
Part 3: Create a new Database in your Azure database for MySQL instance
Step 1: Go to phpMyAdmin by using the URL: https://<yourappname>.azurewebsites.net/phpmyadmin
Step 2: Login using your database credentials. Tip: you will find your database credentials in App Settings.
Step 3: Go to your database
Step 4: Go to Operations. You will see the option “Copy database to”. Add database name. Click on Go.
Part 4: If you are using CDN/AFD with your WordPress site, create a new CDN/AFD endpoint and Blob storage container.
Part 5: Map App Service staging slot to the staging database, CDN, Blob storage.
Step 1: Go to App Service staging slot. Go to Environment Variables.
Step 2: Edit ‘Database name’ to new database name
Step 3: Edit CDN endpoint
Step 4: Edit Blob storage container name
Step 5: Apply. Confirm.
Swapping
Step 1: Now visit the staging site by visiting the website by clicking on the staging slot.
Step 2: This will open the overview page for the staging slot. Notice that this is similar to the overview page of the original web app, only the name of the staging slot is different as set in step 3. Click on the website URL to visit the website. In this case, https://wpsite01-staging.azurewebsites.net/
Step 3: As you can see, the default website appears as the original slot. Since we have made no changes to the original slot, the default website appears.
Step 4: Go to the admin panel of WordPress by adding ‘/wp-admin’ after the address and logging in using your credentials that are same as the original website. Make the desired changes on the website. In this case, the changes look like this:
Step 5: Now go to the original website. In this case, https://wpsite01.azurewebsites.net/
We can see that the original website is present in the original state.
Step 6: Go to the Deployment slots page in Azure Portal. Click on Swap. This will swap the staging and production sites.
Step 7: Select the staging slot as the source and the production slot as the Target. Click on Swap.
Step 8: You can see that the swap operation has been completed. Click on Close.
Step 9: Now visit the original website. In this case, https://wpsite01.azurewebsites.net/
We see that the changes have successfully been published to the production slot. Now your website visitors can see the changes.
Further reading
Deployment slots (Staging sites) can be used for more advanced use cases. Please go through Set up staging environments - Azure App Service | Microsoft Learn to understand more about deployment slots.
Support and Feedback
In case you need any support, you can open a support request at New support request - Microsoft Azure.
For more details about the offering, please visit Announcing the General Availability of WordPress on Azure App Service - Microsoft Tech Community.
If you have any ideas about how we can make WordPress on Azure App Service better, please post your ideas at Post idea · Community (azure.com)
or you could email us at wordpressonazure@microsoft.com to start a conversation.
Microsoft
