博客 (30)

1. 登录 UCenter，添加应用

   

   选择 DiscuzX，并填写名称和密钥等信息

2. 正常的话，提交后会自动更新缓存文件 /uc_server/data/cache/apps.php，如果没有更新，检查添加这个文件的写入权限，并在后台更新缓存。

3. 在编辑应用界面底部可以看到“应用的 UCenter 配置信息”

   
   

4. 复制这段内容，粘贴到 /config/config_ucenter.php。

5. 在 Discuz! 控制面板 - 站长 - UCenter 设置 中可以看到这些配置信息。标签名为灰色的是从配置文件读取的，无法在此修改。

6. 返回 UCenter 中心的应用列表可以看到“通信成功”

   
   

1. 购买 ECS
   

2. 解析域名（非网站域名）、修改实例名称、主机名

3. 设置阿里云（重要）

4. 远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 22 端口，可在阿里云控制台登录系统，或先在安全组临时放行 22 端口）

5. 修复系统漏洞

6. 将磁盘挂载到目录（fdisk、df 命令参考：https://xoyozo.net/Blog/Details/SSH）

7. 安装宝塔面板（本文以宝塔面板方案为例，选择任何你喜欢的环境部署方案都行）。可以在阿里云控制台ECS实例页安装扩展程序

8. 临时放行宝塔面板端口，进入宝塔面板（http方式）

9. 配置面板 SSH、添加新的安全端口、面板设置

10. 更改 SSH 默认端口（参：https://xoyozo.net/Blog/Details/change-default-port）
    

11. 安装 nginx、PHP 等

12. 配置 PHP 扩展（Redis、sqlsrv（注意选择兼容的版本）、memcached 及端口）

13. 创建网站，配置网站（路径、伪静态等）

14. 迁移网站文件（参：https://xoyozo.net/Blog/Details/SSH）

15. 仔细对比新旧网站的配置文件（特别是 .php 的访问权限，参：https://xoyozo.net/Blog/Details/nginx-location-if）

16. 设置写入目录（使用 rsync 同步的文件会同步用户和权限）

17. 解析域名（先改 hosts 测试网站功能）

18. 更改内网其它 ECS 上的 hosts

19. 关闭原 ECS（能马上发现问题，不然等运行一段时间才发现问题就麻烦点）
    

20. 设置 FTP
    

21. 迁移“计划任务”

22. 所有网站和软件的配置文件都要使用 WinMerge 进行对比
    

23. 移除“宝塔面板-安全”和“阿里云-ECS-安全组”中不用的端口

24. 再次检查阿里云设置

25. 在备份工具中添加该服务器的所有备份项

26. 私网中若有 ECS 的 hosts 中域名直接绑定到私网 IP 的，做相应更改

更多文章：

从零搭建一台阿里云 ECS（Windows Server）并迁移网站

1. 购买 ECS
   

2. 解析域名（非网站域名）、挂载磁盘（若有另购）、修改实例名称、主机名

3. 设置阿里云（重要）

4. 远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 3389 端口，可先在安全组临时放行 3389 端口）

5. 开启 Windows 防火墙（使用推荐设置）
   

6. Windows 更新、并在高级选项中开启（更新 Windows 时接收其它 Microsoft 产品的更新）

7. 安装 IIS：服务器管理器-添加角色和功能-勾选“Web 服务器(IIS)”包括管理工具

   建议勾选：

   默认已勾选项

   按需安装 IP 和域限制

   常见 HTTP 功能（不建议安装 WebDAV 发布）

   跟踪（即“失败请求跟踪”）
   

   请求监视器、日志记录工具、

   按需安装 ASP
   

   按需安装 ASP.NET 4.8（会同时勾选 .NET Extensibility 4.8、ISAPI 扩展、ISAPI 筛选器）

   按需安装 WebSocket 协议

   应用程序初始化（建议安装）

   管理服务（用于 Web 部署）

8. 细节：设置任务栏；设置桌面图标；个性化-颜色-勾选“标题栏和窗口边框”；设置输入法；

9. 更改远程桌面端口

10. 按需安装：

    下载 URL 重写（文件名：rewrite_amd64_zh-CN.msi）

    下载 MySQL Connector/NET（文件名：mysql-connector-net-8.0.19.msi）
    

    下载 ASP.NET Core 运行时 Hosting Bundle（文件名：dotnet-hosting-*.*.*-win.exe）
    

    下载 .NET 桌面运行时 Windows x64（文件名：windowsdesktop-runtime-*.*.*-win-x64.exe）

    下载 Web Deploy（文件名：WebDeploy_amd64_zh-CN.msi）

11. 服务：设置“ASP.NET State Service”自动启动
    

12. IIS 日志：路径（如 D:\wwwlogs），每小时（统一设置一个全局的就行了，不需要设置每个网站），按需勾选“使用本地时间进行文件命名和滚动更新”

13. IIS 导入证书：个人、允许导出证书。参

14. 设置默认网站的 https

15. 设置权限：设置网站所在分区（如 D 盘），安全，添加 IIS_IUSRS，全部拒绝（防止跨站）

16. 添加用户：为每个网站创建用户（既能防止跨站，又能跟踪进程），密码不能改、不过期，仅隶属于 IIS_IUSRS，并添加到每个网站的根目录，若用户创建失败看这里。

17. 创建网站：设置访问物理路径的用户；设置应用程序池的“标识”用户；编辑绑定：勾选需要服务器名称指示；检查域名是否绑全；设置写入目录；

18. 重复上面两步

19. 检查所有网站用户是否仅隶属于 IIS_IUSRS（在“组”页面双击 Users 和 IIS_IUSRS 查看成员）

20. 在应用程序池列表页面检查 CLR 版本、管托管道模式和标识；在网站列表页面检查绑定和路径
    

21. 设置 Web 部署

22. 设置“IP 地址和域限制”

23. 废弃旧服时再次检查：IIS 中各功能设置、hosts、安装的应用程序、启动项、服务、防火墙等

24. 更改默认端口

25. 解析各网站域名

26. 其它：资源管理器-查看-选项-查看-去掉“始终显示图标，从不显示缩略图”前的勾

27. 再次检查阿里云设置

28. 私网中若有 ECS 的 hosts 中域名直接绑定到私网 IP 的，做相应更改

29. 在备份工具中添加该服务器的所有备份项

>> 关于域名解析

因各地域名解析生效时间不可控，一般国内域名 1 天内，国际域名 2 天内。

• 若网站数据库在 RDS、上传文件在 OSS，则解析 48 小时后直接停止原网站即可；（比较理想的）

• 文件上传到 ECS 的可使用 FTP 等工具定时同步文件，或直接停止原网站。（网友会遇到新文章中图片无法显示等问题）

• 还有一种方法是新网站提前解析一个备用域名，确保完全生效后再修改正式域名的解析，原网站无条件跳转到备用域名，如果数据库中有保存完整网址路径的，关闭原网站并解绑备用域名之后，进行批量替换。（缺点是可能会影响在搜索引擎的网站权重）

• 部分有定时器的网站要注意，如果两个网站的定时器都正常开启会导致意外的，需要停止其中一个网站的定时器。
  

当然每种方法都有优缺点，选择可以接受且方便的一种即可。

更多文章：

从零搭建一台阿里云 ECS（Alibaba Cloud Linux / CentOS / Linux）并迁移网站

错误 TS5055 无法写入文件“***.js”，因为它会覆盖输入文件。

添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息，请访问 https://aka.ms/tsconfig。

检查“输出”窗口，找到“error”的行，并修复该错误。

一种可能的情况是，使用了 vue3 的 computed 计算属性。原因未知，尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值，同样报错。

