DEV Community: Zachary Alexander

How to dockerize the Nuxt3 Beta on AWS?

Zachary Alexander — Mon, 28 Feb 2022 13:09:18 +0000

How to dockerize the Nuxt3 Beta on AWS?

Innovation is rampant in the Nuxt3 ecosystem. Nothing is safe. Everything we know about enterprise-grade web application development is up for grabs. With advances like the Vite bundler and the Nitro server, you could make the case that the entire javascript world stands to benefit. We might as well start exploring this new opportunity space with some low-hanging fruit like a docker container.

You could make the case that the docker container is the smallest component in modern web development. It is a building block used by more complex technologies like Amazon Elastic Container Service and Amazon Kubernetes Service. Just a heads up, real surprises will present themselves even at this level. For example, there is no dist directory created after the build. Nuxt3 uses a .output folder. Let's get started:

What are the Nuxt3 Prerequisites?

You need access to the following:

– AWS account

– Node

– Yarn

– Git

– Docker

– Docker-compose

– Visual Studio Code

How to install Nuxt3?

npx nuxi init <app-name>
cd <app-name>
yarn install
yarn build
code .
yarn dev

Note: I like to run yarn build instead of yarn dev to build out all the directories for git. I run yarn dev to start the dev server.

How to install Tailwindcss?

Nuxt3 has caused many web developers to question everything, including how best to do style javascript code. A lot of Nuxt3/Vue developers are moving to Tailwindcss. You could make the case that tailwindcss is true to the single file component philosophy. On the other hand, the tailwindcss step is purely optional.

yarn add tailwindcss
npx tailwind init

Note: the tailwind init commit will create the tailwind.config.js.

Configure tailwind.config.js as such:

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",    
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create the tailwind.css file.

mkdir -p assets/css/ && touch assets/css/tailwind.css

Configure the tailwind.css as such:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add the following to nuxt.config.ts:

build: {
        postcss: {
          postcssOptions: {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          },
        },
      },
      css: [
        "~/assets/css/tailwind.css"
  ],
})

Remove app.vue and create /pages/index.vue. index.vue.

mkdir pages && touch pages/index.vue

Add content with tailwind styling to index.vue.

<template>
  <div class="container mx-auto bg-gray-300 p-8">
    <h1 class="font-bold text-gray-600 text-lg text-center">Hello, Tailwind 3!</h1>
  </div>
</template>

How to create our first Nuxt3 container?

Create the Dockerfile

# Dockerfile
FROM node:16-alpine3.14

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD [ "yarn", "start" ]

Run the docker build command.

docker build -t <application name> .

Create the docker-compose.yml, then copy the Docterfile to nuxt3.dockerfile so that you can use docker-compose.

version: '3.9'

services:
  nuxt3:
    build:
      context: .
      dockerfile: nuxt3.dockerfile
   ports:
      - 3000:3000

What is the .dockerignore file and why do we need it?

The time it takes to build an image matters when you're working on a project. And the most time consuming part of this process is the node_modules. The best way to limit that process to include a .dockerignore like the described below.

Touch .dockerignore in the root directory and add the following configuration to the file.

node_modules
Dockerfile
.git/
.gitignore
.dockerignore

How to add Nuxt3 docker image to AWS Elastic Container Registry

The next stage takes us into the AWS Cloud and removes a lot of the undifferentiated heavy lifting. There are over 200 technology services that we can explore and eventually adopt to improve the scalability of our workflow. So, we will start with the simple docker container you created earlier.

Open the AWS Console and navigate to the AWS ECR console. Click the "Create Repository" button. Next, enter the name of the repository you want to create. I entered nuxt3-aws. Make sure the visibility setting is set to private.

Edit the nuxt3.dockerfile and replace the FROM node entry with the following node URI.

<account number>.dkr.ecr.<region name>.amazonaws.com/ecr-public/docker/library/node

Note: Replacing the Node entry will store the docker image in AWS ECR and result in a security enhancement. However, you will incur a cost if you exceed the Free Tier storage limits.

Click the Create Repository button at the bottom of the page.

Click on the newly created repository. It will open the repository page and show you the view push commands button.

Follow steps 1, 3, and 4. You can run the "docker-compose --build" instead of the docker build command on the command line.

Note: You can find the correct container by issuing "docker image ls" from the command line. The image at the top of the screen should be the one.

Conclusion

The nuxt3 opportunity space is vast. And nothing can be taken for granted. The journey will be uncomfortable and, at times, painful. With nuxt3 and AWS, we have to rethink how we have always done enterprise software development. The good news is some say that it reminds them of the early days of React. Hopefully, this article will entice you to take a walk on the wild side and check out what Nuxt3 has to offer.

Next Gen Remote WordPress Development using Composer and Bedrock

Zachary Alexander — Thu, 26 Aug 2021 20:19:55 +0000

This post will explore the next generation of WordPress development, which centers around adding an application-level package manager and a modern WordPress tech stack. You could make the case that these are the two things that separate professionals from highly motivated enthusiasts.

