跳到主要内容

· 阅读需 4 分钟
He Wei

整体流程

公司的业务需求是需要一个邮箱验证服务,用户注册后需要验证邮箱,才能继续使用服务。这个服务的基本流程如下:

  1. 用户注册时,填写邮箱地址作为用户名。
  2. 后端收到注册请求时,生成一个随机的验证码,发送到用户的邮箱。
  3. 用户收到邮件后,在注册页面输入邮件中的验证码,并继续注册。
  4. 后端接口验证验证码是否正确,以及是否与邮箱匹配。
  5. 验证成功后,注册该用户。
  6. 验证失败后,提示用户重新验证。
  7. 验证码的有效期为 24 小时。
  8. 验证码只能使用一次。
  9. 验证码错误次数超过 3 次,验证码失效。
  10. 验证码失效后,用户需要重新注册。

后端服务

后端服务使用 Strapi + @strapi/provider-email-nodemailer 这个插件。

配置插件

安装好上面的插件之后,在 Strapi 项目的 config/plugins.js 中配置邮箱服务的信息。

module.exports = ({ env }) => ({
email: {
config: {
provider: 'nodemailer',
providerOptions: {
host: env('SMTP_HOST', 'smtp.qiye.aliyun.com'),
port: env('SMTP_PORT', 465),
secure: true,
auth: {
user: env('**@**.com'),
pass: env('****'),
},
},
settings: {
defaultFrom: '**@**.com',
defaultReplyTo: 'hello@example.com',
},
},
},
})

以上配置在本地开发环境也是可以正常使用的,自己在 Chrome 中切换到了 Charles 代理模式,访问邮箱所属域名下的 URL,通过 Charles 的 Rewrite 功能把请求重写到了本地,这样就能在本地方便地测试邮件发送功能了。

这里有几点要注意:

  1. host 那里填写的是你的邮箱服务商的 SMTP 服务器地址,由于用的是阿里云的企业邮箱,所以参考这篇文档 阿里邮箱IMAP、POP、SMTP地址和端口信息 里的地址。
  2. port 那里要填写对应的端口号,阿里邮箱的 SMTP 端口是 465,同时 secure 要设置为 true
  3. 在邮箱所属域名的 DNS 解析设置里,同样要把 SMTP 服务器地址填写进去,这样才能正常发送邮件。知道这一点,是因为在用阿里云企业邮箱给自己的 QQ 邮箱发邮件失败,QQ 邮箱给的错误信息里有相关文档:什么是SPF?如何设置SPF来防止我的邮件被拒收呢?,阿里云也搜到了相关文档:退信提示“spf check failed”,按照阿里云的设置搞定了。注意 DNS 解析修改后,要等待一段时间(10 分钟)才能生效。
  4. 再次发送测试邮件时,QQ 邮箱又返回了 550 Mail content denied 这个错误信息,原来是邮件内容涉嫌大量群发。看了一下,是代码自动生成的内容,修改了之后就可以了。

· 阅读需 6 分钟
He Wei

配置 ECS

系统选择 Ubuntu 22.04,密码则在实例管理控制台页面,通过重置密码方式进行设置。

但是设置密码之后,依然无法远程 SSH 登录,猜测可能是系统防火墙的问题,先不管了,先把整体环境配置好。

安装 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 php-simplexml

配置 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

sudo mkdir /var/www/your_domain

sudo nano /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 解析

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

<?php
phpinfo();

access http://server_domain_or_IP/info.php

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

sudo nano /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

先在 MySQL 中创建数据库和用户。

# 如果需要多语言,则创建两个数据库
CREATE DATABASE wordpress;
CREATE DATABASE wordpress_en;

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

# 用同一个 DB ADMIN 账户管理两个数据库
GRANT ALL ON wordpress.* TO 'wordpress_admin'@'%';
GRANT ALL ON wordpress_en.* TO 'wordpress_admin'@'%';

sudo apt install unzip

将 WordPress 文件解压到 /var/www/your_domain,再复制一份到 your_domain/en。

将两处的 wp-config-sample.php 复制为 wp-config.php。

vi /var/www/your_domain/wp-config.php,修改数据库连接信息,en 子目录下的相同文件也做同样操作。

访问 http://server_domain_or_IP/wp-admin/install.php,按照提示完成安装,en 子目录下的相同。

如果在输入密码的地方报错 password strength is unknown,有可能是在用 https 协议访问。可以在 wp-config.php 中添加一行:

$_SERVER['HTTPS'] = true; 

搜索 Password strength unknown,在 https://wordpress.stackexchange.com/a/350453 中找到的这个解决方法。

用户名:lxklsh2024,密码:r0pI%y(15um#h&kRfn

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

使用 WP 主题

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

如果 Nginx 报错 413 Request Entity Too Large,可以修改 /etc/nginx/nginx.conf,添加或修改 client_max_body_size 为 100M。

http {
client_max_body_size 100M;
}

点击上传按钮后报错 Unable to create directory wp-content/uploads/2024/06. Is its parent directory writable by the server?,可以通过以下命令解决:

sudo chown -R www-data:www-data /var/www/your_domain/wp-content/uploads

但是这样的话,WordPress 还要求配置 FTP 用户名和密码,这不麻烦了吗,不折腾。

家里电脑没法通过 SSH 连接服务器,但是办公室可以,于是就用办公室电脑的 Termius 的 SFTP 功能上传了主题文件。

由于 ecs-user 账户权限有限,所以先上传到 /home/ecs-user,然后再用 sudo mv 命令移动到 /var/www/your_domain/wp-content/themes。

接着用 sudo unzip 解压到压缩包所在目录下。

导出/导入数据库

# 导出数据库
sudo mysqldump -u wordpress_admin -p --databases wordpress > ~/wordpress.sql

# 导入数据库
sudo mysql -u wordpress_admin -p < ~/wordpress.sql

问题记录

在 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/。

问了一下客服,让按照 https://themebetter.com/wp-debug.html 的方法,开启 DEBUG 模式。

开启之后,报错信息如下:

Fata error: Uncaugnt Error: call to undefined function simplexml_load_string() in
/var/www/your_domain/wp-content/themes/mok/inc/update.php:72 Stack trace: #0
/var/www/your_domain/wp-content/themes/mok/inc/update.php(4): get_latest_theme_version() #1
/var/www/your_domain/wp-includes/class-wp-hook.php(324): update_notifier_menu() #2
/var/www/your_domain/wp-includes/class-wp-hook.php(348): WP Hook->apply_filters() #3
/var/www/your_domain/wp-includes/plugin.php(517): WP Hook->do_action() #4
/var/www/your_domain/p-admin/includes/menu.php(161): do_action() #5
/var/www/your_domain/wpadmin/menu,php(422): require_once('...') #6
/var/www/lxklsh,com/wp-admin/admin.php(158):reguire('...') #7
/var/www/your_domain/wp-admin/index.php(10): require_once('...') #8
{main} thrown in /var/www/your_domain/wp-content/themes/mok/inc/update.php on line 72

客服说是没有装 PHP 的 simplexml 扩展,装了之后就没问题了。

相关资料

整体流程参考 https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu。

· 阅读需 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。

背景知识