当我们在测试机确认过金流功能皆能正常运作後,接下来就是要把我们开发的外挂上传客户主机的时候了,在上传之前,为了避免发生预期外的错误,我会进行以下的自动化流程:
第一个检查项目是 WordPress 程序码规范,PHP 有一套自己的程序码规范,叫做 PHP Standards Recommendations ( PSR ),虽然 WordPress 是用 PHP 写的,但在规范上有许多地方不一样,这个检查项目确保优先使用 WordPress 提供的函式。
第二个检查项目是单元测试,这部分我们在先前的文章有提及,事实上在边开发时我们就会同时进行测试,这边要检查的就是全部测试都再跑一遍,确保之前已经通过的测试在所有功能开发完成後依旧可以过关。
第三个项目是打包需要上传的档案,在客户的正式机上面我们不需要放单元测试以及做端对端测试的套件,另外还有一些快取资料夹,这部分我们可以先透过 .gitignore 来控管,然後等到打包的时候只要安装必要的套件即可。
最後一个项目也是最重要的还原机制,在正式机上面一定会装有很多外挂,所以当我们的外挂安装上去时就非常有可能出现预期外的错误,所以一定要有还原的机制,确保在上传之後万一出问题可以恢复成正常的状态,以免造成客户的损失。
部署到正式机根据客户情境有两种方式:
有时候客户能够提供的管理权限就只有後台帐密,可能是碍於安全性考量或是他们也不知道还有什麽其他帐密可以提供给我们,遇到这种情况就只能从後台来进行部署,虽然可以手动打包 zip 档从後台进行外挂上传,但步骤就会变得很繁琐,这时候我们可以在正式机安装 WP Pusher 这支免费外挂做自动化处理。
它的逻辑是透过 webhook 来侦测是否有新的 commit 被 push,有的话就会自动从 Github clone 最新的一份下来,因此我们只要把 WP Pusher 安装并设定好我们的存放库,之後在每一次的 push 它都会帮我们把最新版的档案自动 pull 回正式站,这样就不用手动上传压缩档。
具体的设定步骤如下:
wppusher.zip
上传後并启用但这个方法有一个很大的坏处,那就是存放库上面有什麽档案它就会拉什麽档案,它没有办法针对我们需求进行各别打包,也就是自动部署流程第三点提到的项目,譬如说在 vendor 资料夹里面有正式环境不需要的套件像是 PHPUnit、PHPMock 等等,透过 WP Pusher 一并会被拉到正式机。
解决的办法是从本机或是测试机 push 的时候,就先把整个 vendor 资料夹 ignore 掉,然後再用白名单的方式把我们需要的套件取消忽略,假设我们的 vendor 有以下套件,打 * 号的是要上正式机的:
vendor
├── a7 *
├── autoload.php *
├── oberonlai *
├── php-mock
└── phpunit
gitignore 要先把整个 vendor 资料夹忽略掉,然後使用惊叹号把正式机需要用的套件加入:
vendor/*
!vendor/a7
!vendor/oberonlai
!vendor/autoload.php
但这样做还是会很麻烦,因为当正式环境需要的套件有相依套件时我们可能不会知道,如果没有把相依套件也加入白名单的话一样会喷错,因此最好的方法还是可以取得客户网站的 SSH 或是 SFTP 帐密,如果没有的话至少也要有 FTP 才能使用部署工具来打包所需套件。
如果很幸运可以取得客户的 FTP 或是主机的远端登入帐密,那麽在做整合与部署会方便非常多,这类的服务不少,WordPress 官方文件推荐的是 Travis CI,而 Github 本身也有 Actions 可以使用,其基本逻辑是使用一个 yml 设定档来设定该做哪些流程。
而本文要介绍的是一套视觉化的部署工具 Buddy,它能省去编写设定档的时间,直接使用所见即所得的介面来决定部署前的流程,它还整合许多常见的第三方服务,以下就为具体的设定步骤
Buddy 是以 Project 为单位,一个 Project 会绑定一个存放库,它的免费方案可以使用五个 Project,对於个人接案者来说算是非常够用。先前往 Buddy 进行申请,可以直接使用 Github 注册:https://buddy.works/sign-up
注册完成後可以看到 Project 列表,点击右上方的 Create a new project 即可建立新专案。
可以看到已经 Buddy 已经与我们的 Github 做绑定,直接从中间的 Repository 搜寻找到特定存放库,并点选存放库即可完成 Project 的新增。
做好 Project 与存放库的绑定之後,接下来就是要建立 pipeline,pipeline 指的就是部署前的流程,以本文的情境来说,就是程序码规范检查 > 单元测试 > 打包 > 上传正式机这四个步骤,现在先点选中间的 Add a new pipeline 按钮:
就能看到 pipeline 的设定画面,先帮这个 pipeline 取名,然後设定要触发它的时间,有三种模式:手动、push 跟排程,另外 pipeline 可以新增多个,也就是说在不同的触发条件下我们可以设定不同的自动化工作。像是在开发的时候我们会需要在 push 时跑程序码规范检查,或是可以在每天半夜十二点自动做测试。
接下我们会看到一大堆的 action,也就是我们要执行的环境或工作,我们先新增第一个 PHP CodeSniffer 来做程序码规范检查:
点进去後会看一个指令视窗,这个 action 它是一个 Docker 环境,里面已经帮我们把 PHP 跟 CodeSniffer 都安装好了,所以我们只要下载并设定 WordPress 的 Coding Standard 即可,输入以下指令:
rm -rf wpcs
git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs
phpcs --config-set installed_paths /buddy/iron-pay/wpcs
phpcs --standard=WordPress /buddy/iron-pay/src
这边我们先把 /buddy 这个目录的 wpcs 资料夹删除,然後从 Github 下载 WordPress 规范,然後设定路径并指定 phpcs 用 WordPress 来检查存放库里面的 src 资料夹也就是我们外挂的核心档案,这边的存放库路径记得都要用 /buddy/iron-pay/
,因为这是在 Docker 里面,Buddy 会把存放库都放在这个目录之中。
写好指令後点选 Save this action:
第一个工作设定好之後我们就可以点选右上角的 Run pipeline 来检查第一关是否有通过:
执行前要先设定这次测试任务的对应的 commit,这样之後有问题才能进行还原:
执行中的画面:
成功的话会显示绿色,失败的话是,点选 Logs 可以看到执行的细节:
回到 pipeline,继续来新增单元测试,点选 Actions 并点击下方的加号来新增:
选择 PHP:
将 vendor/bin/phpunit 的注解取消,并点选 Add this aciton:
再来执行一次 pipeline,会多出单元测试的 Action,并透过测试:
步骤跟上一步差不多,一样是使用 PHP 的 Action,然後指令换成 composer install --no-dev
,这样就不会把 PHPUnit 这种测试环境用的套件一并打包进去,也不用再写 gitignore 白名单来处理。
要用什麽方式部署就看我们能够取得正式机的哪种帐密,Buddy 有提供四种:FTP、FTPS、SFTP 跟 RSync,这边先选择使用 SFTP 的 Action 来部署。进入 SFTP 的设定页面时可以看到需要输入相关的帐密资讯以及 Source 来源,这边记得要选择 Pipeline Filesystem 才会是抓到有经过 composer install --no-dev
安装的存放库:
设定好之後,我们的 pipeline 长得如下图:
最後按下 Run pipeline 就能享受一键自动部署的乐趣了XD,但万一发生意外,我们可以回到 pipeline 的 Executions 页签,选择要还原的动作,这样就能确保有问题时可以快速还原:
Buddy 可以做到非常多的功能,像是部署完成後的 Slack 通知、打包 Zip、Cloudflare、GCP、AWS 整合等等一堆的动作,万一都没有也可以自己写指令来跑,另外它还可以把 pipeline 存成范本,之後有新 Project 时直接套用即可。
介绍完自动部署之後,下一篇会说明如何自管 WordPress 外挂的更新,以及当要贩售外挂时该如何导入序号机制并整合 WooCommerce 来进行控管。
本文同步发表於:https://oberonlai.blog/tw/woocommerce-payment-deployment/
>>: 【从零开始的Swift开发心路历程-Day17】简易订单系统Part1
今天又碰到一个Win10无法开机停在转圈的案例. 之前已碰到过多台发生该问题, 判断是防毒软件造成,...
row是指什麽、col是指什麽? 常见的翻译是 row代表列、col代表栏 但用google翻译来翻...
考量到要建立各种 class 所以统一建立一个 class 给所有人继承 可以直接跳过,但注意之後有...
财源滚滚 今日会详细讲解Service和Deployment的功能 Service 在[Day22]...
在上一篇我们认识了一些Selector,包括所有元素选择器、指定元素选择器、ID选择器和Class选...