※ [本文转录自 Soft_Job 看板 #1N3ndQDg ]
作者: Linux (Windows) 看板: Soft_Job
标题: [心得] 个人前后端开发心得 - 北港迎妈祖网站
时间: Thu Apr 14 12:17:26 2016
Hi (),
很久没来版上 PO文章了 >"<
最近忙着帮忙我们家乡的活动制作网站，
几本上我是属于义务性帮忙、非官方、没盈利的自主服务(XD)，
每一年的制作这个网站我算是不断自我突破吧(疑？)，
从后端、系统、设计、切版、上稿，我尝试一个人完成！
话题扯远了，回到正题，这个网站我要分享的是前、后端以及系统部分，
如果内容不 OK 可以跟我讲一下喔！
http://mazu.ioa.tw/maps/dintao
从设计开始，我参考了 Material Design 的角度去设计版面以及流程，
不过当然的，手机与网页的表现还是会有些许的差异，
但是整体我仍然尽量参考规范ＸＤ
PHP 这次我就使用了很潮的 php7，跑起来貌似有变快，
因为我的爬虫变快了，所以整体来说算是很满意，
只是有些 function 需要稍做调整，不过大致上都很健康！
JavaScript 这次主力都在 Google Maps API 的运用，
因为三年前我将此地图资讯与庙会遶境路线做了结合，
开启了我对 Google Maps 运用的热爱，所以今年也是把他当主力，
活动当天没意外的话，我会结合 GPS 线上定位！
CSS 的部分，我则是使用 compass scss 去实作，
javascript 的话则是使用 jQuery 以及一些其他的 lib 实作！
因为前后端都自己包办，所以 Framework(CodeIgniter) 我做了一些修改，
让这些静态 css、javascript code 上 production 时候自动的 merge 以及 minify。
在静态档案的处理，我利用 S3 强大的空间功能，
将网站的图档资源、js、css 都上到 S3 以减少 EC2 的 Loading，
所以说，S3 上的 js、css 都是已经 minify 的了，
而图片档若是遇到大档案，则利用 TinyPNG 去对图片做压缩，然后再上传到 S3，
对了，以上当然是用程式跑的：）
再来则是 HTML，基本上网站前台都是使用大量的文章以及简介，
所以可以做大量的 cache，然后这部分采用 file cache 而已，
虽然我有原本打算使用 Redis 去实作，但是我把内存留给 MySQL 了..
(我没开 RDS，MySQL 是上在与 Server 同一台的 EC2)
因为有作 output 的 cache，所以我也顺便将 HTML minify 囉，
因为做 HTML 的 output cache，所以浏览人数的纪录就不能跑 php 做 +1，
所以这部分我使用 Ajax 去实作回传人气的纪录！
最后 SEO，以及相关搜寻的设定，robots.txt、Sitemap 不用讲，一定会做，
这次我还加入了一点点的 schema、Google AMP、JSON-LD 的结构，
这些都是去喂 Search Engine 想吃的菜！
其实过程中我学到很多经验，也尝试很多架构，这次我使用 AWS 的服务，
主要开了一台东京 t2.micro 的 EC2，以及使用 S3 的服务而已，
网页流量，据我看 GA 的即时人数，最高曾经落在 1900 多人，
可能有些页面是使用 S3 吧，所以都撑得住！
这是目前我个人做过最高流量的网站，相对的也是个人里程碑！
以上是我的经验、心得分享， 回到做网站初衷，我只是个热爱故乡的乡土文化，
想为家乡尽一分力，利用自己的专长技术，支援这个从小的信仰，如此简单。
文章有点太长，如果看到这里的朋友，非常感谢您将它看完，
如果大家有想要来北港玩的，倒是可以看看网站内容喔！
以下是我的 GitHub 资源：https://github.com/comdan66/mazu
网站 Demo：http://mazu.ioa.tw/
若是文章不适合再版上讨论的话，可以跟我说一下 >"<
有问题或疑问的话，非常欢迎各位讨论喔：）