wsl2创建Wordpress开发环境

本地的xamp环境总是出问题, mysql经常会有一些奇怪的错误. 虽然再stackoverflow找到了解决办法, 但不是从根本解决. https://stackoverflow.com/a/61859561/1956278 虽然问题很小但是影响心情, 正好看见WP官方推荐的wp-env开发环境, 说干就干.

事出有因

最初是使用phpstudy本地搭建的环境, 但实际使用中mysql访问很慢, 不知道为什么. 换成xamp似乎是有所缓解(理论上应该是一样的), 但是带来了其他的问题, 就是上面提到的. 所以一直给我一种感觉就是mysql在windows下运行很慢, 放到虚拟机里弄个linux就好很多(有可能心理作用)

正好kratos这款主题二次开发的过程中发现有使用到短代码, 这东西对我来说已经是落后的了, 因为已经不使用经典编辑器了, 从WP支持古腾堡编辑器开始就换掉了, 感觉这种块类的编辑器更适合我. 也并不是古腾堡不支持短代码, 只是使用起来不方便而且很怪. 所以就想把他改成古腾堡支持的块.

也就跟着官方的文档: https://developer.wordpress.org/block-editor/tutorials/ 一点点的摸索, 才有的这篇文章, 如果说你喜欢用phpstudy这类软件自行搭建的话, 那这篇文章对你来说应该是没什么帮助的.

部署环境

• Win10 2004 + WSL2
• Docker Desktop for Windows
• WP-env
• Visual Studio Code

WSL2

wsl1的时候很激动, 想说终于微软要统一世界了么? 后来发现docker用不了, 部分体验也一般. 心想慢慢来以后更新就好. 终于啊wsl2来了, 可是性质变了啊, 原来原生支持内核, 现在变成虚拟机了. 这...

那也得用, 至少后续使用要比手动在虚拟机创建的要方便. 安装过程就不赘述了, 微软官网都有, 贴个连接: https://docs.microsoft.com/zh-cn/windows/wsl/install-win10.

安装到最后会让你新建一个用户, 习惯了在服务器中使用root用户. 进入系统后就设置了下root用户密码. 命令稍微了解点linux的都应该知道.

sudo passwd root

注意: 有可能在设置用户位置遇到如下提示: "参考的对象类型不支持尝试的操作。", 注意这是WSL2与代理软件冲突导致的, 目前还没有官方(微软)的解决办法, 现有的两个方法会在文章底部提供.

这还没完, 不能每次进入都用 su 切换吧, 多余. 所以要设置root用户默认登录. 我安装的是Ubuntu 20.04 LTS. 那就管理员运行powershell或者CMD键入:

ubuntu2004 config --default-user root

这里要注意这个ubuntu2004只有你安装得和我一样是Ubuntu 20.04 LTS才能这么用. 如果你安装的其他版本, 比如就是商店中的Ubuntu, 那么命令程序就是 ubuntu.

这个程序在应用安装目录中, 一般是在 C:\Users\用户名\AppData\Local\Microsoft\WindowsApps , 在这个目录中执行也可以. 设置好后重启一下lxssmanager服务, wsl2在windows中以服务存在, 想要重启子系统就直接重启这个服务就行. 任务管理器中找到右键重新启动就可以了.

接着进入wsl2, 修改以下起始目录. 不修改也所谓, 个人习惯而已.

echo "cd ~root" >> ~/.bashrc

剩下就是正常linux操作了, 先换个软件源. 创建个自己开发使用的目录什么的. 软件源个人一直使用清华大学的开源镜像站: https://mirrors.tuna.tsinghua.edu.cn/， 测试过我这访问比较快.

Docker Desktop

docker之前几乎可以说是没用过, 只在学python那时候接触个几个命令而已. 这个docker desktop现在支持wsl2, 得益于wsl2的端口直接映射到主机, 所以使用非常方便.

下载地址: https://www.docker.com/products/docker-desktop, 截止到发文为止最新版本是2.4.0, 安装步骤就不贴了, 一直下一步. Win10会有一个开启WSL支持得选项也是默认勾选的, 所以什么都不用动默认安装就可以.

按照上方截图设置对WSL2得支持, 这样可以在WSL2中直接使用docker命令了. 接着在Docker Engine选项中可以修改docker的配置信息, 开启debug什么的. 建议加上国内镜像源, 这样拉取镜像会快一点. 比如网易: http://hub-mirror.c.163.com 或者使用阿里云的.

注意: 如果你经常使用一些代理软件(包括网游加速器), 建议看下文章末尾"遇到的问题".

WP-env

这个开发环境, 貌似国内搜索引擎查不到相关信息, 最近也是啃文档研究的. 首先说这个环境不是必须的, 你自己用phpstudy、xamp这类软件搭一个直接开发也是没有任何问题的, 只是在编写古腾堡编辑器自定义块的时候官方推荐这个就是用了, 自己搭建再实际开发都是没啥区别的.

开发环境部署文档: https://developer.wordpress.org/block-editor/tutorials/devenv/

先安装node然后再全局安装@wordpress/env这个包就可以, 使用很简单. 官网推荐用nvm来管理node.js的版本, https://github.com/nvm-sh/nvm这个连接有最新版本的地址, Wordpress官方文档的未必是最新版本.

输入这两个命令能看见版本号就说明装好了, 接着键入:

npm -g install @wordpress/env

如果安装过程比较缓慢, 可以尝试更换npm源来解决. 可以使用下方命令直接设置源也可以按照阿里云镜像文档来设置cnpm: https://developer.aliyun.com/mirror/NPM

npm config set registry https://registry.npm.taobao.org/

wp-env --version

可以键入上面命令测试是否安装成功.

开始开发

vscode就不提了, 安装都很简答, 也不需要什么额外设置. 环境全部准备好之后, 可以在开始菜单找到你安装的子系统, 单击即可进入shell界面. 也可以在Windows商店安装Windows Terminal, 个人是比较推荐后者的, 很方便.

创建一个开发目录, 这就是你的主题或插件的目录. 然后键入"code .", 后面有个点, 指的是目录, 如果主机安装了VSCode那就可以直接开打并且自动切换到远程开发模式, 超级方便.

编写好你的主题或插件的入口文件, 接着在目录中键入:

wp-env start

会自动拉取docker镜像并且后台创建容器, 可以在主机docker desktop上直接查看(针不戳)

接着直接在主机访问, http://localhost:8888 就可以访问已经创建的wp环境了. 后台账号密码分别是: admin password. 在主题或插件页面可以看见创建的插件或主题已经默认启用状态了. 接着开发就可以了, 下次只需要进入目录执行上面的命令就可以了.

遇到的问题

这篇文章有点长了, 所以部分并没有讲太多. 后续会讲一下wp-env配置文件, 映射之类的帮助开发. 以及古腾堡编辑器如何创建一个自定义块.