Build WordPress environment with Docker (Local) and AWS (Production)

As the title suggests, I built a WordPress environment with Docker and AWS, so I will summarize the procedure.

The contents to be summarized are as follows.

--Build WordPress Local environment with Docker --Compile scss and js with Webpack and output to themes directory --scss and js work in the assets directory --Development files are managed by Git --Building a WordPress Production environment on AWS --Install WordPress and MySQL on EC2 Instance with Public Subnet and Private Subnet respectively --Local work is reflected when Git is placed on EC2 Instance and the development file is pulled.

Local environment

--Build WordPress Local environment with Docker --Compile js and scss files with Webpack and output to themes

Docker image version

image: mysql:8.0.22
image: wordpress:latest

docker-compose.yaml

version: '3'

services:
  db:
    image: mysql:8.0.22
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: admin
      MYSQL_PASSWORD: password
    networks:
      - wpsite
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wpsite
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./../src:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: admin
      WORDPRESS_DB_PASSWORD: password
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

Development work

--The scss and js work is done in the assets directory (assets/css/, assets/js/) --Start Webpack in the assets directory --If you change scss and js, it will be automatically compiled and output to themes. --js is split by runtime.js, vendors.js and index.js --install jQuery

javascript:webpack.config.js

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const themeName = 'original';

module.exports = {
  mode: 'production',
  entry: {
    index: ['./js/index.js', './css/style.scss'],
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`),
    publicPath: '/',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

webpack start command

$ cd assets
$ npm start

Local environment

1. Go to the / docker directory and start docker (docker-compose up -d)
2. http: // localhost: 8000 / is the wordpress local URL
3. http: // localhost: 8080 / is the local URL of phpmyadmin

tree

--compile the assets/js file to src/wp-content/themes/original/js with webpack

├── assets
│   ├── css
│   │   └── style.scss
│   ├── js
│   │   └── index.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   └── webpack.config.js
├── docker
│   └── docker-compose.yaml
└── src
    ├── index.php
    ├── wp-admin
    ├── wp-config-sample.php
    ├── wp-content
        ├── index.php
        ├── languages
        ├── plugins
        ├── themes
            ├── index.php
            ├── original
                └── css
                    └── style.css
                └── js
                    └── index.js
                    └── runtime.js
                    └── vendors.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker command

Container display

$ docker ps

image list

$ docker images

Container startup

--When you run -d, the container starts in the background and keeps running.

$ docker-compose up -d

Container stop

$ docker-compose down

Production environment

--Build on AWS

• Public Subnet --Install Apache to make it a web server --Allow communication from the outside with Internet Gateway
• Private Subnet --Allows communication from the outside via NAT Gateway, but not communication from the subnet --Install MySQL to make it a DB server

Diagram

Login with SSH

$ ssh -i {Private key}.pem ec2-user@{IPv4 public IP}

Use the web server as a stepping stone to SSH into the DB server and install MySQL

--DB server is inbound and not connected to the internet --Since inbound SSH connection is allowed, SSH login using the web server as a stepping stone --Place the pem key on the web server to log in with SSH --Enable NAT Gateway to connect to the Internet through Public Subnet --Log in to the DB server and install MySQL

Copy the pem key to the web server with the scp command and place it

$ scp -i {Private key}.pem {Private key}.pem ec2-user@{IPv4 public IP}:~/

SSH login to DB server

$ ssh -i {Private key}.pem ec2-user@{Private IPv4 address}

Reference site

-Stumbled by replacing MariaDB on Amazon Linux2 with MySQL -How to check the initial password of AWS EC2 AmazonLinux2 MySQL root user

MySQL command

Start MySQL

$ sudo service mysqld start

Check if MySQL is running

$ systemctl status mysqld.service

Log in to MySQL

$ mysql -u root -p

Change the default password

mysql> set password for 'root'@'localhost' = '********';

Create database wordpress

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

Set user ID and PW

mysql> create user '{User ID}'@'%' identified by '{password}';

Grant permissions to users

• You cannot connect to the Wordpress database without granting permissions.

mysql> grant create on *.* to {User ID};

Check if the user was created

mysql> select user, host from mysql.user;

Reference site

--Syntax error when trying to change root password in mysql -The story that user registration could not be done with GRANT in MySQL8.0

Install WordPress

--SSH login to EC2 instance with Apache installed --install php on web server from amazon-linux-extras repository --install of library corresponding to php7.4 --Install WordPress --Place WordPress itself in a location visible to Apache (/ var/www/html /) --Change file owner to apache --The WordPress administration screen is displayed with a public IPv4 address

View software list for amazon-linux-extras repository

$ amazon-linux-extras

install php7.4

$ sudo amazon-linux-extras install -y php7.4

Install library for php7.4

$ sudo yum install -y php php-mbstring

Install WordPress

$ wget https://wordpress.org/latest.tar.gz

Unzip the installed folder

$ tar -xzf latest.tar.gz

Place WordPress itself in a location visible to Apache (/ var/www/html /)

$ cd wordpress/
$ sudo cp -r * /var/www/html/

Change file owner to apache

$ sudo chown apache:apache /var/www/html/ -R

Reference site

-Tutorial: Hosting WordPress Blogs with Amazon Linux

I was addicted to WordPress and database connection errors

I installed WordPress and was addicted to not being able to connect to the database on the management screen. As a workaround, I didn't grant permissions to the mysql user ID.

Grant permission to use the database part1

Error statement

"Does user xxx have permission to use the database wordpress?"?」
```

 Grant permissions to users
 * You cannot connect to the Wordpress database without granting permissions.

```
mysql> grant create on *.* to {User ID};
```

#### Grant permission to use the database part2


#### **`Error statement`**
``` terminal

WordPress database error: [SELECT command denied to user '{User ID}'@'{host}' for table 'wp_options']

Grant permissions to users to write the created database

mysql> grant all on wordpress.\* to '{User ID}'@'{host}';

When communication from the web server to the DB server is not possible

Error statement

Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory

Change plugin from "caching_sha2_password" to "mysql_native_password"

mysql> ALTER USER '{User ID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';

Reference site

--Cannot log in to MySQL with Sequel Pro

• Medial Diagnosis And Treatment

Install git on EC2

SSH login to EC2 Instance

$ sudo yum -y update
$ sudo yum install git

Connect to a GitHub account (see the reference site below) The directory where you ran the git clone will be the/var/tmp directory.

Change Apache's DocumentRoot

--By default, the / var/www/html file is displayed on the page, so change it to read the file pulled by git (see the reference site below).

Copy the / var/www/html file to/var/tmp/{repository name/src}

$ cp -pR /var/www/html/* /var/lib/{Repository name/src}/

Rewriting the configuration file /etc/httpd/conf/httpd.conf

DocumentRoot "/var/tmp/{Repository name/src}"

<Directory "/var/tmp/{Repository name/src}">

Restart Apache

$ sudo systemctl restart httpd

Change the owner of the created folder / file to apache

$ sudo chown apache:apache /var/tmp/{Repository name/src}

Grant authority

$ sudo chmod 600 /var/tmp/{Repository name/src}

Reference site

-Create GitHub user account and GitHub repository + Example procedure to push from AWS EC2 to GitHub repository -[Apache] Let's change DocumentRoot -Build and publish WordPress development environment using Redmine, Git, Jenkins on AWS (EC2)

That is all. Now, if you git pull in/var/tmp/{repository name/of EC2 Instance of Public Subnet, the development code will be reflected.