如何使用 DigitalOcean 和 Buddy 自动部署 Wordpress

简介

在本教程中，您将使用Buddy CI/CD，一个提供持续集成和持续部署解决方案的用户友好型工具自动部署 WordPress。

与许多其他 CI/CD 工具相比，Buddy 对 DevOps 经验的要求较低。它允许开发人员在可视化图形用户界面中通过拖放操作创建交付管道。这种图形用户界面利用预先配置的操作（构建、测试、部署等），其方法类似于 DigitalOcean 的交互式 Droplet 配置。这意味着新手和专业开发人员都可以使用 Buddy 发布更多软件，同时减少错误。

完成本教程后，您就可以在本地终端通过一条命令执行 WordPress 部署。为了更好地了解情况，您将构建一个更高级的基于 Sage 的 WordPress 主题，该主题需要多个构建步骤才能部署到 WordPress 服务器上。

先决条件

在本地计算机上安装 Docker 和 Docker Compose。在 Windows 上，安装 Docker Desktop for Windows，其中包括这两个工具。在 macOS 上，安装 Docker Desktop for Mac。对于 Ubuntu 和其他 Linux 操作系统，[可参考我们的如何安装 Docker和如何安装 Docker Compose教程。
在本地计算机上安装 Git。Git 版本控制入门是一个有用的资源。
在线 Git 提供商账户，如 GitHub 或 GitLab。
在本地计算机上安装 Composer。本教程集包括在多种 Linux 发行版上安装 Composer 的说明。在 macOS 上，你可以从 Composer 网站下载安装程序，或使用 Homebrew 软件包管理器。
在本地计算机上安装 Yarn 软件包管理器。
在 Linux 上，可以按照我们的教程如何安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈中的步骤 3 安装。在 macOS 上，您可以使用 Homebrew 软件包管理器安装 PHP。
在本地计算机上安装 Node.js 14+ 版本。本教程集可帮助您在 Linux 上安装 Node.js。在 macOS 上，您也可以使用 Homebrew 软件包管理器安装 Node.js。

<$>[注］注：本教程在 Node.js 版本 14.13.0、npm 版本 6.14.8 和 PHP 版本 7.4.10 上进行了测试。 <$>

在 DigitalOcean Droplet 上安装 WordPress。这是您在本地创建自定义主题后部署主题的地方。如果您想访问现成的WordPress安装，DigitalOcean Marketplace提供一键式应用程序，让您开始使用WordPress。您也可以按照我们的教程如何在LAMP堆栈上安装Wordpress中的说明，在Droplet上安装WordPress。
带有指向 Wordpress Droplet IP 的 A 记录的全称域名。本教程可帮助你在DigitalOcean设置主机名。
用于API的DigitalOcean个人访问令牌。

步骤 1 — 使用 Docker 安装 WordPress

在这一步中，您将从 Docker 中提取 WordPress 镜像并开始构建。

首先，使用以下命令验证 Docker 是否正在运行：

1docker info

您将收到如下输出：

 1[secondary_label Output]
 2Client:
 3 Debug Mode: false
 4
 5Server:
 6 Containers: 0
 7  Running: 0
 8  Paused: 0
 9  Stopped: 0
10 Images: 0
11 Server Version: 19.03.12
12 Storage Driver: overlay2
13  Backing Filesystem: extfs
14  Supports d_type: true
15  Native Overlay Diff: true
16 Logging Driver: json-file
17 Cgroup Driver: cgroupfs
18 Plugins:
19  Volume: local
20  Network: bridge host ipvlan macvlan null overlay
21  Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
22 Swarm: inactive
23  ...

确认 Docker 正在运行后，下载最新版本的 WordPress 镜像：

1docker pull wordpress

接下来，在工作区为项目创建一个文件夹：

1mkdir docker-wordpress-theme

导航至新项目文件夹：

1cd docker-wordpress-theme

现在你需要定义你的构建。使用 nano 或你喜欢的文本编辑器打开并创建一个名为 docker-compose.yml 的文件：

1nano docker-compose.yml

在文件中添加以下定义。这些定义描述了 Docker Compose 的版本和要启动的服务。在本例中，您将启动 WordPress 和 MySQL 数据库。请确保将突出显示的字段替换为您的凭据：

 1[label docker-compose.yml]
 2version: "3.1"
 3
 4services:
 5  wordpress:
 6    image: wordpress
 7    restart: always
 8    ports:
 9      - 8080:80
10    environment:
11      WORDPRESS_DB_HOST: db
12      WORDPRESS_DB_USER: exampleuser
13      WORDPRESS_DB_PASSWORD: examplepass
14      WORDPRESS_DB_NAME: exampledb
15    volumes:
16      - wordpress:/var/www/html
17      - ./sage:/var/www/html/wp-content/themes/sage/
18  db:
19    image: mysql:5.7
20    restart: always
21    environment:
22      MYSQL_DATABASE: exampledb
23      MYSQL_USER: exampleuser
24      MYSQL_PASSWORD: examplepass
25      MYSQL_RANDOM_ROOT_PASSWORD: "1"
26    volumes:
27      - db:/var/lib/mysql
28
29volumes:
30  wordpress:
31  db:

这里您要定义 Docker 将在服务中启动的 "图像"，然后设置端口和环境变量

请注意，您正在挂载一个尚未创建的名为 sage 的文件夹。这将是你的自定义主题，你现在将创建它。

Step 2 &mdash；创建自定义 WordPress 主题

在本步骤中，您将创建一个自定义 Wordpress 主题。然后，您将创建一个 CI/CD 管道，这样只需一条命令就能将您在本地做出的更改推送到 Wordpress 服务器。

让我们在本地 WordPress 安装中安装 Sage 框架，开始构建我们的自定义主题。该主题使用 Node.js 和 Gulp 来执行开发和构建功能。生产服务器上不会安装任何构建依赖项，所有生产构建任务都将在远程持续集成服务器 Buddy 上执行。

确保您在项目文件夹中：

1cd docker-wordpress-theme

使用 Composer 创建新的 Sage 主题：

1composer create-project roots/sage

一切配置妥当后，将出现以下输出：

 1[secondary_label Output]
 2Installing roots/sage (9.0.9)
 3  - Installing roots/sage (9.0.9): Loading from cache
 4Created project in /home/mike/Projects/buddy/github/sage
 5Loading composer repositories with package information
 6Installing dependencies (including require-dev) from lock file
 7Package operations: 29 installs, 0 updates, 0 removals
 8  - Installing composer/installers (v1.6.0): Downloading (100%)
 9  - Installing symfony/polyfill-mbstring (v1.10.0): Downloading (100%)
10  - Installing symfony/contracts (v1.0.2): Downloading (100%)
11  - ..........

然后，安装程序会要求您选择要加载的框架：

 1[secondary_label Output]
 2- Theme Name > Sage Starter Theme
 3- Theme URI > https://roots.io/sage/
 4- Theme Name [Sage Starter Theme]:
 5- Theme Description > Sage is a WordPress starter theme.
 6- Theme Version > 9.0.9
 7- Theme Author > Roots
 8- Theme Author URI > https://roots.io/
 9- Local development URL of WP site > http://localhost:8080
10- Path to theme directory > /wp-content/themes/sage
11- Which framework would you like to load? [Bootstrap]:
12    [0] None
13    [1] Bootstrap
14    [2] Bulma
15    [3] Foundation
16    [4] Tachyons
17    [5] Tailwind

<$>[注］ 注意： 确保本地开发 URL 与端口匹配。 <$>

按1键选择 Bootstrap 框架。系统会询问你是否允许覆盖一些文件。键入y确认并继续：

 1[secondary_label Output]
 2 Are you sure you want to overwrite the following files?
 3 - scripts/autoload/_bootstrap.js
 4 - styles/autoload/_bootstrap.scss
 5 - styles/common/_variables.scss
 6 - styles/components/_comments.scss
 7 - styles/components/_forms.scss
 8 - styles/components/_wp-classes.scss
 9 - styles/layouts/_header.scss
10
11 (yes/no) [no]:

现在您已经具备了自定义 WordPress 主题的基础。下一步，您将构建并启动主题，然后使用 Git 对其进行版本控制。

Step 3 &mdash；构建并启动自定义 WordPress 主题

在这一步中，您将安装所有构建依赖项，创建生产构建，并在本地 Docker 容器中启动 WordPress。

导航至 Sage 文件夹：

1cd ./sage

安装 node-sass 二进制文件以防止安装失败（"package.json "的其他部分也将被安装）：

1yarn add node-sass -D

运行生产构建，编译所有 Sass/SCSS 文件并对 CSS 和 JS 进行最小化：

1yarn build:production

创建完成后，退出主题文件夹，使用 Docker Compose 启动 WordPress 实例：

1cd ..
2docker-compose up -d

在 Docker 环境中启动 WordPress 只需几秒钟。现在在网络浏览器中打开URL http://localhost:8080，访问本地WordPress网站。由于这是第一次启动 WordPress，系统会提示你创建一个管理员账户。现在就创建一个。

创建账户并登录后，前往仪表板上的 "外观">"主题 "页面。你会发现几个预装的主题，包括我们刚刚创建的圣贤主题。点击** 激活** 按钮，将其设置为当前主题。您的主页将看起来像这样：

贤者主题预览](assets/67489/themepreview.png)

现在，您已经创建并激活了一个自定义主题。下一步，您将把项目置于版本控制之下。

第 4 步 &mdash；将 WordPress 项目上传到远程存储库

版本控制是 CI/CD 工作流程的基石。在此步骤中，您将把项目上传到 Buddy 平台可以访问的远程 Git 仓库。Buddy 与许多流行的 Git 提供商集成，包括

GitHub
GitLab
Bitbucket
私人托管的 Git 仓库

在你选择的平台上创建一个远程仓库。在本指南中，我们将使用 GitHub。点击此处阅读如何使用 Github UI 创建新仓库。

然后在终端中，在项目的远程目录下初始化 Git：

1git init

添加新创建的远程版本库。将高亮显示的部分替换为您自己版本库的 URL：

1git add remote https://github.com/user-name/your-repo-name.git

在推送项目之前，有些文件需要从版本控制中排除。

创建一个名为 .gitignore 的文件：

1nano .gitignore

添加以下文件名：

1[label ./.gitignore]
2.cache-loader
3composer.phar
4dist
5node_modules
6vendor

保存并关闭文件。

现在，您可以将项目添加到版本控制下，并将文件提交到 GitHub 上的版本库中：

1git add .
2git commit -m 'my sage project'
3git push

现在，您已经使用 Sage 框架构建了一个自定义 WordPress 主题，并将代码推送到远程仓库。现在，您将使用 Buddy 将该主题自动部署到 WordPress 服务器上。

第 5 步 — 使用 Buddy 自动部署 WordPress

如果您以前未使用过 Buddy，请使用您的 Git 提供商证书或电子邮件地址注册。试用期为 14 天，没有资源限制，试用期结束后可享受免费计划，每个月可执行 5 个项目和 120 次执行，这对于我们的需求来说绰绰有余。

首先，将 Buddy 与您的版本库同步。在 Buddy 用户界面中，点击创建新项目 ，选择 Git 提供商，然后选择本文第一节中创建的版本库。

接下来，系统会提示您创建交付管道。管道是对版本库代码执行任务（如构建、测试或部署）的一组操作。

需要配置的主要设置有

Buddy 将从哪个分支部署代码--在本例中，将其设置为 "master
管道触发模式"--设置为 "推送时"，以便在每次推送到选定分支时自动执行管道。

添加管道后，您需要创建四个操作：

1.安装所需的 PHP 软件包的PHP 操作 2.一个 Node 操作，用于下载依赖项并准备构建以进行部署 3.一个Droplet 动作，将构建代码直接上传到您的 DO Droplet。 4.带有脚本的SSH 动作，用于激活主题。

根据版本库的内容，Buddy 会自动建议要执行的操作。从列表中选择 PHP。

操作选择屏幕](assets/67489/actionselection.png)

点击该操作将打开其配置面板。在终端部分输入以下命令：

1[environment second]
2# navigate to theme directory
3cd sage
4
5# install php packages
6composer validate
7composer install

保存并运行管道以确保其正常工作：

管道执行

<$>[注］注： Buddy 使用预装框架的隔离容器进行构建。下载的依赖项缓存在容器中，这意味着您无需再次下载。将其视为本地开发环境，团队中的每个人都能保持一致。 <$>

接下来，添加 Node.js 操作。为了使主题能正常显示，我们需要编译和最小化资产，即 SCSS/SASS 和 JavaScript 文件。

首先，将环境设置为** 节点最新** 。

现在，您必须添加几条命令。这些命令将安装必要的依赖项并执行构建。

像以前一样，将它们添加到终端盒中：

1[environment second]
2# navigate to theme directory
3cd sage
4
5# install packages
6yarn install
7
8# Create production build
9yarn build:production

再次保存并运行该操作以确保其正常工作。

接下来，在 Node.js 构建后添加Droplet 操作。如果您从未在 Buddy 中使用过 DigitalOcean，将会出现一个向导，指导您完成集成。完成此步骤后，请按如下方式定义身份验证详细信息：

将源路径 设置为 "sage"。
选择Buddy的SSH密钥 验证模式，因为这是最容易设置的模式。只需通过 SSH 登录 Droplet 服务器，并执行** Buddy's key** 代码段中显示的命令。

执行这些命令后，返回浏览器并单击远程路径 浏览按钮 - 您将能够浏览 Droplet 的文件系统并访问正确的部署文件夹。默认路径为 /var/www/html/wp-content/themes/sage。

您还需要访问忽略路径 部分，并提供以下信息以防止上传 Node.js 依赖项：

1[environment second]
2.cache-loader/
3node_modules/

完成后，单击测试操作 按钮，验证一切配置是否正确。

最后，再添加一个操作，使用WP-CLI命令在WordPress Droplet上激活主题。在管道页面上，添加SSH 操作，并在** 命令** 部分输入以下命令：

1sudo -u www-data -- wp theme activate sage/resources

确保设置了正确的工作目录 ，否则命令将无法运行。

由于您已在之前的设置中配置了 Buddy 的 SSH 密钥，因此无需再做其他任何操作。或者，您可以选择私人SSH密钥 ，然后上传您的DigitalOcean私人密钥，并使用该密钥连接到您的Droplet。Buddy的SSH密钥更简单，也同样安全。

现在，您的完整管道将包含 4 个操作：PHP">"节点">"Droplet">"SSH"。单击运行管道 按钮，一次性测试所有操作。您将在每个阶段收到一个绿色复选标记：

管道执行屏幕](assets/67489/pipelineworking.png)

首次执行时，Buddy 会将版本库中的所有文件部署到所选版本。以后的部署只会更新已更改或已删除的文件。这一功能大大缩短了上传时间，因为您不必在每次更新时都从头开始部署所有文件。

进入您托管的 WordPress 控制面板，刷新主题页面。您将看到自己的贤者主题。现在就激活它。

现在，您的托管主页将与本地主页一致。

我们的管道已经建立，本地和远程机器也已同步。现在，让我们测试整个工作流程。

第 6 步 — 测试 Buddy 的自动部署工作流程

在这一步中，您将对主题做一个小改动，然后将这些改动部署到 WordPress 服务器上。

回到本地终端，运行这条 yarn 命令：

1yarn start

这将在 localhost:3000启动一个实时代理开发服务器。您对主题所做的任何更改都将自动反映在该窗口中。在运行生产构建脚本之前，localhost:8080上的页面将保持不变。

让我们对 CSS 稍作修改，测试一下我们的管道。

打开 Sage 主题的 main.scss 文件：

1nano ./sage/resources/assets/styles/main.scss

插入以下代码，为网站字体添加一些微妙的绿色和下划线：

 1[label ./sage/resources/assets/styles/main.scss]
 2.brand {
 3  @extend .display-3;
 4
 5  color: #013d30;
 6}
 7
 8.entry-title {
 9  @extend .display-4;
10
11  a {
12    color: #015c48;
13    text-decoration: underline;
14  }
15}
16
17.page-header {
18  display: none;
19}

保存并关闭文件。

提交这些更改并上传到你的软件仓库：

1git add .
2git commit -m "minor style changes"
3git push

一旦代码上传到版本库，Buddy 就会自动触发管道，逐一执行所有操作：

等待管道完成，然后刷新 WordPress Droplet 主页，查看更新。

更新的 WP Droplet](assets/67489/updateddroplethomepage.png)

现在，您的管道正在将更改从本地机器推送到 GitHub，再从 GitHub 推送到您的 WordPress 生产服务器，所有这些都由一条 git 命令触发。

结论

Buddy 是一款用户友好且功能强大的 CI/CD 工具。Buddy 甚至有一段视频展示了如何使用其界面快速创建管道。

通过自动化开发工作流程，您可以专注于实施自定义主题或插件的样式和功能，而无需在手动部署上浪费时间。CI/CD 工作流程还能大大降低人工出错的风险。此外，自动化还能让您在每次更改时通过运行单元测试和PHP Sniffer等分析工具进一步提高代码质量。

您可以通过设置一个高级分支策略和一个暂存服务器，在将新代码部署到生产服务器之前执行质量控制检查，从而进一步完善本教程。这样，您就可以更频繁地发布更好的软件，而不会失去动力。