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

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

完成本教程后，您将能够从本地终端使用单个命令执行 WordPress 部署。 为了更好地了解，您将构建一个更高级的基于 Sage 的 WordPress 主题，需要多个构建步骤才能将其部署到 WordPress 服务器。

先决条件

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


第 1 步 — 使用 Docker 安装 WordPress

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

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

docker info

您将收到如下输出： 

OutputClient:
 Debug Mode: false

Server:
 Containers: 0
  Running: 0
  Paused: 0
  Stopped: 0
 Images: 0
 Server Version: 19.03.12
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Supports d_type: true
  Native Overlay Diff: true
 Logging Driver: json-file
 Cgroup Driver: cgroupfs
 Plugins:
  Volume: local
  Network: bridge host ipvlan macvlan null overlay
  Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
 Swarm: inactive
  ...

现在您已验证 Docker 正在运行，请下载最新版本的 WordPress 映像： 

docker pull wordpress

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

mkdir docker-wordpress-theme

在新项目文件夹中导航： 

cd docker-wordpress-theme

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

nano docker-compose.yml

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

码头工人-compose.yml 

version: "3.1"

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html
      - ./sage:/var/www/html/wp-content/themes/sage/
  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: "1"
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

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

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

第 2 步 — 创建自定义 WordPress 主题

在这一步中，您将创建一个自定义的 wordpress 主题。 然后，您将创建一个 CI/CD 管道，以便您可以使用一个命令将您在本地所做的更改推送到您的 Wordpress 服务器。

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

确保您位于项目文件夹中： 

cd docker-wordpress-theme

使用 Composer 创建一个新的 Sage 主题： 

composer create-project roots/sage

正确配置所有内容后，将出现以下输出： 

OutputInstalling roots/sage (9.0.9)
  - Installing roots/sage (9.0.9): Loading from cache
Created project in /home/mike/Projects/buddy/github/sage
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 29 installs, 0 updates, 0 removals
  - Installing composer/installers (v1.6.0): Downloading (100%)
  - Installing symfony/polyfill-mbstring (v1.10.0): Downloading (100%)
  - Installing symfony/contracts (v1.0.2): Downloading (100%)
  - ..........

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

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

注意： 确保本地开发 URL 与端口匹配。


按 1 选择 Bootstrap 框架。 您将被要求允许覆盖几个文件。 输入 y 确认并继续： 

Output Are you sure you want to overwrite the following files?
 - scripts/autoload/_bootstrap.js
 - styles/autoload/_bootstrap.scss
 - styles/common/_variables.scss
 - styles/components/_comments.scss
 - styles/components/_forms.scss
 - styles/components/_wp-classes.scss
 - styles/layouts/_header.scss

 (yes/no) [no]:

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

第 3 步 — 构建和启动自定义 WordPress 主题

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

导航到 Sage 文件夹： 

cd ./sage

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

yarn add node-sass -D

运行将编译所有 Sass/SCSS 文件并缩小 CSS 和 JS 的生产版本： 

yarn build:production

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

cd ..
docker-compose up -d

在 Docker 环境中启动 WordPress 只需几秒钟。 现在在 Web 浏览器中打开 URL http://localhost:8080 以访问您的本地 WordPress 站点。 由于这是您第一次启动 WordPress，系统将提示您创建一个管理员帐户。 现在创建一个。

创建帐户并登录后，转到仪表板上的 Appearance > Themes 页面。 您会发现几个预装的主题，包括我们刚刚创建的 Sage 主题。 点击Activate按钮设置为当前主题。 您的主页将如下所示：

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

第 4 步 — 将 WordPress 项目上传到远程存储库

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

  • GitHub
  • GitLab
  • 比特桶
  • 私人托管的 Git 存储库

在您选择的平台上创建一个远程存储库。 出于本指南的目的，我们将使用 GitHub。 单击此处阅读如何使用 Github UI 创建新的存储库 .

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

git init

添加新创建的远程存储库。 将突出显示的部分替换为您自己的存储库的 URL： 

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

在推送项目之前，您希望从版本控制中排除一些文件。

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

nano .gitignore

添加以下文件名：

./.gitignore 

.cache-loader
composer.phar
dist
node_modules
vendor

保存并关闭文件。

现在您已准备好在版本控制下添加您的项目并将文件提交到您在 GitHub 上的存储库： 

git add .
git commit -m 'my sage project'
git push

您现在已经使用 Sage 框架构建了一个自定义 WordPress 主题，然后将代码推送到远程存储库。 现在，您将使用 Buddy 自动将此主题部署到您的 WordPress 服务器。

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

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

首先将 Buddy 与您的存储库同步。 在 Buddy UI 中，单击 创建新项目 ，选择您的 Git 提供程序，然后选择您在本文第一部分创建的存储库。

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

要配置的关键设置是：

  • Branch Buddy 将从中部署您的代码 - 在这种情况下，将其设置为 master
  • Pipeline trigger mode - 将其设置为 On push 以在每次推送到所选分支时自动执行管道。

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

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

根据您存储库的内容，Buddy 将自动建议要执行的操作。 从列表中选择 PHP。

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

# navigate to theme directory
cd sage

# install php packages
composer validate
composer install

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

注意： Buddy 使用带有预安装框架的隔离容器进行构建。 下载的依赖项缓存在容器中，这意味着您不必再次下载它们。 将其视为对团队中的每个人都保持一致的本地开发环境。


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

首先，将 Environment 设置为 node latest。

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

像以前一样将它们添加到接线盒中： 

# navigate to theme directory
cd sage

# install packages
yarn install

# Create production build
yarn build:production

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

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

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

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

您还需要访问 Ignore paths 部分并提供以下内容以防止上传 Node.js 依赖项： 

.cache-loader/
node_modules/

完成后，单击 Test action 按钮以验证所有内容均已正确配置。

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

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

确保您已设置正确的 工作目录 设置 - 否则，该命令将不起作用。

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

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

在第一次执行时，Buddy 会将存储库中的所有文件部署到选定的修订版。 未来的部署只会更新已更改或已删除的文件。 此功能显着减少了上传时间，因为您不必在每次更新时从头开始部署所有内容。

转到您托管的 WordPress 仪表板并刷新 Themes 页面。 您将看到您的 Sage 主题。 现在激活它。

您托管的主页现在将与您的本地主页匹配。

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

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

在此步骤中，您将对主题进行小幅更改，然后将这些更改部署到您的 WordPress 服务器。

返回本地终端并运行以下 yarn 命令： 

yarn start

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

让我们通过对 CSS 进行一些小的更改来测试我们的管道。

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

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

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

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

.brand {
  @extend .display-3;

  color: #013d30;
}

.entry-title {
  @extend .display-4;

  a {
    color: #015c48;
    text-decoration: underline;
  }
}

.page-header {
  display: none;
}

保存并关闭文件。

提交这些更改并将它们上传到您的存储库： 

git add .
git commit -m "minor style changes"
git push

代码上传到仓库后，Buddy 会自动触发你的流水线，并一一执行所有动作：

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

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

结论

Buddy 是一个非常用户友好且功能强大的 CI/CD 工具。 Buddy 甚至有一个视频展示了使用他们的界面 创建管道的速度。

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

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

取自“https://cainiaojiaocheng.com/index.php?title=如何使用DigitalOcean和Buddy自动化Wordpress部署&oldid=30519”
Powered by MediaWiki