※ [本文转录自 Soft_Job 看板 #1NZ2C-Gx ]
作者: Linux (Windows) 看板: Soft_Job
标题: Re: [心得] Weather Maps 天气地图！
时间: Mon Jul 18 08:30:50 2016
Hi 版上大大们大家早！
天气地图其实在去年分享过一次了，不过这次要分享的是改架构心得！
去年文章中就有提到，这是个是借由中央气象局提供的天气资讯所制作的网站
再借由 Google Maps 查询各地方的天气预报概况
并且可以查看各个地区的每小时温度变化
搭配使用 localStorage 来实作前端关注的功能。
Live Demo：http://works.ioa.tw/weather/
GitHub：https://github.com/comdan66/weather/
此作品主要利用 php 取得资料，并且编译成 HTML 档案上传 Amazon S3
这样的架构可以减少 Amazon EC2 的负担也因为 HTML 档案的关系，可以加强 (SEO)
以下是针对改架构的细部说明，文章有点长，若想看图文并茂版本的话
可以点图文并茂链结：http://works.ioa.tw/weather/readme.html
天气地图 Weather Maps 其实约莫在去年这时候第一、二版完成
然后一直放在 Amazon EC2 让它独立的运作，直到这几周才有空再将他修改一下
这次修改不仅对版型做翻新，也对系统面做修改！
上一版架构基本上就是典型的后端服务器吐出 API 处理架构
借由一台 EC 定时地去取得最新天气资讯，在存入数据库然后提供 API
因为 Amazon RDS 对我来说有点贵.. 所以我的数据库是安装在 EC2 上
运行一年下来，其实无论是流量、内存亦或者数据库都会占走 EC2 一项资源
尤其是图片档案与 API 流量！
为了减低 EC2 的负担以及加强 Search Engine Optimization(SEO)
于是我开始进行对天气地图作品的修改。
有鉴于我近期与 Amazon S3 变得比较熟了，所以把脑筋动到了 S3 上，
因为看 S3 有安全、耐久、可高度扩展的云端储存特性，
索性就以 S3 为主 EC2 为辅，不用数据库，而是将资料转乘 Json 的格式，
再用资料夹结构的放置，通通上传至 S3 上！
如此一来前端所有资源从原本的向 EC2 索取，变成改从 S3 上取得，
大大地减低天气的 Request 数量！
API Request 不说，光图片、静态档案就少了很多流量
同时数据库也减轻一部份的负担！
唯一会需要后端的部分，就只剩下固定时间更新资料的后端处理部分
而后端更新的这部分也只会耗费不到 15MB 的内存，所以负担不算大。
以下是前、后两版的架构图！
http://works.ioa.tw/weather/img/readme/01.png
▲ 上一版的架构会造成大量的 Request 都往服务器索取。
http://works.ioa.tw/weather/img/readme/02.png
▲ 因为 Amazon S3 安全、耐久、可高度扩展的云端储存特性
于是将架构调整成以 S3 为主 EC2 为辅的架构，以减缓 EC2 服务器的负担。
后端处理的关键程式是 /cmd/put.php 这只，
基本上流程是 定义基本常数、取得最新的天气资讯、写入 API Json 档案、
产生相关的 HTML 档案、列出 S3 上档案、比对新旧档案、删除、上传 S3！
其中在产生 HTML、JavaScript 时，会进行 minify 与 uglify
css 则是使用了 Compass 编译 Scss，最后再依个别 HTML Merge css、JavaScript
Merge 后的档案再以 MD5 内容后为档名！
如此一来便可以加强前端传输效能与压缩档案大小！
＊ 会以 md5 档名取代版本号的原因是，当内容有更新时会有不同新档名，
如此一来就可以防止前端浏览器快取问题，细节可参考 http://tinyurl.com/h4vp222
前端部分因为会随着天气更新而产生新的 HTML 档案，
这部份刚好可以针对此架构加强 SEO 的调整优化，
当然大家都知道的 sitemap、robots.txt 都有一定会有，
这次也加入部分的 schema、Google AMP、JSON-LD 的结构！
原本上一版有使用 navigator.geolocation 物件取得前端 GPS 位置
但因为随着 Chrome 的更新..
要使用 navigator.geolocation 则必须使用 https 的协定
（详情可看此篇：http://tinyurl.com/hheq3x6）
所以这功能在 Chrome 上就无法使用，不过其他浏览器应该还可以用！
前端功能还有使用到 LocalStorage 作为暂存的机制
所以我就利用这项前端浏览器的功能，将它拿来记录使用者浏览过的乡镇
同时也可以拿来做为收藏乡镇的功能！
在地图上更可以借由读取 LocalStorage 来实作记录上次的地图位置
而上一段所提到的 navigator.geolocation 取得客户端 GPS 位置
也可以利用 LocalStorage 来实作 Cache 的机制，才不用一直重取！
这些功能程式码我都放置在 /weather/js/public.js 内
各位若有兴趣欢迎点开来看喔！
此新版的天气地图除了使用中央气象局的资讯外，
也使用 维基百科(wikipedia) 的 API
将各个乡镇地方的简介、历史资讯下载下来，并且整理分类
然后再产生 HTML 的乡镇内页时一并加入简介，这样可以让整体网站功能更加多元
在浏览全台各地时，可以更加的对各个地方有所认识！
而各个乡镇的照片，则是利用 Google Maps 提供的街景服务
取得该乡镇的随机街景截图，若是取得失败则使用 Google Maps 的截图。
程式里面会使用到上传 S3 的功能，所以在执行时特别设计成 Cli 执行
配合下参数的方式，所以可以上传至不同的 S3 Bucket。
部署至 S3 的方式是进入专案 /cmd/ 目录内，下指令：
php put.php -b {Bucket Name} -a {Access Key} -s {Secret Key}
即可按照步骤做更新、上传的流程
-b 代表要上传的 S3 Bucket 名称，同时也是 Domain Name
因为要 CNAME S3 Bucket，所以会以 Domain 当 Bucket Name
-a 是 Access Key
-s 是 Secret Key
若是不想上传的话则有 代表 upload 的 -u 参数可决定是否上传
若是不想上传则加入 -u 0 的参数即可，而 -m 则代表 minify
-d 为是否更新天气，-u、-m、-d 的默认值皆为 1，也就是默认开启的。
另外在 cmd 目录内还有两只 php 档案，分别是 init.php、clean.php
因为专案内有很多资料夹或者档案是被 Git Ignore 的
所以需要 init.php 来帮你建立这些档案、目录
执行方式一样进入专案 /cmd/ 目录内
下指令 php init.php 后即可产生所需的目录与档案！
而 clean.php 是用来清除被 Git Ignore 的目录与档案
执行方式与 init.php 相同喔！
最后！既然做成 S3 架构也有了 API 服务
既然取之于网络，那就一样分享于网络
所幸我就连 apiDoc 一起建立，如此一来大家就可以一起使用我的资源
在我还没有关闭我的服务之前，大家都可以使用喔！
未来，我会再加上 http://works.ioa.tw/taipei_activities/
以及多样政府开放的资料时做更多功能网站
接下来我会开发天气地图 App，虽然已经很多人做天气服务了
但，只是一种自我练习！若有完成一样会上来分想！
以上就是我的天气地图 Weather Maps 的架构改版心得
若大家想看更多有关于我的作品，欢迎至我的个人网页逛逛！
个人网站：http://www.ioa.tw/
然后各位若喜欢此专案的话，可以到我的 GitHub 上帮我按个喜欢喔！
GitHub：https://github.com/comdan66/weather/