Front Docker was introduced some basic knowledge and use, for new technology or new system, want to try to run Docker is a best choice, the easier, also easy to abandon, if the system or application to run can be not need can be directly deleted after, to the host machine without any influence, also will not be hosting environment interference. This article will share how to build a WordPress environment using Docker and get it up and running.

WordPress is an open source content management system based on PHP and MySQL that was first released in 2003. It supports 40% of all Web sites, is supported by many Web hosts, is easy to set up, and offers thousands of free themes and plug-ins.

For most people, WordPress is a blogging system, but it is not. It provides a solution for the following needs:

  • Can act as the CMS of the website, edit content, generate static website
  • As the server side, it provides apis for the front end, such as Vue, React, Angular, etc
  • Build portal, community, video and other content sites
  • .

Even if you don’t use (or don’t want to use) WordPress, this article focuses on how Docker builds a runtime environment to execute code. Environment configuration is essential for development, but Docker is worth a try.

The files created in this chapter are available at github.com/QuintionTan… The sample code repository is provided in the wordpress directory

Environmental requirements

The environment you need to configure to run WordPress:

  • Web server, usually Apache
  • PHP runtime and extensions, and then configure the Web server accordingly
  • MySQL or MariaDB defines a new database for use by WordPress
  • WordPress itself, along with all the required themes and plug-ins.

Tools like XAMPP can make your environment easier to configure, but with Docker, you can run WordPress and develop code in a matter of minutes.

Windows users will also find that WordPress runs much faster on Docker-based Linux-based file systems than native NTFS drives.

Docker configuration

Two Docker images need to be extracted:

  • WordPress: The latest image is a good choice, offering stable versions of Debian Linux, Apache, PHP, and wordpress.
  • mysql: WordPress database, select8.0

Start both images and join wPNET in the Docker network.

Docker volumes

Create two Docker volumes:

  • wpdata: Stores data files mounted to the MySQL container/var/lib/mysql
  • wpfiles: WordPress application folder in the root directory of the Apache server/var/www/html.

One might think that mounting a WpFiles volume is an anti-pattern so that the WordPress container is no longer stateless. But WordPress is not a stateless application. Docker is used to simulate an active server environment for development purposes.

Mounting wpFiles volumes has many benefits:

  • Docker starts faster: You don’t have to copy the core WordPress file every time you start the container

  • WordPress applications can be updated automatically: this happens during installation, so it’s useful to copy it during development

If you do not mount the WpFiles volume, you will need to run Docker Pull wordpress frequently to download the latest application image.

Mount the development directory

The wp-Content subdirectory will be created in the project directory on the host PC. This corresponds to the /var/www/html/wp-content directory of the WordPress container, which contains all plug-ins, themes, and uploaded resources.

WordPress developers generally only need to create and modify files in the WP-Content directory.

In addition, for project development, it is easier to commit wP-content files to a Git repository because this directory is the only WordPress folder on the host PC.

Localhost Indicates the replacement of the domain name

WordPress will be launched on the localhost:8001 domain. In actual development, if multiple sites are involved, you don’t want to use ports to switch, and there will be some problems.

  • Browsers may cache files from one site and display them on another.
  • WordPress stores access domain names in its database, so using a domain name that is consistent with the production environment can avoid some problems.

To avoid the above problems, you can configure other domains in the file for development use, which involves changing the native hosts

  • On Linux and macOS, modify the file:/etc/hosts
  • On Windows, modify files:C:\Windows\System32\drivers\etc\hosts

Add a line like 127.0.0.1 devpoint.wordpress at the bottom of the host file and save it. For Windows users you must run nbtstat -r or reboot.

In this way, you can use http://devpoint.wordpress for a visit, instead of http://localhost, in fact both parsing to 127.0.0.1.

Modifying hosts is a common method used by the front-end to simulate a real access.

docker run --mount "src=wpfiles,target=/var/www/html" -v $PWD/wp-content:/var/www/html/wp-content
Copy the code

$PWD references the current directory on Linux and macOS. It is not available on Windows, so you must specify the full path using forward slash notation, as follows:

docker run --mount "src=wpfiles,target=/var/www/html" -v /c/projects/wordpress/wp-content:/var/www/html/wp-content
Copy the code

Docker Compose configuration

Docker Compose is a tool for managing multiple containers with associated volumes and networks. A single configuration file, usually named docker-comemess.yml, defines the container and can override the Dockerfile Settings if necessary. See Docker for WEB Development part II: What is Docker, Mirroring, Choreography?

Create the directory wordpress under the project directory

mkdir wordpress
cd wordpress
Copy the code

Here will be used by the Docker Compose, created in the directory Docker – Compose. Yml file, the code is as follows:

Docker-compose services: mysql: image: mysql:8 container_name: mysql environment: - MYSQL_DATABASE=wpdb - MYSQL_USER=wpdbuser - MYSQL_PASSWORD=devpoint - MYSQL_ROOT_PASSWORD=devpointCn volumes: - wpdata:/var/lib/mysql ports: - "3306:3306" networks: - wpnet restart: on-failure wordpress: image: wordpress container_name: wordpress depends_on: - mysql environment: - WORDPRESS_DB_HOST=mysql - WORDPRESS_DB_NAME=wpdb - WORDPRESS_DB_USER=wpdbuser - WORDPRESS_DB_PASSWORD=devpoint volumes: - wpfiles:/var/www/html - ./wp-content:/var/www/html/wp-content ports: - "80:80" networks: - wpnet restart: on-failure volumes: wpdata: wpfiles: networks: wpnet:Copy the code

