記一次投票項目

前言

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

肯定需求

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

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