首先，禁止网站下所有 .php 等文件均不允许被访问到。

在 nginx 网站配置文件中，include enable-php-**.conf; 上方插入：

location ~ ^/.*\.(php|php5|py|sh|bash|out)$ { deny all; }

其中，^ 匹配开始，/.* 匹配所有目录和文件名，\.(php|php5|py|sh|bash|out) 匹配文件后缀名，$ 匹配结束。

即便如此，仍然忽略了 nginx 中 .php 文件名后加斜杠仍然能访问到的情况，譬如我们访问这个网址：

https://xoyozo.net/phpinfo.php/abc.html

nginx 仍然运行了 phpinfo.php，给了后门可趁之机，所以改进为：

location ~ ^/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }

Discuz! X3.4 需要写入权限的目录：

• /自研目录/upload/

• /config/

• /data/

• /uc_client/data/

• /uc_server/data/

• /source/plugin/

但，这些都不重要，我们已经禁止了所有目录的 .php 访问了。

第二步，解禁需要直接被访问到的文件路径。

Discuz! X3.4 根目录下的 .php 文件都是入口文件，需要能够被访问到：

/admin.php
/api.php
/connect.php
/forum.php
/group.php
/home.php
/index.php
/member.php
/misc.php
/plugin.php
/portal.php
/search.php

其它目录中需要被直接访问到的文件：

/archiver/index.php
/m/index.php
/uc_server/admin.php
/uc_server/avatar.php
/uc_server/index.php

部分插件文件需要能够被直接访问到：

/source/plugin/magmobileapi/magmobileapi.php
/source/plugin/smstong/accountinfo.php
/source/plugin/smstong/checkenv.php

另外如果有自建目录需要有 .php 访问权限，那么也需要在此处加白，本文以 /_/ 目录为例

最终拼成：工具

location ~ ^(?:(?!(/admin\.php|/api\.php|/connect\.php|/forum\.php|/group\.php|/home\.php|/index\.php|/member\.php|/misc\.php|/plugin\.php|/portal\.php|/search\.php|/archiver/index\.php|/m/index\.php|/uc_server/admin\.php|/uc_server/avatar\.php|/uc_server/index\.php|/source/plugin/magmobileapi/magmobileapi\.php|/source/plugin/smstong/accountinfo\.php|/source/plugin/smstong/checkenv\.php|/_/.*\.php))/.*\.(php|php5|py|sh|bash|out)(/.*)?)$ { deny all; }

这里用到正则表达式中的“不捕获”和“负向零宽断言”语法，格式为：

^(?:(?!(允许的目录或文件A|允许的目录或文件B))禁止的目录和文件)$

值得注意的是，此句负向零宽断言中的匹配内容是匹配前缀的，也就是说

https://xoyozo.net/index.php
https://xoyozo.net/index.php/abc.html

都可以访问到，而

https://xoyozo.net/forbidden.php
https://xoyozo.net/forbidden.php/abc.html

都访问不到，这是符合需求的。

如果自建目录 /_/ 下有写入需求，单独禁止即可，以 /_/upload/ 为例：

location ~ ^/_/upload/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }

ThinkPHP 网站有统一的访问入口，可按本文方法配置访问权限。

特别注意：上面的代码必须加在 PHP 引用配置（include enable-php-**.conf;）的上方才有效。

附：一键生成 nginx 访问控制 location URI { } 语句工具

Senparc.Weixin.Sample.MP 盛派微信公众平台示例项目在 VS 中运行正常，当发布到 IIS 后出现应用程序池自动停止的情况，在服务器管理器中找到 .NET Runtime 错误，可以看到错误原因：

\App_Data\SenparcTraceLog 目录需要写入权限。

以下目录也需要写入权限：

\App_Data\WeChat_OfficialAccount

\App_Data\NeuChar

本文记录于 2021 年 9 月。

版本选择原因：