Here is a detailed introduction to the above code:

The environment variable

MySQL environment variables include MYSQL_DATABASE, MYSQL_USER, MYSQL_PASSWORD, and MYSQL_ROOT_PASSWORD:

  • MYSQL_DATABASE: Database name, defined here aswpdb
  • MYSQL_USER: Database user name, defined here aswpdbuser
  • MYSQL_PASSWORD: Database connection password, defined asdevpoint
  • MYSQL_ROOT_PASSWORDDatabase:rootUser password, defined asdevpointCnRoot is not used for application connections, but is needed to back up data or perform other database maintenance, so it is also defined here

WORDPRESS_DB_HOST, WORDPRESS_DB_NAME, WORDPRESS_DB_USER, WORDPRESS_DB_PASSWORD

  • WORDPRESS_DB_HOST: connection address, here we define as mysql
  • WORDPRESS_DB_NAME: Connection database name, as defined abovewpdb
  • WORDPRESS_DB_USER: User name for connecting to the databasewpdbuser
  • WORDPRESS_DB_PASSWORD: Indicates the database connection passworddevpoint

Exposure to port

MySQL port 3306 is exposed to the host PC, so it can connect and check the database using any MySQL client.

ports:
      - "3306:3306"
Copy the code

The code above means that port 3306 in the container corresponds to port 3306 on the host.

If you do not want to expose the port to the host, you do not need to correspond to it as follows:

ports:
      - "3306"
Copy the code

In this way, the exposed port is also available to other containers in the Docker network, but it will not be exposed to the host, which can play an isolation effect from the point of view of security. The WordPress container will not be affected, but MySQL clients on the host will not be able to connect to the MySQL database in the container.

Next, the Apache port is exposed. The WordPress container is bound to port 80, and the preceding 80 is the bound host port.

ports:
      - "80:80"
Copy the code

Mount the WordPress volume binding

The WordPress container defines two and the Mysql container defines one:

  • wpfiles: corresponds to the root directory of the Apache server in Docker/var/www/html
  • wp-content: corresponds to Docker/var/www/html/wp-content
  • wpdata: corresponds to Docker/var/lib/mysql
    volumes:
      - wpdata:/var/lib/mysql
    volumes:
      - wpfiles:/var/www/html
      - ./wp-content:/var/www/html/wp-content
Copy the code

Start the WordPress environment

Everything is ready, simple as that! Open a terminal, access the project directory, and type:

docker-compose up
Copy the code

Everything is downloaded and installed automatically, which can take a few minutes the first time because Docker needs to download the image, initialize the database, and copy the application files.

The installation of WordPress

Open the domain name devpoint.wordpress in your browser. When you do this for the first time, you will enter the wordpress installation process:

Enter basic information according to the process to complete the installation.

Now select the theme Appointment Dark to install and enable.

Local WordPress development

You can now add, edit, or remove theme plug-ins in the host PC’s directory, wp-Content.

Management Panel Restrictions

WordPress allows you to install, edit, and delete themes and plug-in files directly from the admin panel, which is allowed on Windows, but Linux and MAC OS users may need to grant permissions to the wp-Content folder of a project by typing the following command on the host:

chmod -R 777 ./wp-content
Copy the code

Subject to make

To start developing a new WordPress theme, create a theme folder in the host directory wp-Content/Themes, such as devpoint, and add a style.css style file:

/* Theme Name: DevPoint Theme Version: 1.0.0 License: MIT */ body {margin: 0px; padding: 30px; background-color: #efefef; Font-family: "Microsoft YaHei", "Microsoft YaHei", "pingfang sc", "宋体", Arial, Helvetica, sans-serif; The line - height: 1.5; color: #212529; }Copy the code

Add an index. PHP file as follows:

<! DOCTYPE html> <html <? php language_attributes(); ? >> <head> <title><? php bloginfo('name'); ? ></title> <link rel="stylesheet" href="<? php bloginfo('stylesheet_url'); ? > "> <? php wp_head(); ? > </head> <body> <header> <h1><? php bloginfo('name'); ? ></h1> <p><? php bloginfo('description'); ? ></p> </header> <main> <? php if ( have_posts() ) : while ( have_posts() ): the_post(); ? > <article id="post-<? php the_ID(); ? >"> <h2><? php the_title(); ? ></h2> <? php the_excerpt(); ? > </article> <? php endwhile; endif; ? > </main> <? php wp_footer(); ? > </body> </html>Copy the code

On the WordPress administration panel, choose Appearance > Themes and activate the theme. After refreshing the WordPress administration panel, you can see the following effect:

Click “Enable” to complete the self-made theme.

conclusion

By now, Docker can basically be used to build simple WEB applications. In front-end development, reasonable use of Docker can reduce many problems caused by the environment.