记一次投票项目

前言

　　几周前接到一个亲戚的留言，说是他们公司的工会想做个网页。由于最近朗读者之类的节目比较火，又是临近一个不大不小的节日，于是想做一个可以播放儿童朗诵的投票页面，可以在手机端访问，并且进行投票。
　　这家公司人数规模比较大，有上千人，儿童比例也不少。亲戚听说我是做网页的，想拜托我做这个。制作时间只有一周，时间略紧。

确定需求

　　和对方公司工会的秘书沟通后，对方的需求很明确。

1. 给了一个有效的网页，样式可以照搬，对于我一个不咋写样式的后端程序员来说可以省下一不少麻烦。
2. 投票时间为3天。
3. 需要限制为lifetime的一人三票，每票必须投给不同的目标。

　　但是缺点同样很明显

1. 没有服务器，没有域名，没有公众号，不肯出执照。

　　于是问题来了，服务器和域名可以在阿里云上面买，阿里云是付费即时到货的，但是现在除了在通管局备案外还要进行公安局备案，一周的时间不知道够不够。

　　好在我之前学习使用了Github Pages和Heroku于是先写了个demo测试一下备选方案。

制定备选方案

　　Github Pages只能运行html代码，Heroku能运行php代码，阿里云数据库的话，不进行备案也是可以用的。

• 在Github Pages上随便搞了个html，请求Heroku上的api，往阿里云数据库里存数据，成功。
• Github Pages有每月100G或100,000请求数[?]的带宽限制，由此处得知

GitHub Pages sites have a recommended bandwidth limit of 100GB or 100,000 requests per month. If your site exceeds that quota, you may receive a polite email from GitHub Support suggesting strategies for reducing your site’s impact on our servers, including moving to a different hosting service that might better fit your needs.

　　然而在该回答所引用的source中并没有找到关于100,000请求数的限制。

GitHub Pages source repositories have a recommended limit of 1GB .
Published GitHub Pages sites may be no larger than 1 GB.
GitHub Pages sites have a soft bandwidth limit of 100GB per month.
GitHub Pages sites have a soft limit of 10 builds per hour.

• Heroku有每月550h的免费使用时间，没有请求数或带宽限制
• 使用移动4G和电信wifi下实测demo链接速度，Github Pages比Heroku用时少得多。

　　综合上面得出备选方案

1. Github Pages(html)+Heroku(php)+aliyun数据库(MySql)
2. Heroku(html+php)+aliyun数据库(MySql)

　　虽然Github Pages的usage limits里没有关于100,000请求数的限制描述，宁可信其有不可信其无。
　　鉴于客户的使用人群广大（该公司员工数上千，朋友圈一发分分钟破万），决定若一周时间无法通过两次备案则使用2号备选方案。

检查需要的素材

1. 网页样式已有，经过测试，该样式适用于大部分常用手机内置浏览器和微信浏览器。
2. 该网页内使用的是audio标签，js控制载入所播放的mp3文件地址。
   2.1 通过caniuse audio可得该标签被除Opera Mini外所有浏览器支持。
   2.2 通过caniuse mp3可得mp3格式的音频文件被除Opera Mini外所有浏览器支持。
3. 投稿图片需切成4:3的大小，使用ps切一下图也用不了很多时间。

告知客户既定事项

　　接下来就是把一些事项和客户工会的秘书罗列清楚，假如他们都可以接受，再进行开发。

• 声明网页访问速度可能会比较慢（一周的时间比较紧张，如果备案过不了审，则需要用备选2号）。
• 每份投稿必须包含一张图片和一个mp3音频，音频长度不得超过4分钟。
• 由于网页内图片显示的合适高宽比是4:3，对于一般的照片会进行裁剪。
• 非mp3格式的文件会被转为mp3格式，假如转换后无法播放，则需要重新提供文件。
• 音频会进行码率和采样率的压缩，所以音质会有所下降。
• 由于开发周期较短，所以这些事项确定后，不能再变了。
• 投产前一日会提供测试链接，并于测试通过后，提供一枚特别定制的二维码与正式链接以供投放。
• 项目结束当天，会提供所有参赛者以及相应票数的excel表。

