2019年11月29日 星期五

使用 cloudflare workers 來代替 php 存取第三方 API ,解決 process 被卡住的問題

最可恨的事情就是,cpu 沒有 100% ,系統就掛了。

本站大部份的頁面,php 平均處理時間大多是 50ms 以下,有快取的則在 10 ms 以下。但是當 php 要存取第三方 api 時, api 的回應常到高達 1~5 秒,所有的 php process 就會被卡住。假設 php process 上限是 5 個,有時候高峰(spike) 來了,一次來個 10 個需要存取 api 的 request,但是當所有 php process 都在用來等待後方 api 的時候,同時間其它應該可以快速回執行完的 request 都會被 queue 住了。

php 往後方存取 api 並不是很 cpu 耗資源,但一個 process 的成本卻很高,可能記憶體就要30~50MB。所以沒辦法將 php process 的上限數設到很高很高。

還有一個簡單的解法,就是把需要存取 API 的部份改成 ajax ,然後透過 nginx proxy 來實作。nginx proxy 可以容納的 connections 就可以很高了,如果你有設定好的話。當然如果 nginx proxy 可以解決,請直接左轉離開吧!但本站考量 SEO 的關係,沒辦法這麼做。

既然 php process 不善長等待這件事,我們就把等待這件事交給 serverless 來去處理。

假設 php 程式在執行的過程中,會執行到某一段程式,並從後端存取資料。

function _fetch($url)
{
// php curling .....
return $html;
}

php 部份只需要加個幾行而已。

function _fetch($url)
{
if(isset($_GET['workers_proxy_get']))
die($url);
if(isset($_GET['workers_proxy_response']))
return $_POST['html'];
// php curling .....
return $html;
}

接下來是 workers 的部份,如下
https://gist.github.com/girvan/2ee69ba0f1887aaab1dc8663240ca73c

然後再到 cloudflare 把這一類的 request 導到 workers 即可。記得 pattern 要設定好,不要所有的 request 都這麼玩。

眼尖的人會發現,php 部份其實是會重複執行到,但問題解決了。

2019年10月18日 星期五

[bootstrap-4] navbar-toggler with simple JS

You don't need to load whole JS library, just a simple 3-line script. no fading affect, but it just work.

2019年9月5日 星期四

[font-awesome] put single svg instead of download font file

font awesome is heavy library.
I prefer to use standalone svg file.

Download SVG file here:
https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
Change SVG color by using this:
https://codepen.io/sosuke/pen/Pjoqqp

2019年8月23日 星期五

insert iframe content without document.write

Old ways:

var doc = document.getElementById('myIframe').contentWindow.document;
doc.open();
doc.write("<html>....</html>");
doc.close();
But chrome started to show the warning from 2018, therefore, you can modify as following way:

document.getElementById('myIframe')
    .contentWindow.document.documentElement.innerHTML = "<html>....</html>";

If you want to add jQuery in iframe:

var iframeWindow = document.getElementById('myIframe').contentWindow;
iframeWindow.$ = function (selector) {
    return jQuery(selector, iframeWindow.document.body);
};

2019年6月27日 星期四

使用 Google 分析來統計 cloudflare 的節點 (colo) 資訊


許多人會造訪 /cdn-cgi/trace 來查看是哪一個節點,但是問再多人都難以得知全面的統計數字。這裡提供一個 JS 的語法來進行全面、即時的統計。統計結果會即時的顯示在 Google 分析裡。

複製連結裡的程式碼,再貼到網頁中即可。
https://gist.github.com/girvan/ec00a46bfd03674f9cbbed3ac2dd7a92

語法要放在 Google 分析語法的後面。

Google 分析 裡查看的方法:
  • 即時資訊:即時 → 事件 
  • 統計資料:行為 → 事件 → 總覽
大家互相分享一下統計資訊,就知道要買 cloudflare 哪一個等級了 XD

從 yui compressor 升級到 clean-css-cli + uglifyjs 的心得

我這裡指的是 cli 版本。
由於 yui compressor 已經很沒有在維護了,再加上原本的 java 版本速度很慢,這次一舉換成 node 版本。
原本的 yui compressor 使用的 cli 為
java -jar /usr/share/yui-compressor/yui-compressor.jar --charset=utf-8 {input-file} -o {output-file}
新的改成
js: uglifyjs -c -m -- {input-file} > {outputfile}
css: cleancss -O1 specialComments:off --skip-rebase --inline none {input-file} > {outputfile}

幾點心得:

2019年4月25日 星期四

讓 iterm 2 強制斷線的方法 (Mac)

在 Mac 中使用 iterm 2 再配合手機分享的 wifi,特別容易斷線,斷線時整個 session 卡住,只能關掉再重開一個新的。這裡提供一個方法,在 session 卡住時,只要按
enter  ~  . 
(依序按,不要放開)
即可強制斷線。
記得按 ~ 時也要按 shift 

2019年4月24日 星期三

換 ssh port 是必要的


TL;DR

  • ssh 換 port 是必要的,可以減少許多低端駭客例行性掃描。
  • fail2ban  舊版本不支援 ipv6 ,ipv6 的門是開的。
  • fail2ban 要測試是否有確實生效,適時修改設定。


2019年4月1日 星期一

uptimerobot 使用一個月心得,加碼升級 pro

原本在 2014 在 Google App Engine (GAE) 用 python 寫的一套監控程式,一直用到去年底。後來因為 GAE 環境下的 curl api 不是很穩定,外加 python 忘光了... 才開始尋找其它解決方案。

uptimerobot 從免費版本開始用,我設了 39 個監控,透過 api 設的。
上週升級 pro,升級 pro 的原因:
不是為了 1 minute monitoring;而是為了 if down x minutes, notify every y minutes.

值得一提推薦理由為:

  • API 完整簡單
  • pro 很便宜 $5.5/月(年繳為 $4.5) ,比起其它家動輒 $10 或 $20+
  • pro 的功能很實用 if down x minute, notify y minutes.
最後一項功能很重要,這也是我當年自己手刻的原因。
因為手機時時在響,不重覆通知真的很容易忽略。

另外講補個缺點就是,其實說每 x 分鐘會監測或寄信,我測的結果有時沒這麼準時。