Using DigitalOcean App Platform to host WordPress – Part 1

In this guide, we are going to explore a hack to serve your WordPress site using the DigitalOcean App Platform. We will use the Digital Ocean Databases for Mysql 8 that will act as the WordPress db. We will use Roots Bedrock (WordPress boilerplate) and nginx for our wordpress.

Checkout;

This is a two part series. This part will only deal with Setting up a Database and Launching WordPress with Digital Ocean app. In the second part we will configure wordpress to serve traffic.

The DigitalOcean App Platform is a fully managed solution that allows you to build, deploy, and scale apps easily. DigitalOcean will handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks. In simple terms, the DigitalOcean App Platform is a Serverless platform provided by digital ocean.

WordPress is a popular CMS that serves millions of the popular websites today. The default WordPress installation installation uses a wp-config.php file for configuration. Serverless platforms like DigitalOcean App Platform uses environment variables instead. So the default WordPress installation will not work for the DigitalOcean App Platform.

In this guide, we will use Roots Bedrock which is a WordPress boilerplate with modern development tools, easier configuration, and an improved folder structure. Roots Bedrock supports:

  • Modern development tools
  • Better WordPress project structure
  • Easy WordPress configuration with Environment variables
  • Dependency management with Composer
  • Enhanced Security

Prerequisites

To follow along this guide, ensure you have:

  • Knowledge of WordPress
  • A Digital ocean account. Use this link to create if you don’t have.

Steps to get WordPress running on DigitalOcean App Platform

  1. Create a Managed Database using Digitalocean Databases
  2. Download and configure Roots Bedrock release
  3. Create an App For our WordPress
  4. Configure WordPress environment variables

1. Create a Managed Database using Digitalocean Databases

Head over to Digital ocean Admin panel and in the Databases, click on Mysql 8. Choose configuration for the Node plan, Datacenter Region, VPC Network, DB Host name and choose the project to add in. Then click Create database cluster.

Citizix - Create Database Cluster Digital Ocean
Citizix – Create Database Cluster Digital Ocean

You will be welcomed by the progress page. The process can take sometime, grab some coffee and wait for it to finish. After it’s done you should be able to see the database details like shown below:

Citizix Digital Ocean Database Details
Citizix Digital Ocean Database Details

2. Download and configure Roots Bedrock release

You can download the latest Roots Bedrock version on it’s GitHub releases page.

If you are using a unix like system that supports command line and has curl installed, use this command to download. The latest release as of the writing of this article is 1.16.1.

curl -LO https://github.com/roots/bedrock/archive/refs/tags/1.16.1.tar.gz

Extract the content:

tar -xzvf 1.16.1.tar.gz

Confirm with:

➜ ls
1.16.1.tar.gz  bedrock-1.16.1

Since we are going to use nginx, lets add the conf file to the root of our bedrock directory.
Create a file nginx.conf with this content:

index index.php;

location / {
    try_files $uri $uri/ /index.php?$args;
}

We need to push the changes to a git repository where the digital ocean will get the code from. Inside the repo, use these commands:

# Initialize the repository
git init

git add .
git commit -m 'initial wordpress content for d.o apps installation'

git remote add origin git@github.com:citizix/wordpress-on-do-apps.git

# If the default branch is not main let us update it to main using this command
git checkout -b main

git push -u origin main

3. Create an App For our WordPress

Now that we have the database and the Roots Bedrock uploaded to a repository let’s create an app.

Navigate to the Apps tab in the DO admin panel and create a new app. Click Launch app and Choose your source. In my case it is Github. Select the Git repository where you pushed the Root Bedrock WordPress files.

Citizix DigitalOcean choose app Source
Citizix DigitalOcean choose app Source

On the next page. we configure our app. App platform will autodetect your app type as PHP, but we’ll need to configure.

For run command, use this:

heroku-php-nginx -C nginx.conf web/

You can leave the HTTP port as-is since this is the internal port used by the built-in App Platform load balancer.

Citizix DigitalOcean App Config
Citizix DigitalOcean App Config

For the Database, Click “Add a Database”, then “Existing Database” and select the database we created before. Select the default database and user.

Citizix DigitalOcean App Config db
Citizix DigitalOcean App Config db

Once the configuration is done, click Next

Citizix DigitalOcean App Config done
Citizix DigitalOcean App Config done

Name your service and choose region where you have launched your apps. Choose the region where your database resides in. Click next when done.

Citizix DigitalOcean App Config - Name and Region
Citizix DigitalOcean App Config – Name and Region

On the next page, select which pricing tier you want to use, I’m going to use Pro. Select the container size too.

Citizix DigitalOcean App Config tier
Citizix DigitalOcean App Config tier

Click “Launch Pro App” when done. Give it a couple of minutes, you should have your app up and running.

Citizix DigitalOcean App Running
Citizix DigitalOcean App Running

4. Configure WordPress environment variables

Now that we have the app launched, we need to add some environment variables forWordPress to route the site correctly.
The DATABASE_URL has already been automatically set. We will need to add WP_HOME and WP_SITEURL. These will be the DigitalOcean generated URL.
To achieve this, go to “Settings” > “App-Level Environment Variables”.
Set them like this:

WP_HOME=https://wordpress-on-do-apps-ly8u3.ondigitalocean.app
WP_SITEURL=https://wordpress-on-do-apps-ly8u3.ondigitalocean.app/wp

The service will be rebuilt. After which the url should respond to traffic.

Once the build is done, you can revisit the live URL to initiate WordPress configuration. You should be welcomed by this page:

Citizix DigitalOcean - WordPress Install
Citizix DigitalOcean – WordPress Install

Up to this point, we have managed to set up a managed database with Digital Ocean Databases, Create a wordpress app using our Root Bedrock Repo from github and ensuring that we can see the WordPress Installation page.

In part 2, we will go through installation of wordpress and setting it up to serve traffic.

Checkout Part 2 here

comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy