跳到主要内容

· 阅读需 3 分钟

-- slug: install-wordpress-on-ubuntu title: 在 Ubuntu 上安装配置 WordPress authors: HeWei

tags: [WordPress,Ubuntu,PHP,MySQL]

安装 Nginx

sudo apt update

sudo apt install nginx

配置防火墙

sudo ufw app list

sudo ufw allow 'Nginx HTTP'

sudo ufw allow 'OpenSSH'

sudo ufw enable

sudo ufw status

curl -4 icanhazip.com

安装配置 MySQL

sudo apt install mysql-server

sudo mysql_secure_installation

MEDIUM Length >= 8, numeric, mixed case, and special characters

Remove anonymous users? (Press y|Y for Yes, any other key for No) : y

Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y

Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y

Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y

安装 PHP

sudo apt install php8.1-fpm php-mysql

配置 Nginx

sudo nano /etc/nginx/sites-available/your_domain

server {
listen 80;
server_name your_domain www.your_domain;
root /var/www/your_domain;

index index.html index.htm index.php;

location / {
try_files $uri $uri/ =404;
}

location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
}

location ~ /\.ht {
deny all;
}

}

sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

sudo unlink /etc/nginx/sites-enabled/default

sudo nginx -t

sudo systemctl reload nginx

vi /var/www/your_domain/index.html

<html>
<head>
<title>your_domain website</title>
</head>
<body>
<h1>Hello World!</h1>

<p>This is the landing page of <strong>your_domain</strong>.</p>
</body>
</html>

http://server_domain_or_IP

测试 PHP 解析

vi /var/www/your_domain/info.php

<?php
phpinfo();

sudo rm /var/www/your_domain/info.php

测试 PHP 连接 MySQL

sudo mysql

CREATE DATABASE example_database;

CREATE USER 'example_user'@'%' IDENTIFIED WITH mysql_native_password BY 'xxxx';

GRANT ALL ON example_database.* TO 'example_user'@'%';

exit

mysql -u example_user -p

SHOW DATABASES;

CREATE TABLE example_database.todo_list (
item_id INT AUTO_INCREMENT,
content VARCHAR(255),
PRIMARY KEY(item_id)
);

INSERT INTO example_database.todo_list (content) VALUES ("My first important item");

SELECT * FROM example_database.todo_list;

exit

vi /var/www/your_domain/todo_list.php

<?php
$user = "example_user";
$password = "xxxx";
$database = "example_database";
$table = "todo_list";

try {
$db = new PDO("mysql:host=localhost;dbname=$database", $user, $password);
echo "<h2>TODO</h2><ol>";
foreach($db->query("SELECT content FROM $table") as $row) {
echo "<li>" . $row['content'] . "</li>";
}
echo "</ol>";
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
}

http://server_domain_or_IP/todo_list.php

sudo rm /var/www/your_domain/todo_list.php

安装配置 WordPress

将 WordPress 文件解压到 /var/www/your_domain。

CREATE DATABASE wordpress;

CREATE USER 'wordpress_admin'@'%' IDENTIFIED WITH mysql_native_password BY 'xxxx';

GRANT ALL ON wordpress.* TO 'wordpress_admin'@'%';

将 wp-config-sample.php 复制为 wp-config.php。

vi /var/www/your_domain/wp-config.php,修改数据库连接信息。

访问 http://server_domain_or_IP/wp-admin/install.php,按照提示完成安装。

用户名:abcd,密码:xxxx

https://developer.wordpress.org/advanced-administration/before-install/howto-install/

使用 WP 主题

将主题的 zip 文件上传到服务器。

解压到 /var/www/your_domain/wp-content/themes。

在 WordPress 后台启用主题之后,刷新页面报错:

There has been a critical error on this website. Please check your site admin email inbox for instructions.

Learn more about troubleshooting WordPress.

解决方法:将主题文件夹重命名即可。但是这样的话就没法用这个主题了,这样并不能从根本上解决问题。

参考文章:https://kinsta.com/knowledgebase/there-has-been-a-critical-error-on-your-website/。

· 阅读需 6 分钟
He Wei

前情提要

接手了一个应用,是别人用 React Native + Expo 开发的,现在需要在自己的电脑上继续开发。

一开始以为只需要用 pnpm 装一下依赖,然后运行 npm start 就可以了,结果项目虽然能跑起来,但是不知道怎么在电脑浏览器中调试。

项目运行起来之后,控制台显示一个二维码,说用 Android 上的 Expo Go 或者 iPhone 的摄像头扫这个二维码就可以。

结果用 iPhone 扫码并调起 Expo Go 之后,APP 里显示一大堆报错信息,那就上网先搜搜教程。

安装依赖

安装配置 React Native 环境

React Native 基于Expo开发(一)项目搭建 这篇文章中,说先要配置 React Native 的环境。

于是安装文章中提供的 搭建开发环境,先把 Android Studio 装上了。

如果用 Google 到的国外地址,下载起来要么很慢,要么下载链接打不开。上网搜索了一下,还是在 V2EX 找到了好办法,就是去 Android Studio 的 中国官网 下载,速度飞快。

下载完成之后就安装 Android Studio,在安装前是可以配置 Proxy 的,配置好之后下载需要的 SDK、模拟器镜像什么的就不会卡住了。

然后就是 安装 Android SDK,不过如果在前一步安装好 Android Studio 之后按照提示安装过了 SDK,就不用再安装了。

最后是 配置 ANDROID_HOME 环境变量,以及 把一些工具目录添加到环境变量 Path

配置完成之后,启动 Android Studio,在 More Action 下拉菜单中,点击 Virtual Device Manager,能够看到已经安装的 Android 模拟器,这次默认安装的是 Pixel_3a_API_34(Android 14)。

运行模拟器里的 Chrome 浏览器,可以正常打开网站,说明模拟器没问题。

安装配置 Expo 项目

接着就是安装配置 Expo 项目了。

Expo 官网 上,有详细的安装步骤。不过这次是 clone 的现有项目,所以流程不太一样。

把项目下载过来之后,先用 yarn 安装依赖。注意这里不要不要用 pnpm 安装依赖,,可能是软链接的原因,始终报错 None of these files exist node_modules\expo\AppEntry node_modules\expo\AppEntry\index。按照 这里 的方法,用 npx expo start --clear 命令启动项目也还是报这个错误,最后想了想,删除了 node_modules 目录,再用 yarn 安装依赖,就没有问题了。

然后运行 yarn start,控制台会显示一个二维码,下面还有一些可用的命令。

因为这次是在模拟器上调试,所以用 a 命令启动 Android 模拟器,模拟器上会自动打开 Expo Go APP,并且加载项目。

在加载项目的过程中,还会下载一些依赖,所以 Android Studio 的 Proxy 配置不要关掉,保持开启即可。

功能开发

页面跳转

一开始照着现有的代码,新增了一个跳转语句,想着用户在点击按钮之后,直接跳转到自己要开发的页面。结果控制台报下面的错误:

The action 'NAVIGATE' with payload {"name":"Reward"} was not handled by any navigator.

Do you have a screen named 'Reward'?

又看了一下 React Native 基于Expo开发(三)路由,跳转 这篇文章,发现 MainStackScreen.js 这个文件里有 import stacks from './index' 这么一条语句,从 index 文件里引入了项目用到的所有页面。

再查看自己本地的项目,index.js 里下面两句应该是注册了整个程序,类似于 Vue 的初始化。

import App from "./App";
registerRootComponent(App);

再打开 App.tsx 文件,发现 import Navigations from './src/navigations/Navigations'; 这句引入了 Navigations 文件。

再打开 Navigations.tsx 文件,发现这里面引入了所有页面,然后用 createStackNavigator 创建了一个 Stack,在 Stack 里注册了所有页面,包括页面的名称和一些其他参数。

比如有 <Stack.Screen name="EmailLogin" options={{ headerShown: false }}> 这么一个页面定义,那么就可以用 navigation.navigate('EmailLogin') 来跳转到这个页面了。

· 阅读需 3 分钟
He Wei

需求

由于现在的项目分布在不同的 GitHub 账号下,如果在本地的 Git 全局配置中记录其中一个 GitHub 账号的信息,那么在与 GitHub 同步另一个账号下的项目时,每次都会弹出烦人的对话框,询问要选择哪个 GitHub 账号进行同步。

解决过程

上网搜索了一下,得知 GitHub 官方就提供这种解决方案。

简单来说就是在本地新建一个 SSH key,把私钥添加到本地的 ssh-agent,再把公钥添加到 GitHub 对应的账号下面。然后用 GitHub 项目的 SSH 链接来 fork 项目,之后在与 GitHub 同步项目的时候,就不会弹出烦人的对话框了。

新建 SSH key

参考 Generating a new SSH key and adding it to the ssh-agent,在 ~\.ssh 目录下面执行命令 ssh-keygen -t ed25519 -C "your_email@example.com" 一路回车,按默认设置来即可。

如果不按默认设置来,手动修改了生成的 SSH key 的名称,那么在后面将私钥添加到本地的 ssh-agent 这一步时会失败。

将私钥添加到 ssh-agent

执行 Adding your SSH key to the ssh-agent 这里的步骤即可。

将公钥添加到 GitHub

Adding a new SSH key to your GitHub account 这里的流程来即可。

测试 SSH 配置是否有效

Testing your SSH connection 这里的步骤操作即可。

如果报错,可以先在官方文档的 Troubleshooting SSH 这一节查找对应报错信息。

有时候因为众所周知的网络原因,执行测试命令失败,可以按照 这里 的方法配置一下 SSH,然后再测试,应当就 OK 了。

注意

有时候将一台电脑上生成的 SSH key 复制到另一台电脑上,再按照上面的流程配置,发现不能用。那就按照上面的流程重新生成新的 SSH key,再把公钥添加到 GitHub 即可。

· 阅读需 9 分钟
He Wei

前情提要

之前在 V2EX 咨询过 阿里云免费 SSL 证书的替代方案,考虑到阿里云服务器目前的操作系统是 Windows Server 2012,所以基于 Linux 或者 Docker 的方案就都 pass 了。

再考虑到自动化更新 SSL 证书的需求,所以在经过一番调研之后,最终确定使用 win-acme 来完成这一工作。因为虽然 Caddy 也能完成这项工作,但是还需要把在 IIS 中配置好的网站再重新配置一遍,还不知道会有什么新问题。本着尽量不要增加复杂度的理念,所以就没有采用 Caddy。

由于网站前面还有一层阿里云 WAF(Web 应用防火墙),各网站的流量都是先由 WAF 检查一遍,过滤掉非法请求之后,才能最终到达服务器。而要使用 WAF 的话,各域名的 DNS 都是解析到 WAF 的地址上的,这也给后面的工作和问题排查带来了一些问题,不过这是后话了。

基本流程测试

把 win-acme 下载并解压到服务器上之后,运行程序,按照网上的教程一步步操作。为了不影响现有各域名上的业务,在阿里云服务器的 IIS 上配置了一个新的域名,并且在阿里云 WAF 里面接入了这个二级域名。

按照教程的操作步骤,成功用 win-acme 申请到了这个二级域名的 SSL 证书,但是默认步骤只会生成一个 Windows IIS 所需的 pfx 格式的证书。如果要让阿里云 WAF 能够正常过滤 HTTPS 流量,还需要上传证书和对应的私钥到阿里云的数字证书管理服务中,然后在阿里云 WAF 的网站接入设置中选择所上传的证书才行。这样一来,还需要让 win-acme 生成 PEM 格式的证书和私钥。

所以基础流程就是:申请证书 → 保存 PFX 格式证书 → 保存 PEM 格式证书。

配置阿里云 WAF

在用 win-acme 给各个域名申请证书的时候,在验证域名所有权的那一步,有的域名能够验证成功,有的域名就总会失败。考虑到 IIS 上各个域名的配置是一样的,又看了一下 DNS 解析也是一样的格式,那应该就是阿里云 WAF 的问题了。

对比之后发现,有的域名在阿里云 WAF 的配置中同时勾选了 HTTP 和 HTTPS 协议,但是有的只勾选了 HTTPS 协议。对于只勾选了 HTTPS 协议的域名,有的还没有开启 HTTP 到 HTTPS 的强制跳转。

加上域名的 DNS 解析是指向阿里云 WAF 的,于是猜测是 WAF 这里的设置导致了域名所有权的验证失败。于是给全部域名的 WAF 配置都同时勾选了 HTTP 和 HTTPS 协议,并且禁止了 HTTP 到 HTTPS 的强制跳转,这个时候,各个域名的所有权验证终于都能通过了。

Debug 阿里云 Cli

有了 win-acme,SSL 证书的自动续期就搞定了。但是证书每次续期之后,还需要再把新的证书上传到阿里云的数字证书管理服务中,然后在阿里云 WAF 的网站接入设置中更新证书。既然是 Windows 系统,那就用 PowerShell 写个脚本来实现这个操作好了。

而上面的需求需要调用阿里云的 API,如果想要用脚本来实现这一功能,就还要用到阿里云 Cli。在配置阿里云 Cli 的用户凭证时,AccessKey 凭证和 EcsRamRole 凭证方式一开始都有问题,最后把之前的配置信息都删了,新建了一个具有 管理云盾应用防火墙(WAF)的权限 的用户,然后用该用户的 AccessKey 才终于成功调用了阿里云的 API。

Debug PowerShell

在测试阿里云 API 的调用时,还遇到了一个有些隐蔽的问题,就是在阿里云的 OpenAPI 平台上测试接口调用的时候是没问题的,但是在 PowerShell 脚本中调用就是有问题。到了最后把两种方式的完整命令复制出来对比,才发现 PowerShell 的 Get-Content 命令读取到的 SSL 证书和私钥的文本,换行符都没了,这尼玛!

解决了这个问题后,续期后的新证书和私钥自动上传至阿里云并在 WAF 中更新的功能也就实现了,以后这项工作就不需要自己再手动操作了。

总结

最后再说一下完整的流程和注意事项吧。

  1. 用 win-acme 申请 SSL 证书并实现自动续期。这个程序能够自动把从 IIS 中读取网站信息,申请新证书关联到对应的网站,很省心。
  2. 如果用到了阿里云 WAF 之类的服务,要想防护 HTTPS 流量,就需要上传 SSL 证书和私钥,这样的话需要配置 win-acme 再额外保存一份 PEM 格式的证书和私钥。其中 -chain.pem 后缀的文件是需要导入 WAF 的网站证书及中间证书,-key.pem 后缀的文件则是需要导入 WAF 的私钥文件。
  3. 如果用到了阿里云 WAF 之类的服务,并且各业务域名的 DNS 都解析到了 WAF 上,那么就要在 WAF 配置中同时启用 HTTP 和 HTTPS,并且禁止 HTTP 到 HTTPS 的强制跳转,不然有可能在域名所有权验证那一步失败。
  4. 配置阿里云 Cli 的时候,如果配置的各种凭证方式都不管用,可以尝试把旧的配置都删除,包括 Cli 里的配置和阿里云网页端控制台的配置,然后重新来一遍。
  5. PowerShell Get-Content 命令拿到的证书和私钥的文本会丢失换行符,可以参考 https://stackoverflow.com/a/15041925/2667665 这里的方法来解决。
  6. 上传证书和私钥调用的是 WAF 中的 CreateCertificate 这个 API,将证书关联至 WAF 中接入域名是 CreateCertificateByCertificateId API。

背景知识