• Alibaba Cloud Linux 完全兼容 CentOS，相比于 CentOS 较短的生命周期，Alibaba Cloud Linux 3 将于 2029 年 4 月 30 日结束生命周期。

• Discuz! X3.4 不支持 PHP 8.0，安装时即报错，打开页面时一片空白。

• MySQL 8.0 和阿里云 RDS 的 MySQL 7.5 不支持 MyISAM，而数据表 pre_common_member_grouppm 和 pre_forum_post 使用联合主键且自动递增字段不是第一主键，使用 InnoDB 引擎创建表时会报“1075 - Incorrect table definition; there can be only one auto column and it must be defined as a key”错误，而擅自更改主键次序会影响业务逻辑。因此，在必须选择阿里云 RDS 的情况下，只能选择 MySQL 5.6。（2023年8月注：查看如何更改为 InnoDB）

• Discuz! X3.5 正式版尚未发布（截止发稿），即便发布，插件也可能不能得到及时更新。相比之下，X3.4 首个版本发布距今已有 4 年，相关第三方插件已经非常成熟。

完整升级步骤：

1. 备份原网站程序、RDS 数据库；

2. 购买新的 ECS、RDS，挂载磁盘，安装云监控；

3. 迁移（或还原）数据库到新的 RDS；
   

4. 安装宝塔面板并配置；

5. 安装 nginx 及 PHP；

6. 创建网站、配置 SSL、伪静态、防盗链、可写目录禁执行等（.conf）；

7. 配置 hosts；

8. 上传原网站程序到新的站点目录下；

9. 按 Discuz! X 升级文档升级 X3.2 至 X3.4；详情见下文 ↓；

10. 配置 OSS、Redis、更新缓存等；

11. 测试论坛基本功能是否正常；检查附件是否正常显示；全面检查控制台配置；

12. 逐个开启插件并检查兼容性；

13. 按二开备忘录逐个按需进行二开；

14. 逐个修改调用论坛接口的项目及直接调用论坛数据库的项目；

15. 调试 MAGAPP 接口；

16. 尝试强制 https 访问；
    

17. 将以上所有修改后的程序保留备份；发布升级公告并关闭论坛；重复以上步骤；修改域名解析；开启论坛；
    

18. 配置 IP 封禁、定时器、日志、自动备份、配置其它 ECS 的 hosts 等；

19. 查看搜索引擎中收录的地址，是否有无法访问的情况；
    

20. 尝试将历史遗留的本地附件全部转移到 OSS；

21. 参这篇文章，可能有其它需要配置的地方。
    

Discuz! X 升级步骤及注意点：

• 升级前务必先修改 ./config/ 目录下的数据库/缓存连接信息，以防出现新站连接老库的情况；

• 按官方文档进行升级；
  

• 【问题】运行到 ./install/update.php?step=data&op=notification 时白屏。

  【排查】尝试切换到 PHP 5.6 后成功（但该版本过于陈旧不能使用）；尝试升级 CPU 和内存 PHP 7.4 上升级仍不成功。

  【原因】DB::result_first() 方法不对 SQL 语句追加“limit 1”，而是 SELECT 所有记录后在 PHP 端取第一条数据；

  【解决】打开文件 update.php，查找 elseif($_GET['op'] == 'notification')，该节点的功能是在表 home_notification 中查找 category <= 0 的数据并修复它，如果数据库中所有 category 都大于 0，直接注释其内部 if 代码段继续升级即可（或改为 if(false && ...)）。

• 【问题】发布主题遇到错误：(1062) Duplicate entry '*' for key 'pid'

  【原因】forum_post 中的 pid 不是自动增长的，而是由表 forum_post_tableid 中自动增长的 pid 生成的。如果生成的 pid 值已在 forum_post 表中存在，则会出现此错误。

  【解决】迁移数据库时应关闭论坛，以防止 forum_post 表有新数据插入。

