Re: [心得] Weather Maps 天氣地圖！

[Linux (Windows)]

Hi 版上大大們大家早！

天氣地圖其實在去年分享過一次了，不過這次要分享的是改架構心得！

去年文章中就有提到，這是個是藉由中央氣象局提供的天氣資訊所製作的網站

再藉由 Google Maps 查詢各地方的天氣預報概況

並且可以查看各個地區的每小時溫度變化

搭配使用 localStorage 來實作前端關注的功能。



Live Demo：http://works.ioa.tw/weather/index.html

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 一起建立，如此一來大家就可以一起使用我的資源

在我還沒有關閉我的服務之前，大家都可以使用喔！



未來，我會再加上 https://works.ioa.tw/taipei_activities/index.html

以及多樣政府開放的資料時做更多功能網站

接下來我會開發天氣地圖 App，雖然已經很多人做天氣服務了

但，只是一種自我練習！若有完成一樣會上來分想！



以上就是我的天氣地圖 Weather Maps 的架構改版心得

若大家想看更多有關於我的作品，歡迎至我的個人網頁逛逛！

個人網站：https://www.ioa.tw/index.html

然後各位若喜歡此專案的話，可以到我的  GitHub 上幫我按個喜歡喔！

GitHub：https://github.com/comdan66/weather/

--

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.25.34.151
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1468801854.A.43B.html
推 Csongs: 分享先推
推 crossdunk: 又是你 我還不推?
推 rayway30419: s3 hosting + lambda好像最省
→ Linux: 是呀，但我這 case 是還不需要用到 lambda XD
推 aids61517: 跪著推
→ Linux: 樓上太誇張了>'<
推 jjwei: 這帳號不推不行
推 rodion: 推啦~加Star了！
推 jazzter: 推推推
推 zerofinal: 推!!
推 abola921: 原來是windows做的
推 y2468101216: 推
推 jerry771210: 感覺可以用cdn降低一些靜態，雖然aws 的cloudfront也
→ jerry771210: 用s3的bucket容量就是
→ ckvir: 怎麼常常看到都是做天氣的
推 huai21512: 推
推 bananayen: 推帳號
推 pkmilk: 推
推 gn00742754: 可以詢問不導入 https 的理由是？let's encrypt 是免
→ gn00742754: 費的！
推 KeySabre: 推
推 sonicnaru: 推 謝謝教學
推 pttuser: 推推
推 foxbrush: Cool
推 CP64: 推
推 james687: 推！
推 chrome: 推
推 djmax: 每看一次L大的作品就讓我再度自信全失...
推 iverson330: 學弟跪著推
推 jakert123: 寫的很詳細
※ 編輯: Linux (101.13.54.1), 11/06/2016 16:06:14