毕设周记4 - Grass

题目：刷脸签到系统
姓名：余聪
学号：19130126

最近两周，主要完成了 1. 项目的外网部署。 2. 将站点封装成跨平台app。 3. SEO 优化与站点提交。

使该项目能够方便得被访问，调高该web应用的可用性。现在只需要使用谷歌浏览器访问 https://face.moyuyc.xyz 即可查看。

项目的外网部署

数据迁移

部署首先需要考虑的，便是数据库的迁移了。为了方便数据的迁移，对于人脸录入表 (face-import) 中的人脸图片，没有将上传的样本数据存储在服务器中，而是存在 sm.ms 免费图床中，得到一个 face_url 字段，每次启动服务器之前都得进行样本的训练或者训练数据的读取；而且每次上传样本或者删除样本后，服务器都需要重新训练保存样本，重新生成一套特征脸。并且在开启服务器的环境和纯粹的数据处理的环境对于数据库的处理是不一样的，在服务器环境，需要开启数据库连接池，每次都从中去取出连接进行数据操作；而纯粹的读取数据库，得到face_url进行人脸的预处理或训练，则只需要每次单独的开启连接 -> 读取数据 -> 关闭连接即可，否则程序会一直运行下去，因为数据库连接池没关闭。

代码迁移

源码都部署在 GitHub 上，所以在联网的服务器上，直接 git clone 就可以得到源码了（原始证照和预处理后的证照、训练的 yaml 数据都没提交至 GitHub，所以代码库还是挺小的）。

环境配置

服务器系统环境为 Ubuntu，在 Ubuntu 上安装 opencv，Ubuntu 上可没有 Homebrew “神器”，所以只能下载源码包，自己进行编译连接，生成动态链接库。

安装好 node + npm + nvm，node 版本 ≥7.0，以及 mysql，导入 gp.sql。

再在服务器执行 npm install（安装项目依赖包，各个目录下都有自己独立的依赖包，前端目录则不必安装，因为只需要其产生的代码） => 下载脚本 => 预处理脚本 => 训练样本脚本 => 启动服务器

nginx + https

但是服务器启动后，外网还是不能直接访问，需要通过 nginx 反向代理，同时解析域名至服务器 IP，为了 Chrome 浏览器安全可以打开摄像头，还需要开启 HTTPs 协议，我使用的是腾讯云免费的一年证书，然后 nginx 配置后即可。

配置如下：

upstream p8778 {
    server localhost:8778;
}

server {
    listen 443 ssl;

    server_name  face.moyuyc.xyz;
    ssl_certificate /etc/nginx/.ssl/face.moyuyc.xyz.crt;
    ssl_certificate_key /etc/nginx/.ssl/face.moyuyc.xyz.key;

    add_header Strict-Transport-Security "max-age=31536000";
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers    HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://p8778;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

}

将站点封装成跨平台app

为了方便师生使用，还使用 nativefier 将站点打包成 PC Desktop，其实就是将站点 URL 和 Chrome 内核组合成一个 Application

Desktop打包脚本

// package.json
// usage: npm run script-name

"app:mac64": "set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ && nativefier -c -a x64 -p mac --insecure -n 古南师大刷脸签到 https://face.moyuyc.xyz/ -i desktop/logos/logo.icns --disable-dev-tools --disable-context-menu desktop",
"app:mac32": "set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ && nativefier -c -a ia32 -p mac --insecure -n 古南师大刷脸签到 \"https://face.moyuyc.xyz/\" -i desktop/logos/logo.icns --disable-dev-tools --disable-context-menu desktop",
"app:mac": "npm run app:mac32 & npm run app:mac64",
"app:win": "npm run app:win32 & npm run app:win64",
"app:win32": "set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ && nativefier -c -p win32 -a x64 --insecure -n 古南师大刷脸签到 \"https://face.moyuyc.xyz/\" -i desktop/logos/logo.png --disable-dev-tools --disable-context-menu desktop",
"app:win64": "set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ && nativefier -c -p win32 -a ia32 --insecure -n 古南师大刷脸签到 \"https://face.moyuyc.xyz/\" -i desktop/logos/logo.png --disable-dev-tools --disable-context-menu desktop",

SEO 优化与站点提交

搜索引擎优化（search engine optimization，SEO），是一种通过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。

站点提交

添加 robots.txt

User-agent: *
Sitemap: https://face.moyuyc.xyz/sitemap.txt

站点地图

https://face.moyuyc.xyz/about
https://face.moyuyc.xyz/face-import
https://face.moyuyc.xyz/admin