• 【问题】打开帖子页面 ./thread-***-1-1.html 显示 404 Not Found，而 ./forum.php?mod=viewthread&tid=*** 可以正常打开

  【原因】未配置伪静态（可在宝塔面板中选择）

• 【问题】打开 UCenter 时报错：UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists'

  【解决】打开文件 ./uc_server/data/config.inc.php 配置数据库连接

• 【问题】打开登录 UCenter 后一片空白

  【解决】将目录 ./uc_server/data/ 设为可写

• 需要将原来安装的插件文件移回 ./source/plugin/ 目录，并设置可写；

• 界面-表情管理，界面-编辑器设置-Discuz!代码

后续 Discuz! X3.4 R 小版本升级注意事项：

1. 确认插件是否支持新版本（如短信通）

2. 先创建一个新网站测试二开代码

3. 保留 /config/、/data/、/uc_client/data/、/uc_server/data/、/source/plugin/，其它移入 old

4. 上传文件

5. 移回其它需要的文件，如：

6. -- 勋章/loading/logo/nv 等：/static/image/common/

7. -- 表情：/static/image/smiley/

8. -- 水印：/static/image/common/watermark.*

9. -- 风格：/template/default/style/t2/nv.png 等

10. -- 默认头像：/uc_server/images/noavatar_***.gif

11. -- 根目录 favicon.ico 等
    

12. -- 及其它非 DZ 文件

13. 再次检查可写目录的写入权限和禁止运行 PHP 效果。

使用 JS 根据屏幕宽度来计算页面尺寸和字体大小并不是一个好办法。

rem 单位是跟随网页根元素的 font-size 改变而自动改变的，是一个相对的长度单位，非常适合在不同手机界面上自适应屏幕大小。 

一般的手机浏览器的默认字体大小为 16px。即：

:root { font-size: 16px; } /* 在 HTML 网页中，:root 选择器相当于 html */

也就是说，如果我定义一个宽度为 1rem，那么它的实际宽度为 16px。反过来说，如果设计稿宽度为 1000px，那么相当于 1000÷16=62.5‬rem。因此，我们设置一个 62.5rem 的宽度，即可正常显示 1000px 的设计效果。

为了适应不同屏幕尺寸的手机，只需按比例换算更改 :root 的 font-size 即可。这个比例是由“窗口宽度 ÷ 设计稿宽度”得到的，姑且称它为“窗设比”。

以 iPhone X 逻辑宽度 375px 为例，设计稿宽度 1000px 时，窗设比为：0.375。:root 的 font-size 将会被重置为 16 * 0.375 = 6px。上面的 62.5rem 宽度将对应 iPhone X 宽度为 62.5 * 6 = 375px，正好是屏幕逻辑宽度。

根据这个思路，理论上，我们只需要使用 CSS 将 :root 的 font-size 设置为 1px，然后使用 JS 重置为与“窗设比”相乘的积（本例中将被重置为 0.375px）。这样，我们可以不通过换算，只需要更改单位，将设计稿中的 500px 直接写入到 CSS 为 500rem，即可实现在 iPhone X 上显示逻辑宽度为（500 * 0.375 =）187.5px，即设计稿中的 1/2 宽度对应到屏幕上 1/2 的宽度。

实际上，部分安卓手机（如华为某旗舰机）不支持 :root 的 font-size 小于 12px，其它一些浏览器也会出现小于 12px 的文字以 12px 显示。

为了避免在任何环节出现小于 12px 的 font-size 值，且不增加设计稿尺寸到 CSS 数值的换算难度，我们设计了以下思路：

1. 约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；

2. 使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；

3. 计算 CSS 时的 rem 值只需从设计稿中获取 px 值再除以“设样比”100 即可。 

这样做的另一个好处是，不用要求设计师必须按多少尺寸来设计，当然按主流尺寸来建议是可行的。