网站资源

网站空间

　　购买域名、租服务器，上阿里巴巴都能快速搞定，支付宝扫一扫付钱，域名和服务器即时到帐。
　　由于这次时间较紧，我没有买云ECS而是买了预装PHP+MySQL环境的独享虚拟机，这里有个坑需要了解

1. 云服务器ECS：买完给一个空的linux或windows环境（可选），用yum或其他什么装软件，自己配置运行环境，可以使用putty远程连接。底配1核1G1Mbps40G云盘空间可选系统一个月68块，一年8.5折693.6块。
2. 云虚拟主机：买完给个虚拟主机，环境都搭配好了，只有网页上的控制面板，给有限的PHP5.1～5.5环境选择，MySql只有5.1没得选，php.ini只给了有限的几个选项，可以随意删除/tmp目录（session的保存目录）下的和/dev/home/username/htdocs目录下的文件。底配1核1G1Mbps5G网页空间500M数据库一年298块。

工信部备案

　　新买的域名都要先去工信部备案，跟着流程一步步走。
　　由于我是在阿里云上买的域名和服务器，工信部备案可委托阿里云进行（这也是我选择阿里云的一个理由）。
　　只要打印一张委托书，打印出来填上姓名日期拍个照，剩下交给阿里云。
　　备案审核通过后，预留的手机号会收到【工信部备案系统】发来的短信通知，邮箱也会收到【阿里云备案】发来的《通管局审核通过》邮件。

工信部备案审核通过（收到短信和邮件）后需要约1日的时间，才能在工信部查询网上查到。

　　必须要确保能够在工信部查询网上查到自己的备案号，才能进行公安局网站备案，查不到的话即使提交了备案也会被驳回。
　　这一步操作我用了3天（包括一个周末），不知道是不是委托了阿里云的关系。

公安局备案

　　根据公安局的一个通知，所有的网站必须在当地公安局进行网站备案，上海的通知长这样。
　　公安局备案得自己来搞，分为两步。

1. 第一步，增加开办主体，这里有个需要注意的地方，常住地址一定要写常住地址，按照实际情况填写，不一定必须是户口所在地址，公安局的信息都是联网的，这个信息自己斟酌。
2. 第二步，新办网站申请，这里有用到通管局给的备案号，必须要能够在工信部查询网上查到自己的备案号后，再填写。

• 有些信息，比如服务器存放物理地址、域名注册服务商、接入方式等，可以下阿里云的工单，阿里云工程师回复得特别迅速，一般2小时内就有解答。
• 另外上海的公安局备案流程可能和其他地儿有些不同，第一次提交会被驳回，然后给个qq号，加群以后要填一个excel表，单独发给群主，再提交。信息都对的话，就能通过了。

　　这一步我用了2天，其中第一步主体审核可以和工信部备案一起做，互不影响。公安局审批还是挺迅速的，一般提交后过个把小时，就能收到通过或拒绝的短信通知。

开始开发

样式

　　网页样式这块直接拉过来就能用，唯一需要变动的是页首的图片背景，对彩色渐变文字以及一些小图标进行替换 小图标可以上iconfinder找，有免费使用的。

接口

　　终于用上了我自己造的api根文件和db类。
　　由于客户要求要将投票方限制为个人，却又没有微信公众号，而且不允许增加短信验证和图形验证，说是怕影响参与人数。无奈下只能进行IP限制，将私有地址和广播地址进行排除。以防万一顺便加了个自定义ip地址排除。

投稿图片裁切