Composer for PHP is the package manager that we are using today. You probably understand the value of controlling your dependencies if you've used npm for javascript or gem for ruby on rails. Knowing exactly which dependency has changed can be invaluable when troubleshooting a problem.

Bedrock upgrades the tech stack that WordPress comes with out of the box. It improves the directory structure by moving the wp-config.php file from the root directory into the config directory one level-up. It also replaces the standard password encryption with the more secure wp-password-bcrypt.

A little documented feature of Bedrock is that it strictly enforces a separation between development and production environments. If you try to place a development environment into production, then your SEO will tank. The reason is that all of your content will be tagged with no-follow.

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

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

Setup AWS EC2 docker environment

Run the SSH command from you local machine 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 once you connect with the site. Enter the following command once you're logged in to the EC2 Instance.

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 project root

All you need to do to create a new WordPress project is to create a new directory. Your projects shouldn't interfere with each other except for potential physical port conflicts. So feel free to use the following commands to develop multiple WordPress sites on the same EC2 Instance.

pip3 install docker-compose
mkdir wp-composer-remote-demo
cd wp-wordpress-remote
touch README.md
touch docker-compose.yml

Install Composer for PHP

Composer prep

Run the following command in prep for Composer being added to the system. The shared PHP will only be used to install and run Composer.

sudo amazon-linux-extras enable php7.4
sudo yum clean metadata
sudo yum install php-cli php-pdo php-fpm php-json php-mysqlnd -y
sudo yum -y install php-xml

Note: You can find instructions oh how to add Composer as a service. However, I think that it clutters up the docker-compose.yml file.

Follow Install Instructions on the Composer for PHP Website

Open a brower window to Composer PHP Download. Composer PHP is regularly updated and the installation hash changes when it's updated. Per the maintainers request, we won't distribute the instructions here.

Set up the Bedrock directory structure

Run the following comands to working directory for WordPress development. You could the case that this is where you start to create a more professional WordPress website. So, run the commands and brace yourself.

composer create-project roots/bedrock
cd bedrock
composer update
cd ..

Note: Composer uses the package.json to manage dependencies. So, if you want to update a package you make the change there, then run composer update. If the file is available from Packagist.org then it will install the file for you. Checkout Packagist.org for more complete instructions.

Configure the AWS-ClI

Run "aws configure" is something I like to do in preparation for installing and configuring git. The reason is because you really want to use the credential.helper so that you won't have to enter the user name and password every time you want to do a git push. You'll have to answer the following questions:

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

Install Git

It's best to set up 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: ./bedrock and ./mysql. I like to start by copying the .gitignore in the bedrock directory. Eventually, you'll want to ignore the nginx/certs directory.

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"
git checkout -b main

Let's switch to the terminal in VSCode and set up the docker-composer.yml to run NGNIX. You can look at my previous article on remote development with VSCode if you are unsure. Technically, you don't need the mysql service to run NGINX. However, it's nice to have all of the Docker containers run without complaining.

Copy the following config in the docker-compose.yml file, then update the EC2 security group to permit HTTP traffic on port 80. Finally, run "docker-compose up". This will run all the docker containers. Do a "control-c" to stop or escape the docker-compose process.

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

Create Self-Signed Cert

Eventually, you may want to encrypt information in transit. So, we will give you the SSL encryption information now so you won't have to fuss with the NGINX server again.

Use OpenSSL to create a self-signed cert and key

Run the following command in the project root. You will create both a .crt file and a key file in the nginx/certs directory. Unfortunately, the site will show up as "Not Secure" even though you're using SSL. You can fix that in production.

mkdir -p nginx/certs && cd nginx/certs
openssl req -newkey rsa:4096 -x509 -sha256 -days 365 -nodes -out <Public DNS Address>.crt -keyout <Public DNS Address>.key

Configure Self-signed SSL Cert and key

Next, we are going to set up the nginx.dockerfile and nginx/default.conf.

cd <project root>
touch nginx.dockerfile
touch nginx/default.conf

Add the following configuration to the nginx.dockerfile. The configure changes will update the base container.

FROM nginx:stable-alpine
ADD ./nginx/certs /etc/nginx/certs/self-signed
ADD ./nginx/default.conf /etc/nginx/conf.d/default.conf

Add the following configuration to the nginx/default.conf file. The default.conf file changes the root director to /var/www/html/bedrock/web. And configures the Self-Signed SSL cert and key.

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/bedrock/web;
    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;
    }
}
server {
    listen 443 ssl;
    listen [::]:443;
    server_name <Public DNS Address> <Public IPv4 Address>;

    root /var/www/html/bedrock/web;
    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;
    }
    ssl_certificate /etc/nginx/certs/self-signed/<Public DNS Address>.crt;
    ssl_certificate_key /etc/nginx/certs/self-signed/<Public DNS Address>.key;
}

Next, we'll update the docker-compose.yml and the security group so that it will support SSL.

version: '3.9'

services:
  nginx:
    build:
      context: .
      dockerfile: nginx.dockerfile
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./bedrock:/var/www/html/bedrock
  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
    volumes: 
      - ./bedrock:/var/www/html/bedrock