完整代码（jQuery 版）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; background-color: #EEE; display: none; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // [函数] 重置尺寸
        function fn_resize() {
            // 设计稿宽度（px）
            var designsWidth = 1000;
            // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
            var px2rem = 100;
            // 限制 #app 的最大宽度为设计稿宽度
            $('#app').css('max-width', designsWidth).css('min-height', $(window).height());
            // 重置 :root 的 font-size
            var appWidth = Math.min($(window).width(), designsWidth);
            $(':root').css('font-size', px2rem * appWidth / designsWidth);
            $('#app').show();
        }
        // 页面加载完成后重置尺寸
        $(fn_resize);
        // 改变窗口大小时重置尺寸
        $(window).resize(fn_resize);
    </script>
</body>
</html>

完整代码（Vue2 版）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; background-color: #EEE; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px' }" style="display: none;" v-show="appShow">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
        <div>appWidth: {{ appWidth }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 设计稿宽度（px）
                designsWidth: 1000,
                // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
                px2rem: 100,
                // #app 的 width
                appWidth: 0, // 勿改
                appMinHeight: 0, // 勿改
                appShow: false, // 勿改
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                    this.appShow = true;
                }
            },
            methods: {
                fn_resize: function () {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                    this.appMinHeight = document.documentElement.clientHeight;
                }
            }
        });
    </script>
</body>
</html>

完整代码（Vue3 版）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app > div { display: none; margin: 0 auto; background-color: #EEE; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div style="display: none;" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px', display: appShow ? 'block' : 'none' }">
            <div class="whole">100%</div>
            <div class="half">50%</div>
            <div class="half2">50%</div>
            <div>appWidth: {{ appWidth }}</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    // 设计稿宽度（px）
                    designsWidth: 1000,
                    // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
                    px2rem: 100,
                    // #app 的 width
                    appWidth: 0, // 勿改
                    appMinHeight: 0, // 勿改
                    appShow: false, // 勿改
                }
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                    this.appShow = true;
                }
            },
            methods: {
                fn_resize: function () {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                    this.appMinHeight = document.documentElement.clientHeight;
                }
            }
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>

示例中 CSS 初始 :root 的 font-size 为 16px（一个较小值，防止页面加载时瞬间出现大号文字影响用户体验），经过 fn_resize 后，:root 的 font-size 被设置为（100 * 375 / 1000 =）37.5px（iPhone X 中），那么宽度为 1000px 的设计稿中的 500px 换算到 CSS 中为 5rem，也即 37.5 * 5 = 187.5px，就是 iPhone X 的屏幕宽度的一半。

示例中 id 为 app 的 div 是用来在 PC 浏览器中限制页面内容最大宽度的（类似微信公众号发布的文章），如果网页不需要在 PC 端显示，jQuery 版代码中的 $('#app').width() 可以用 $(window).width() 来代替。

这个 div#app 一般设计有背景色，用于在宽度超过设计稿的设备上显示时区别于 body 的背景。但是当网页内容不超过一屏时，div#app 高度小于窗口，示例中与 appMinHeight 相关的代码就是为了解决这个问题。

示例中 div#app 隐藏/显示相关代码用于解决在页面加载初期由于 font-size 值变化引起的一闪而过的排版错乱。

最后补充一点，如果改变窗口大小时涉及执行耗时的操作，为避免页面卡顿，可以参考这篇文章添加函数防抖：https://xoyozo.net/Blog/Details/js-function-anti-shake

数据表所占用的空间（简称“表空间”）一般会大于其数据空间和索引空间的和。

当数据被删除时，其所占空间并不会立即释放，而是等待新数据写入，这会导致出现许多磁盘碎片。使用 OPTIMIZE TABLE 或 ALTER TABLE 可以回收碎片，重组文件。优化表的过程类似于 Windows 碎片整理。

操作过程会导致该表上的写操作无法执行。

一般在删除了大批量数据或更改了许多可变长度字段后执行优化表。

