Use docker to implement wordpress, nginx configuration https

Recently, when I checked the loading problem of the website, I found that there was a " Mixed Content" problem on the website, so I needed to find a way to solve this problem. Let's first understand Mixed Contentwhat the "" problem is, and then provide a solution. Click to view the original text .

What causes Mixed Content?

Mixed Content (mixed content) is when there are https and http in the process of loading js, css, pictures, font files and other resource files in a front-end page, which will lead to mixed content errors. Modern browsers may block such content or display a warning about such content, alerting the user that this page contains unsafe content. The solution is also very simple, just unify the request method. Based on this, we need to implement https processing on the existing wordpress site.

WordPress full site https

This article introduces how to realize the optimization of the whole station through dockercooperation to prevent mistakes. I am here to configure the docker container service by using docker-compose.wordpressnginxHTTPSMixed Content错

1. Create wordpress service

Add a configuration file under the existing wordpress folder docker-compose.yml, the content is as follows:

version: '3.3'
services:
   db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: wordpress # wordpress数据库名
      MYSQL_USER: wordpress  # 创建默认的mysql用户名
      MYSQL_PASSWORD: wordpress  # 创建默认用户的密码
    volumes:
      - /opt/mysql:/var/lib/mysql
  wordpress:
     depends_on:
       - db
     image: wordpress:latest
     container_name: "enjoytoday"
     ports:
       - 8000:80
     restart: always
     environment:
       WORDPRESS_DB_HOST: db
       WORDPRESS_DB_USER: wordpress 
       WORDPRESS_DB_PASSWORD: wordpress 
       WORDPRESS_DB_NAME: wordpress 
       WORDPRESS_WPLANG: zh-CN
     volumes:
       - $PWD/:/var/www/html

As above, run the: command in the existing wordpress directory docker-compose up -d , and then use docker ps -a to view the startup status.

2. Create nginx container

Since the wordpress container is built with the apache service by default, in order to facilitate the management of multiple domain name services, I created an nginx container to do the forwarding service alone. The nginx startup is as follows:

$docker pull nginx:lastest
$docker run -d 
  \-p 80:80 -p 443:443 
  \--name nginxweb
  \ -v /data/nginx/html:/usr/share/nginx/html 
  \ -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 
  \-v /data/nginx/conf/conf.d:/etc/nginx/conf.d 
  \-v /data/nginx/logs:/var/log/nginx 
  \nginx

Configure the server as follows:

server {
   listen 80;
   server_name www.enjoytoday.cn enjoytoday.cn;
   rewrite ^(.*) https://$host$1 permanent;
}

server {
    listen   443 ssl http2;
    server_name www.enjoytoday.cn enjoytoday.cn;
    ssl_certificate /path/fullchain.crt;
    ssl_certificate_key /path/certs/private.pem;
    ssl_session_cache shared:MozSSL:10m;
    ssl_session_timeout 1d;
        ssl_session_tickets off;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

     ssl_prefer_server_ciphers off;
     # 开启OCSP stapling
     ssl_stapling on;
     ssl_stapling_verify on;

    location / {
       proxy_pass http://dockerip:8000;
       proxy_redirect  off;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Host $server_name;
       proxy_set_header X-Forwarded-Proto https;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
       proxy_read_timeout 86400;
    }
}

I'm using a ssl certificate that can be renewed for free: Let's Encrypt .

3. Modify the website configuration wp-config.php, under the root directory

# 用于控制文件访问权限，适用于上传、更新插件
define('FS_METHOD', "direct");
define("FS_CHMOD_DIR", 0777);
define("FS_CHMOD_FILE", 0777);

# 用于配置ssl
define( 'FORCE_SSL_ADMIN', true );

if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false){
  $_SERVER['HTTPS'] = 'on';
  $_SERVER['SERVER_PORT'] = 443;

}

if (isset($_SERVER['HTTP_X_FORWARDED_HOST'])) {
  $_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];

}

4. All permissions of the configuration file

When we have configured as above and found that the picture cannot be uploaded and wp-content不能创建文件夹 such an error occurs, it may be because we use the volume mount code instead of the code that exists in the image itself to cause the problem that the user of the file is wrong. Just modify it as follows:

$docker exec -it enjoytoday /bin/bash # 进入容器
$cd /var/www/html  # 进入项目目录
$ps aux | egrep '(apache|httpd)'  # 查询用户
$chown -R www-data /var/www/html

3. Visit the website