　　客户发过来的照片需要按照4:3的大小把脸切出来，使用PS的矩形工具(U)固定大小、自由变换Ctrl+T、按比例缩放Shift+拖、裁剪工具(C)、调整图像大小Alt+Ctrl+I，对某些倾斜的照片摆正后使用仿制图章工具(S)进行修复等操作。五十多张图切下来，对PS的快捷键有了大致的了解。

音频压制

　　之前想着这个音频随便一压，就用格式工厂（FormatFactory，简称FF），没想到在客户发来的音频各种各样格式都有，有些格式的音频被FF转压过以后会缺斤少两。
　　犹豫间想到了大学时压片用的MeGUI（下称MG），凭借记忆，稍微配置了一下。经测，针对同一个音频进行mp3转换并压缩，MG压制的速度和FF差不多且不会缺斤少两。MG可以将音频码率压到8bit，而FF只能压16bit。

微信跳转

　　开发过程中用到微信扫一扫进行测试，发现会先进入蓝色感叹号页面，进行站内跳转也会先显示蓝色感叹号。按照页面内提示，提交了通管局的备案号，约2天后，蓝色感叹号页面便不出现了。

投产

　　投产前一日，将一个测试地址发给客户秘书，客户内部查看样式并进行微调。
　　当晚，清表清tmp，将带宽提升到7M。客户秘书告知将于约定日的上午八点半进行二维码与链接的投放。
　　约定日当天，上午八点半，带宽用量飙升，又加了2M，提到9M。经观测没有再出现破峰值。

图为投产日下午阿里云控制器显示的用量截图。 

增加带宽的坑

　　阿里云虚拟机增加带宽有个坑，如下表所示。

M数	月数	页面显示应付金额	按25/M/月计算应为
1	1	25	25
2	1	50	50
3	1	79	75
4	1	179	100
5	1	279	125
1	2	50	50
2	2	100	100
3	2	175	150
4	2	358	200
2	3	150	150
3	3	237	225
2	4	200	200
3	4	316	300

　　由此表可得，假如要买带宽，每次2M的买比较划算，经实测一天至少可连买4次。由于业务用量已够，也没有测试更多的购买量。

刷票封禁

　　因为客户这个不准那个不准，在投放当日的10点多果然出事了。有一名参赛者的票数异军突起，高出第二名800多票。经过查看记录，有600多票是在近20分钟内投出的，显示的来源IP均不同，且IP为正常值，符合先前制定的规则。在做表的时，抓取了投票请求的请求头，经过分析发现了不同。

\	正常请求值	刷票请求值
$_SERVER[‘HTTP_ORIGIN’]	'http://www.xxx.com'	''
getallheaders()[‘Origin’]	'http://www.xxx.com'	2

　　发现问题后，和客户进行了沟通，客户协商后决定将刷票方的票数退回，并由客户方领导对享受刷票的参赛者进行口头劝诫。
　　虽然出现了刷票问题，客户也表示不需要增加限制，但是还是对这一现象增加了代码限制。
　　之后直到投票结束，没有发现其他的突发情况。

项目结束

　　项目结束当天早上，导出以票数为排序的参赛选手excel表发给客户秘书。

总结

　　经过这次完成的这个完整的项目，归纳下来制作一个项目需要的能力和资源有

• 网站，域名（硬件）
• 创意或者借鉴能力（设计师）
• 基本PS制图能力（美工）
• 根据项目的需要，一些其他的技术，比如这个项目中用到了压片技术（技术，杂项）
• 沟通，接单前和客户方代表的需求了解，分析（AC，PM）
• 应变，监控票数，根据已遭遇的刷票手段尽快的给出解决方案（技术，经验）

Reference

What are bandwidth and traffic limits for GitHub pages? - quora
What is GitHub Pages? - github
为你揭开阿里云公安备案的神秘面纱！申请到成功历时22小时 - 阿里云开发者论坛

备注：本文发布于2017-06-06，最近写文章都用md，文章也直接发到了我个人的github page内，有时间会逐步贴进博客园里。