碎片率 = 100% - (数据空间 + 索引空间) / 表空间

优化后碎片率接近于 0%，数据空间和索引空间也会变小，此时 表空间 接近于“数据空间 + 索引空间”

在 MyISAM 引擎上遇到优化后导致获取行数为 0，SELECT 数据只有 1 条的情况，需要执行修复表（REPAIR TABLE），使数据恢复正常。执行后结果显示：Number of rows changed from 0 to xxxxxx

〓 系统

〓 文件

〓 tar

〓 磁盘

〓 网络

〓 防火墙

〓 用户/权限

〓 vi 编辑器

〓 计划任务

〓 网站

〓 goaccess

〓 lnmp

〓 nginx

〓 vsftpd

〓 MySQL

〓 scp 远程文件/目录传输命令 (yum install openssh-clients) 用法

scp 会把文件权限（读取/写入/执行）带过来，但所有者为当前执行 scp 命令的用户。

scp 低版本有许多漏洞，用完最好 yum remove openssh-clients

scp 采用直接覆盖的机制，如需判断文件无差异则跳过，应改用 rsync 命令。查看 rsync 详细使用方式及与 scp 对比

〓 rsync 远程文件/目录传输命令 (yum install rsync) 用法查看 rsync 详细使用方式及与 scp 对比

rsync 会把文件权限（读取/写入/执行）带过来，所有者也会带过来。

相比于 scp 最大的优势就是可以增量同步

〓 ftp 客户端 (yum install ftp)

〓 iftop

流量监控工具 教程 

〓 GoAccess

实时网站日志分析工具 官网 

〓 Cacti

网络流量监测图形分析工具 官网  百科 

常见问题笔记

加硬盘

• 插入新硬盘

• 若有 RAID，则先设置，使操作系统能认到硬盘

• 使用 fdisk 命令对新设备进行分区

• 使用 mkfs 命令对新分区进行格式化

• 使用 mount 命令进行挂载

• 设置开机自动挂载（vi /etc/fstab）

更改 MySQL 数据库目录位置

• 停止 MySQL 服务

• 将原数据目录转移或复制到新位置（若是复制，则修改所有者使原来一致）

• 找到 my.cnf 配置文件（一般在 /etc/），修改 datadir 值为新路径

• 启动 MySQL 服务

502 Bad Gateway 问题排查

• 查看 PHP 日志，路径：/usr/local/php/var/log

• 一般为“server reached pm.max_children setting (10), consider raising it”连接数问题，在“/usr/local/php/etc”下的所有配置文件中查找并修改相关设置即可（如改成 1000）。

计划任务（实例：定时备份数据库并通过 FTP 同步至其它服务器）

• 创建可执行文件：vi dotask.sh

• dotask.sh 的内容示例：
  

  DATE_TIME=`date +%Y_%m_%d_%H%M%S`;
  FILE_NAME=数据库名_backup_$DATE_TIME.sql;
  cd /home/mysqlbackup/;
  mysqldump -u数据库用户名 -p数据库密码 数据库名>$FILE_NAME;
  tar -zcf $FILE_NAME.tar.gz $FILE_NAME;
  rm $FILE_NAME;
  
  ftp -v -n FTP地址 << END
  user FTP用户名 FTP密码
  bin
  put 本地目录文件 目标路径文件
  bye
  END
  

  
  文件名乱码问题可以在行末加“;”来解决

• 赋予执行权限：chmod 777 dotask.sh （ls 命令时呈绿色）

• 编辑计划任务：crontab -e

• crontab 书写规则：
  

  # 分 时 日 月 周 文件路径
  0 3 * * * /home/dotask.sh
  30 4 * * * /home/dotask2.sh
  

  
  更多帮助 

• 重启 crond：/etc/init.d/crond restart

netstat

• netstat -an | grep xxx.xxx.xxx.xxx 可查看此 IP 的 TCP 请求及端口