Go back

基于WordPress搭建电商网站

Table of contents

Open Table of contents

网站环境配置

注册域名

这里使用之前已经注册好的一个域名，.top 域名相对便宜很多，个人站很合适。

购买云服务器

我们选择的是一台腾讯云在中国香港地区的 2 核 4G 的云服务器，选择在香港地区可以免去网站备案的手续，付费方式选择按量付费。

远程登录云服务器

使用腾讯云提供的 orcaterm 远程登录云服务器。

安装 Docker

按照 Docker 官网步骤安装 Docker Engine 和 Docker Compose。

  1. 设置存储库：

（1）更新apt包索引和安装包，允许 apt 使用一个通过 HTTPS 的存储库：

Terminal window
sudo apt-get update
sudo apt-get install ca-certificates curl gnupg

（2）添加 Docker 的官方 GPG 密钥：

Terminal window
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg

（3）设置存储库：

Terminal window
echo "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
  1. 安装 Docker 引擎：

（1）更新 apt 包索引:

Terminal window
sudo apt-get update

（2）安装 Docker Engine、containerd 和 Docker Compose：

Terminal window
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

（3）创建 hello-world 容器验证 Docker Engine 安装是否成功：

Terminal window
sudo docker run hello-world

配置 Git

在 GitHub 创建一个私有仓库，并通过加入合作者的方式协同开发。

  1. 生成 SSH 密钥：
Terminal window
ssh-keygen -t rsa -b 4096 -C "email"
cat ~/.ssh/id_rsa.pub
  1. 在 GitHub 添加公钥： 到 GitHub - Settings - SSH and GPG keys，选择 New SSH key，添加生成的 SSH

  1. 配置 Git：
Terminal window
ssh -T [email protected]
git config --global user.name {username}
git config --global user.email {email}

使用 Docker 和 Nginx 配置网站

从 GitHub 克隆仓库到云服务器， 仓库的主要内容包含 docker-compose.yml 配置文件以及 nginx 的配置文件。

  1. MySQL 服务：将数据库文件挂载到 db_data 数据卷，并复制到当前目录下的 db 目录下，便于迁移。
  mariadb:
    image: mariadb
    restart: always
    environment:
      ...
    volumes:
      - db_data:/var/lib/mysql
      - ./db:/var/lib/mysql
  1. WordPress 服务：使用 wordpress:php8.1-apache 镜像安装 WordPress。将Wordpress 数据挂载到数据卷，并复制到当前目录下的 wordpress 目录下，便于迁移站点。
  wordpress:
    image: wordpress:php8.1-apache
    restart: always
    stdin_open: true
    tty: true
    environment:
      ...
    volumes:
      - wordpress_data:/var/www/html
      - ./wordpress:/var/www/html
  1. certbot服务：我们选择使用免费的 Let’s Encrypt 证书，利用 certbot 镜像安装。将生成的SSL证书文件复制到当前目录下的 certbot 目录下，为后续 Nginx 配置证书做准备。
  certbot:
    image: certbot/certbot:latest
    command: ...
    volumes:
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/logs:/var/log/letsencrypt
      - ./certbot/data:/var/www/html
  1. Nginx 服务：创建 nginx/conf 目录，在该目录下创建 default.conf 配置文件，编写 nginx 配置文件，设置 server_name 为注册的域名。
server {
  listen [::]:80;
  listen 80;
  server_name okito.top;
  return 301 https://okito.top$request_uri;
}
server {
  listen [::]:443 ssl http2;
  listen 443 ssl http2;
  server_name okito.top;
  ssl_certificate /etc/nginx/ssl/live/okito.top/fullchain.pem;
  ssl_certificate_key /etc/nginx/ssl/live/okito.top/privkey.pem;
  root /var/www/html;
  index index.php;
  location ~ /.well-known/acme-challenge {
    allow all;
    root /var/www/html;
  }
  location / {
    try_files $uri @apache;
  }
  location ~ ^/.user.ini {
    deny all;
  }
  location ~* .(svg|svgz)$ {
    types {}
    default_type image/svg+xml;
  }
  location = /favicon.ico {
    log_not_found off;
    access_log off;
  }
  location = /robots.txt {
    allow all;
    log_not_found off;
    access_log off;
  }
  location @apache {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
    proxy_pass http://wordpress:80;
  }
  location ~[^?]*/$ {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
    proxy_pass http://wordpress:80;
  }
  location ~ .php$ {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
    proxy_pass http://wordpress:80;
  }
}

编写 nginx 服务，使用数据卷技术，将写好的配置文件复制到 nginx 容器内的目录下，将 certbot 容器生成的 SSL 证书文件复制到 nginx 容器内的目录下。

  nginx:
    image: nginx:latest
    restart: unless-stopped
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./nginx/conf:/etc/nginx/conf.d
      - ./certbot/conf:/etc/nginx/ssl
      - ./certbot/data:/var/www/html

完整的 docker-compose.yml 文件如下：

services:
  wordpress:
    container_name: wordpress
    image: wordpress:php8.1-apache
    restart: always
    stdin_open: true
    tty: true
    environment:
      WORDPRESS_DB_HOST: mariadb
      WORDPRESS_DB_USER: db_user
      WORDPRESS_DB_PASSWORD: db_user_pass
      WORDPRESS_DB_NAME: db_name
    volumes:
      - wordpress_data:/var/www/html
      - ./wordpress:/var/www/html
  mariadb:
    container_name: mariadb
    image: mariadb
    restart: always
    environment:
      MYSQL_DATABASE: db_name
      MYSQL_USER: db_user
      MYSQL_PASSWORD: db_user_pass
      MYSQL_RANDOM_ROOT_PASSWORD: 'root_pass'
    volumes:
      - db_data:/var/lib/mysql
      - ./db:/var/lib/mysql
  nginx:
    container_name: nginx
    image: nginx:latest
    restart: unless-stopped
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./nginx/conf:/etc/nginx/conf.d
      - ./certbot/conf:/etc/nginx/ssl
      - ./certbot/data:/var/www/html
  certbot:
    container_name: certbot
    image: certbot/certbot:latest
    command: certonly --webroot --webroot-path=/var/www/html --email [email protected] --agree-tos --no-eff-email -d okito.top
    volumes:
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/logs:/var/log/letsencrypt
      - ./certbot/data:/var/www/html
volumes:
  db_data:
  wordpress_data:
  1. 添加域名解析：将注册的域名解析到购买的云服务器的公网 IP，如下所示。

  1. 启动容器：使用以下命令启动容器，开启各项服务。
Terminal window
sudo docker compose up -d

查看运行的容器：certbot 容器申请完 SSL 证书就停止工作了，这里看不到属于正常现象。

此时访问域名即可访问网站，图为配置好的网站。

电商平台后台管理界面

后台管理界面如下，外观主题为 Elementor，插件使用的是 WooCommerce。

Elementor 外观主题为我们提供了一个简单而强大的工具，我们用户能够以直观的方式创建定制化的WordPress网站，无需编码知识。我们完全可以通过拖放操作和预设计模板来构建吸引人的页面，并使用丰富的主题设置选项进行个性化定制。

WooCommerce 是一个功能强大且灵活的电子商务插件，为 WordPress 用户提供了建立和管理在线商店的完整解决方案。无论是小型企业还是大型电子商务网站，WooCommerce 都为用户提供了一个可靠的平台来展示和销售他们的产品和服务。

这里不过多介绍了。

以上。

Share this post on:
Share this post via email
Previous Post
用C语言实现面向对象风格的泛型容器库
Next Post
开发环境配置