Note: You'll get an error because the PHP Service can't talk with MySql. However, you'll see that the server is using SSL.

Let's get WordPress working

We are going to do a couple of things with the next set of changes. First, we are going to enable MySql support. We are going to add support for the wp-cli. Finally, we are going to pick a user to make updating the WordPress website easy.

So, "touch php.dockerfile" and add the following configuration.


FROM php:7.4-fpm-alpine
RUN docker-php-ext-install mysqli pdo pdo_mysql && docker-php-ext-enable pdo_mysql
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
RUN chmod +x wp-cli.phar
RUN mv wp-cli.phar /usr/local/bin/wp
# add docker user
ARG USER=docker
ARG UID=1000
ARG GID=1000
# Setup default user, when enter docker container
USER ${UID}:${GID}
WORKDIR /var/www/html/bedrock

Update the docker-compose.yml file to build the PHP service.

php:
  build:
    context: .
    dockerfile: php.dockerfile
  volumes: 
    - ./bedrock:/var/www/html/bedrock
wp:
  build:
    context: .
    dockerfile: php.dockerfile
  volumes:
    - ./bedrock:/var/www/html/bedrock
  entrypoint: ['wp', '--allow-root']

Update the bedrock/.env file with environment varibles from the docker-compose.yml file.

DB_NAME='wp'
DB_USER='wp'
DB_PASSWORD='secret'

# Optionally, you can use a data source name (DSN)
# When using a DSN, you can remove the DB_NAME, DB_USER, DB_PASSWORD, and DB_HOST variables
# DATABASE_URL='mysql://database_user:database_password@database_host:database_port/database_name'

# Optional database variables
DB_HOST='mysql'
# DB_PREFIX='wp_'

WP_ENV='development'
WP_HOME='https://<Public DNS Address>'
WP_SITEURL="${WP_HOME}/wp"

# Specify optional debug.log path
# WP_DEBUG_LOG='/path/to/debug.log'

# Generate your keys here: https://roots.io/salts.html
AUTH_KEY='generateme'
SECURE_AUTH_KEY='generateme'
LOGGED_IN_KEY='generateme'
NONCE_KEY='generateme'
AUTH_SALT='generateme'
SECURE_AUTH_SALT='generateme'
LOGGED_IN_SALT='generateme'
NONCE_SALT='generateme'

Run "docker-compose up --build" and answer the install questions as you normally would for WordPress.

Let's make the MySql Database persistent

The containers are destroyed everytime the docker-compose process is stopped. That means any information that is not written to disk for contained within the docker-container is also destroyed. So, we need to fix this so that data will persist beyound each cycling of docker-compose up or "cntl c".

Create mysql.dockerfile

Do a "control-c" to bring down the containers. Run the following commands.

mkdir mysql
touch mysql.dockerfile

Copy the following configuration into the mysql.dockerfile

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
# add docker user
#USER ${UID}:${GID}
#WORKDIR /var/lib/mysql

Update bedrock/config/environments/development.php by adding the following section. The development.php and staging.php, and eventually production.php are like the wp-config.php. The only difference is that every statement like "define" is preceded by "Config::" in the section.

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

Update the docker-compose.yml to reflect the mysql.dockerfile build process.

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

Bring down the docker-compose with "control-c" and look at the mysql directory. It will show that it is owned by 999:ec2-user. Let's fix that. Uncomment the add docker user section.

sudo chown -R ec2-user:ec2-user mysql
docker-compose up --build

How to use the wp-cli functionality

First, I like to create a bedrock/src folder. You can place commercial 3rd party themes and plugins in this folder. Next, you can start running wp-cli commands, including installing and updating commercial 3rd party themes and plugins.

One of the reasons you would want to use the wp-cli is the file sizes of third-party commercial plugins and themes. You will have to fuss with the php.ini max_file_uploads parameter. Try the following set of commands just to get started:

docker-compose up -d --build
docker-compose run --rm wp plugin list

Congratulations, you're ready to start developing WordPress using VSCode on remote EC2 instances. It's been a long journey. And I want to thank you for finishing it with me. The good news is that you now have a git repository that you can use to create new baselines.

Remote WordPress Dev using VSCode and docker on AWS EC2

Zachary Alexander — Mon, 23 Aug 2021 17:28:44 +0000

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

Log in to the AWS Console
Import the SSH Public Key as the EC2 key pair
Provision an Amazon Linux 2 AMI
Increase the storage to 30 GiB
Choose the public key you imported in step 1.
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.

Install Remote Development VSCode Package
Remote-SSH: Add NEW SSH HOST
Enter SSH Command
Select Configuration File Update
Click the green box in the lower left-hand corner
Select alias or the name you chose for the connection.
Click on file explore, should read you are connected to remote host
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

Login to AWS CodeCommit Console
Create a CodeCommit Repository
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

touch wordpress/wp-config.php
copy the contents of the infobox to wp-config.php
add the following code to wp-config.php in front of the no editing after this.
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.