記一次投票項目

前言

　　幾周前接到一個親戚的留言，說是他們公司的工會想做個網頁。由於最近朗讀者之類的節目比較火，又是臨近一個不大不小的節日，於是想做一個可以播放兒童朗誦的投票頁面，可以在手機端訪問，並且進行投票。
　　這家公司人數規模比較大，有上千人，兒童比例也不少。親戚聽說我是做網頁的，想拜托我做這個。制作時間只有一周，時間略緊。

確定需求

　　和對方公司工會的秘書溝通后，對方的需求很明確。

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內，有時間會逐步貼進博客園里。