在Ubuntu20.04搭建WordPress开发环境
最近在B站刷到一个很不错的WordPress开发视频
https://www.bilibili.com/video/BV1E7411A7Yj?p=1
最近PHP8.0的发布, 性能得到极大提升, 再加上我本身也用WordPress构建了稳定的网站 v2fy.com, 我打算试水WordPress
前言
搭建WordPress开发环境, 需要安装PHP, Mysql, Apache集成开发环境Xampp, 从WordPress官网获取最新的WordPress安装包
所有的安装包都通过wget存放到/opt目录中,如果日后不想用, 可以直接进入/opt删除文件夹
本文从零开始完成WordPress本地开发环境的搭建.
下载XAMPP并进行安装
cd /opt
sudo wget https://www.apachefriends.org/xampp-files/8.0.0/xampp-linux-x64-8.0.0-2-installer.run
chmod 755 ./xampp-linux-*-installer.run
sudo ./xampp-linux-*-installer.run






启动后会有一个图形化操作界面, 界面中可以管理Mysql, Apache, ProFtpD 三个服务的开启,停止,重启,和配置

如果操作界面被关闭,可以通过终端运行以下命令重新开启
sudo /opt/lampp/manager-linux-x64.run
**其实我们可以通过命令行,更加方便的开启和终止以上三个服务(Mysql, Apache, ProFtpD) **
开启服务
sudo /opt/lampp/lampp start

终止服务
sudo /opt/lampp/lampp stop

重启服务
sudo /opt/lampp/lampp restart

更多Linux下的安装问题详见官方文档: https://www.apachefriends.org/faq_linux.html
验证安装成功
打开火狐浏览器,输入http://localhost , 如果浏览器自动跳转到 [http://localhost/dashboard] 则说明安装成功
http://localhost

目前PHP, Apache, Mysql 已经安装完成! 我们接下来开始获取最新的WordPress源码并开始运行
我们可以通过网页版的phpMyAdmin新建一个名为wordpress的数据库, 供后续的WordPress建站程序使用
进入phpMyAdmin

创建登录用户




从wordpress.org获取WordPress 5.6源码
# 进入/opt目录
cd /opt
# 获取源码
sudo wget https://wordpress.org/wordpress-5.6.tar.gz
# 解压源码
sudo tar -zxvf wordpress-5.6.tar.gz
# 将wordpress移动到 /opt/lampp/htdocs
sudo mv wordpress /opt/lampp/htdocs

现在打开 http://localhost/wordpress 即可看到WordPress界面

为了方便以后的开发,我们可以通过Apache的VirtualHost功能, 为wordpress配置一个域名
我未来的网站将会上线到 fangyuanxiaozhan.com , 所以我在本地为wordpress配置一个fangyuanxiaozhan.com的本地域名
首先在host文件中追加 127.0.0.1 fangyuanxiaozhan.com
sudo chmod 777 /etc/hosts
sudo echo "127.0.0.1 fangyuanxiaozhan.com" >> /etc/hosts
sudo chmod 755 /etc/hosts

在 /opt/lampp/etc/httpd.conf 中取消https-vhost.conf的注释

在 /opt/lampp/etc/extra/httpd-vhosts.conf 中追加以下配置
<VirtualHost *:80>
DocumentRoot "/opt/lampp/htdocs/wordpress"
ServerName fangyuanxiaozhan.com
ErrorLog "logs/dummy-fangyuanxiaozhan.com-error_log"
CustomLog "logs/dummy-fangyuanxiaozhan.com-access_log" common
</VirtualHost>

运行以下命令重启服务
sudo /opt/lampp/lampp restart
在浏览器中访问fangyuanxiaozhan.com ,本地apache服务配置完成

最后总结以下, 我们通过配置 127.0.0.1 fangyuanxiaozhan.com 让本地浏览器对fangyuanxiaozhan.com 的http请求全部发送到本地的apache服务器上, 通过为apache 配置vhosts , 让fangyuanxiaozhan.com 的主目录,定位到本机的 /opt/lampp/htdocs/wordpress
文件夹, 最后达成的效果是, 本地浏览器访问 fangyuanxiaozhan.com 即是访问本地服务
另外, 由于我们的Ubuntu20.04本身是虚拟机 , 我们还可以通过在终端输入 ifconfig | grep inet
, 获取Ubuntu虚拟机的ip地址, 比如为10.211.55.6

我们可以在外层物理机的host文件填入 10.211.55.6 fangyuanxiaozhan.com
,实现外层物理机也能通过浏览器访问 fangyuanxiaozhan.com 查看开发中的wordpress
物理机MacBook也可以轻松访问开发环境

为了保证后续数据库信息成功写入wp-config.php
, 我们需要运行以下命令, 为 /opt/lampp/htdocs/wordpress
文件夹添加写入权限
sudo chmod 777 -R /opt/lampp/htdocs/wordpress
我们可以直接在MacBook中完成wordpress的配置
填入数据库信息

数据库校验完成, 开始构建网站

设置网站初始化属性

网站安装完成

登录

WordPress安装完成
