作者Linux (Windows)
看板Soft_Job
标题[心得] 个人前後端开发心得 - 北港迎妈祖网站
时间Thu Apr 14 12:17:26 2016
Hi (),
很久没来版上 PO文章了 >"<
最近忙着帮忙我们家乡的活动制作网站，
几本上我是属於义务性帮忙、非官方、没盈利的自主服务(XD)，
每一年的制作这个网站我算是不断自我突破吧(疑？)，
从後端、系统、设计、切版、上稿，我尝试一个人完成！
话题扯远了，回到正题，这个网站我要分享的是前、後端以及系统部分，
如果内容不 OK 可以跟我讲一下喔！
https://www.ioa.tw/Mazu/pages/index.html
从设计开始，我参考了 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：
https://www.ioa.tw/Develop/FullStack-2016-Mazu-GPS.html
若是文章不适合再版上讨论的话，可以跟我说一下 >"<
有问题或疑问的话，非常欢迎各位讨论喔：）
--
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 211.23.19.91
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1460607450.A.36A.html
1F：推 YahooTaiwan: 不是很喜欢看到控制码... 04/14 12:25
2F：推 aids61517: 未看先推大大的作品 04/14 12:33
3F：推 rurikaxx: 技术面的东西听起来还不错 好奇是几年经验的工程师? 04/14 12:45
4F：→ Linux: 我 78年次，没读研究所XD 04/14 12:48
6F：推 kusozack: 网站还不错 不过怎麽会知道我 我只是默默潜水的小朋 04/14 13:20
7F：→ kusozack: 友 04/14 13:20
8F：→ dnabossking: ㄧ楼的大大说了 04/14 13:22
9F：推 yfr: 东西做得不错，但我也是不喜欢控制码 04/14 13:26
10F：→ vn509942: 挺棒的 04/14 13:27
11F：推 kusozack: 控制码？ 04/14 13:32
12F：→ SoftMen: 你看第一页最下面 04/14 13:40
13F：→ SoftMen: ▲此页内容会依阅读者不同,原文未必有您的资料 04/14 13:40
14F：→ SoftMen: 这就是有控制码 04/14 13:40
15F：推 michealking: 怀念控制码~~~~~ 04/14 14:31
16F：推 racering: 是在叫我？ 04/14 15:28
17F：→ Ekmund: 我不是前端的 但个人建议 可以的话 尽量不要一堆资讯挤一 04/14 15:42
18F：→ Ekmund: 页 效果跟满是字的ppt一样... 04/14 15:42
19F：推 jakert123: 推 04/14 15:52
20F：推 coronach: 半个北港人推 04/14 16:46
21F：推 xevisu: 太神啦～～～ 04/14 17:34
22F：→ bndan: 如果楼上属实..这在前端算蛮严重的事= = 04/14 18:49
23F：→ abc0922001: 推～～ 04/14 21:01
24F：推 atpx: 强~~ 04/14 21:06
25F：推 chrome: 看这风格和 Google Map, 马上想到之前的大富翁游戏 04/14 21:22
26F：→ chrome: 没想到一查 真的示原作 XD 04/14 21:24
27F：推 simpleJA: 感谢分享，推 04/15 00:53
28F：推 dlikeayu: 不错，行动派的 04/15 06:31
29F：推 polppk: 同为78年北港人工程师推XD 04/15 07:41
30F：推 missdian: 北港人推！谢谢你为家乡尽一份心 ：） 04/15 10:43
31F：→ rurikaxx: js怕被偷就不要写web 怕热就不要当厨师 04/15 15:13
32F：→ storyn26383: 回 r 大，原 PO 并没有偷别人的 JS，请不要误会原 PO 04/15 15:39
33F：→ Linux: 回r大，不是故意 minify 而是降低网路传输成本 04/15 17:00
35F：→ Linux: 连 Google 都会建议你 css、js、img 都压缩比较好 04/15 17:01
36F：→ Linux: 若r大想看我的 js，直接到我的 GitHub 看就好啦～ 04/15 17:02
37F：→ peterlai: 很好奇phpQuery使用上资源消耗会比XPath 04/15 18:25
38F：→ peterlai: 小吗？！ 04/15 18:25
※ 编辑: Linux (111.249.181.38), 04/15/2016 23:00:34
39F：推 rurikaxx: 我不是在呛原PO..我是在呛正义魔人XD 我觉得原PO很棒棒 04/16 11:12
40F：→ rurikaxx: 正义魔人不喜欢js被偷的话 就不要写web 04/16 11:13
41F：→ rurikaxx: 附带一提..保护js会用js混淆工具 minify只是降低流量XD 04/16 11:18
42F：→ storyn26383: 回 r 大，所以我说了………原 PO 没有偷别人 JS 啊… 04/16 11:56
43F：→ storyn26383: …… 04/16 11:56
44F：→ storyn26383: 而且好像没有任何地方讲到 JS 被偷耶@@ 04/16 11:58
45F：→ reLINK: 不喜欢控制码... 04/16 12:02
46F：推 arenda: minify都不懂的人在那该该叫 看到都笑了 04/16 12:12
47F：推 storyn26383: minify 之後的 js 丢到格式化工具就回来了啊，只是变 04/16 12:24
48F：→ storyn26383: 数丑了点，所以是没有任何保护作用的唷 04/16 12:24
49F：→ GoalBased: 你说的是ugly吧? 楼上 04/16 14:54
50F：→ Linux: 前端 js 有一个步骤 就是 uglify，基本上都会跟 minify 04/16 14:59
51F：→ Linux: 一起实作，minify 是缩成一行，uglify 则是丑化亦或者是说 04/16 14:59
52F：→ Linux: 简化，将不必要的 function name 简写，当然还有很多细节 04/16 15:00
53F：→ Linux: 但两这都是在提升前端传输效能之类的，有兴趣可以查一下XD 04/16 15:00
54F：推 storyn26383: 回 g 大，抱歉我没有讲清楚，不过原 po 帮我补完了 04/16 15:24
55F：→ GoalBased: 不过感觉好像有推文被删掉了，印象中有个虚的 04/16 15:52
56F：→ Linux: 嘘的那个，我私下跟他解释完了，没事：） 04/16 16:29
57F：推 ilovekebi: push~ 04/16 19:00
58F：推 lensuper: 这 ... 能不推吗 LoL 最近也在学前後端XD 04/16 20:08
59F：→ lensuper: 感觉C语言就让他去了XD 04/16 20:14
60F：推 WolfLord: 我喜欢用server side,js只拿来排版面，爱偷就偷去。 04/17 22:18
61F：推 bboys1101: 很棒的作品耶，心得笔记也很值得参考 04/20 09:19
62F：推 sliok9520: 赞 04/20 10:29
63F：推 roger00: 推分享！ 04/20 20:47
64F：推 jiahansu: 是找我吗?? 05/01 11:27
65F：推 aids61517: 再推一个 05/03 11:26
※ 编辑: Linux (220.133.42.231), 05/02/2019 16:30:47