Remote WordPress Dev using VSCode and docker on AWS EC2

There are a lot of reasons for developing on AWS EC2. You may want to delay the purchase of a new laptop. You may want to develop in the environment where you will eventually deploy your WordPress site. You may like being able to add additional resources as your project grows in scope and complexity.

Likewise, there are a lot of reasons to develop your project on top of WordPress. You may want to take advantage of the existing plugins or themes. You may be starting a re-platforming effort. You may want to containerize your current WordPress application. You may want to make it more scalable.

There is generally only one reason to develop remotely using VSCode. It's what you've come to expect for your programming experience. Today, we are going to work through what it takes to set up a remote development environment using VSCode and standard AWS Linux 2 EC2 instance.

Prerequisites

• AWS Account (works with free Account)
• VSCode on the local machine
• SSH Client
• SSH Public and Private Key (with a passphrase)
• Some experience installing WordPress
• Some experience with docker-compose
• Some experience launching AWS EC2 Instances

Launch AWS EC2

1. Log in to the AWS Console
2. Import the SSH Public Key as the EC2 key pair
3. Provision an Amazon Linux 2 AMI
4. Increase the storage to 30 GiB
5. Choose the public key you imported in step 1.
6. Review and Launch

Setup AWS EC2 docker environment

Run the SSH command to log in into the remote EC2 Instance. You can find the address on the EC2 console. You should be prompted by SSH for a passcode.

sudo yum update -y
sudo amazon-linux-extras install docker -y
sudo service docker start
sudo usermod -a -G docker ec2-user
exit

Setup WordPress docker environment

pip3 install docker-compose
mkdir wp-wordpress-remote
cd wp-wordpress-remote
touch README.md
touch docker-compose.yml
wget https://wordpress.org/latest.tar.gz
tar -xzvf latest.tar.gz

Configure the AWS-ClI

Enter "aws configure" and answer the questions that following.

Answer the questions:
AWS Access Key ID [****************]:
AWS Secret Access Key [****************]:
Default region name [us-east-2]:
Default output format [json]:

VSCode Setup

I'm going to add the steps needed to set up VSCode for remote development. However, I am not going to take a lot of time with it. Check the internet or YouTube for more detailed instructions.

1. Install Remote Development VSCode Package
2. Remote-SSH: Add NEW SSH HOST
3. Enter SSH Command
4. Select Configuration File Update
5. Click the green box in the lower left-hand corner
6. Select alias or the name you chose for the connection.
7. Click on file explore, should read you are connected to remote host
8. Install Docker Extension Pack for VSCode

Note: If you can't make the connection, make sure that the absolute path to the private key is defined properly in the SSH Config file that you selected.

Install Git

It's best to setup git and .gitignore as early as possible when starting a new project. There are two directories that you will most likely want to ignore right away: ./wordpress and ./mysql. Once again, you should check the internet or YouTube for examples and more detailed instructions. You can also ignore the git step all together however it is not best practice.

sudo yum install git -y
git init
git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true
touch .gitignore
git add .
git commit -m "initial commit"

Setup CodeCommit Repository

1. Login to AWS CodeCommit Console
2. Create a CodeCommit Repository
3. Copy the clone URL need it later Note: don't put anything into the repository from the console.

Push content into repo

git checkout -b main
git remote add origin <HTTPS Clone URL>
git push --set-upstream origin main

Configure NGINX

In this step, we are going to configure the NGINX web server. And update the security group for our EC2 Instance so that it is publically visible.

version: '3.9'

services:
  nginx:
    image: nginx:stable-alpine
    ports:
      - 80:80
  mysql:
    image: mysql:5.7.34
    environment:
      MYSQL_DATABASE: wp
      MYSQL_USER: wp
      MYSQL_PASSWORD: secret
      MYSQL_ROOT_PASSWORD: secret
  php:
    image: php:7.4-fpm-alpine

Run "docker-compose up" to start the container processes. You can run "ctrl c" to bring down the containers once you've checked that you can get to the NGINX server on the EC2 instance.

Configure WordPress

Let's customize our php service so that it will recognize WordPress. Create the nginx directory in the project root directory. Change into that directory and touch the default.conf file. Add the following configuration to the default.conf

upstream php {
    server unix:/tmp/php-cgi.socket;
    server php:9000;
}

server {
    listen 80;
    listen [::]:80;
    server_name <Public DNS address> <Public IPv4 address>;

    root /var/www/html;
    index index.html index.php;
    location / {
        try_files $uri $uri/ /index.php$args;      

    }

    location ~ \.php$ {
        include fastcgi.conf;
        fastcgi_intercept_errors on;
        fastcgi_pass php;
    }
}

In the project root directory, touch php.dockerfile. Next, add the following configuration to the php.dockerfile file.

FROM php:7.4-fpm-alpine
RUN docker-php-ext-install mysqli pdo pdo_mysql && docker-php-ext-enable pdo_mysql

Update the docker-compose.yml file with the following configuration. The configuration removes image in the php service and replaces it with the build section.

version: '3.9'

services:
  nginx:
    build:
      context: .
      dockerfile: nginx.dockerfile
    ports:
      - 80:80    
    volumes:      
      - ./wordpress:/var/www/html
  mysql:
    image: mysql:5.7.34
    environment:
      MYSQL_DATABASE: wp
      MYSQL_USER: wp
      MYSQL_PASSWORD: secret
      MYSQL_ROOT_PASSWORD: secret    
  php:
    build:
      context: .
      dockerfile: php.dockerfile
    volumes:
      - ./wordpress:/var/www/html 

Run "docker-compose up --build" It will ask you to create the wp-config.php.

Create the wp-config.php

1. touch wordpress/wp-config.php
2. copy the contents of the infobox to wp-config.php
3. add the following code to wp-config.php in front of the no editing after this.
4. run "docker-compose up --build"

/** Set up'direct method for wordpress, auto update with ftp */
define('FS_METHOD','direct');

Note: You will fill out the WordPress configuration as you would normally. However. where it says database host enter "mysql".

Persist the mysql database

Doing this will remove the need to redo the WordPress configuration everytime you bring the containers up and down. Touch the mysql.dockerfile file in the project root directory.

FROM mysql:5.7.34
# add docker user
ARG USER=docker
ARG UID=1000
ARG GID=1000
ENV MYSQL_DATABASE=wp
ENV MYSQL_USER=wp
ENV MYSQL_PASSWORD=secret
ENV MYSQL_ROOT_PASSWORD=secret

Remove the image and the build section to the mysql service.

mysql:
    build:
      context: .
      dockerfile: mysql.dockerfile
    volumes:
      - ./mysql:/var/lib/mysql

Note: You may to bring it up and down a couple of times to get the permissions right. When you bring down the containers check the mysql directory and make sure that it is owned by ec2-user:ec2-user. If not run "sudo chown -R ec2-user:ec2-user mysql" before runnning "docker-compose up --build".

Fix WordPress file permissions

You can add blog posts to your website at this point. However, you may not be able to add plugins or images. If that's the case, you need first to run the following set of commands.

cd ./wordpress
sudo g+w wp-content
cd wp-content
sudo g+w wp-themes
sudo g+w wp-plugins

Next, you need to update the php.dockerfile with these changes.

# add docker user
ARG USER=docker
ARG UID=1000
ARG GID=1000
USER ${UID}:${GID}
WORKDIR /home/${USER}

Congratulations, you're ready to start developing WordPress using VSCode on remote EC2 instances.