舊油燈裡的巨人

2017年12月14日

利用docker-compose建立tomcat和apache整合的服務

本文為記錄公司專案中整合 apache和tomcat在docker上執行的實例，Apache套件是另外安裝，tomcat則是拿搭配JRE 1.7的版本

Dockerfile - Apache

FROM ubuntu
ENV TZ=Asia/Taipei
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
RUN apt-get update && apt-get install -y --no-install-recommends apache2 libapache2-mod-jk
RUN a2enmod proxy
RUN a2enmod proxy_http
RUN a2enmod proxy_balancer
RUN a2enmod proxy_wstunnel

ADD ./conf/apache2.conf /etc/apache2/apache2.conf
ADD ./conf/000-default.conf /etc/apache2/sites-enabled/000-default.conf
ADD ./conf/worker.properties /etc/libapache2-mod-jk/workers.properties
ADD ./conf/jk.conf /etc/apache2/mods-available/jk.conf
VOLUME ["/var/log/apache2"]
EXPOSE 80 443

CMD ["apachectl", "-k", "start", "-DFOREGROUND"]

conf/jk.conf

JKMount /htdocs/* web_1

conf/apache2.conf

LoadModule jk_module modules/mod_jk.so
JkWorkersFile /etc/libapache2-mod-jk/workers.properties
JkOptions +ForwardKeySize +ForwardURICompat -ForwardDirectories

Dockerfile - Tomcat

FROM tomcat:7-jre7
ENV TZ=Asia/Taipei
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
#把編譯好的war檔包進去
COPY ./webapps/wales-test.war /usr/local/tomcat/webapps/
# 一些tomcat的context 設定 
COPY ./wales-test.xml /usr/local/tomcat/conf/Catalina/localhost/ 
COPY ./lib/mysql-connector-java-5.1.28-bin.jar /usr/local/tomcat/lib/ 
COPY ./lib/proxool-0.9.1.jar /usr/local/tomcat/lib/ 
COPY ./lib/proxool-cglib.jar /usr/local/tomcat/lib/ 
COPY ./lib/commons-logging-1.2.jar /usr/local/tomcat/lib/ 
EXPOSE 8009

docker-compose.yml


version: "2" 
  services:
    tomcat:
      volumes:
      - ./tomcat/logs:/usr/local/tomcat/logs 
      expose:
      - 8009
      Image: wales /tomcat
      container_name: "tomcat"
      build: ./tomcat
      environment:
      - JAVA_OPTS=-Djava.security.egd=file:/dev/./urandom
      networks:
        wales_net:
            ipv4_address: 192.168.1.2

    http:
      volumes:
      - ./httpd/logs:/var/log/apache2
      ports:
      - "80:80"
      - "443:443"
      image: wales/httpd
      container_name: "httpd"
      build: ./httpd
      networks:
        wales_net:
            ipv4_address: 192.168.1.3
  
  #另外指定docker要用的網路區段
  networks:
    wales_net:
        driver: bridge
        ipam:
            driver: default 
            config:
                subnet: 192.168.1.0/24

啟動服務

docker build -t devmaster/httpd httpd/
docker build -t devmaster/tomcat tomcat/
docker-compose up -d

2017年3月25日

Virtualbox - Host Only Adapter問題解決方案

自從使用Windows 10之後使用VirtualBox就一直遇到困難，由於我會在Virtual Box的guest裡面安裝Centos，再利用 host來存取guest的服務，所以我會設定兩張網卡：一張是NAT，另一張則是僅限主機，但是在改用Windows 10之後就一直踢到鐵板，甚至連vagrant 和docker toolbar也不能使用。

本來還想說難道是我自己的問題?為什麼台灣沒有半個人遇到?現在想想應該是大部分的工程師為了要讓自己潮一點都改用mac了吧

在國外一些論壇已經有很多人發現這個問題，大部分都是指向HostOnly Adapter裡面的VirtualBox NDIS6 Bridged Networking Driver這個服務，只要將他disable就可以，但是見鬼的是我根本沒有這個服務，倒是多了一個Kaspersky Anti-virus NDIS Filter，所以這個方法對我來說也沒用。

最後找到有另外一個和我同病相憐的網友，則是提供了在安裝Virtual Box就要先根除NDIS6的方法，安裝Virtual Box的時候順便加上以下的指令：

VirtualBox-5.1.18-114002-Win -msiparams NETWORKTYPE=NDIS5

然後他就 Works like a charm了~

2016年11月26日

不需要利用ntpdate就可以校時

網路上看到有人的Server需透過proxy才能上網，但是ntpdate不支援proxy設定；竟然想到用wget連到google去取得http response heade來作時間同步，真是有夠神。

http_proxy=http://youruser:yourpassword@proxyip:proxyport;export http_proxy
date -s "$(wget --no-cache -S -O /dev/null google.com 2>&1 | sed -n -e '/ *Date: */ {' -e s///p -e q -e '}')"

來源網址 :

https://gist.github.com/jsleetw/3446852

2016年2月26日

覆寫jQuery UI Dialog plugin

最近有一個需求是要自訂jQuery UI Dialog plugin的行為，像是增加新的option和額外處理dialog出現時的 UI配置。研究一下知道要用Jquery UI的Widget Factory，讓jQuery UI Dialog覆寫他自己的function。

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {}):

再把要覆寫的function寫到最後的{}底下：

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
//覆寫open事件，先呼叫super再執行自訂的函式。把醜醜的jquery ui 叉叉圖案改成fontawesome
open: function() {
$.ui.dialog.prototype.open.apply(this, arguments);
var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
titlBar.empty().append("");
},
//覆寫建立title事件，改為自行定義的函式。增加title前的圖案
_title: function(title) {
if (!this.options.type || this.options.type == "info") {
this.uiDialog.removeClass("error").addClass("info");
if (!this.options.title) {
title.html(" 提示");
} else {
title.html(" " + this.options.title);
}
} else {
switch (this.options.type) { //可新增其他的類型
case "error":
this.uiDialog.removeClass("info").addClass("error");
if (!this.options.title) {
title.html(" 錯誤");
} else {
title.html(" " + this.options.title);
}
break;
}
}
}
}));

其中在呼叫jQuery UI Dialog原來的父類別open函數撞牆了，按照網路上的討論是：

$.ui.dialog.prototype.open.apply(this, arguments);

但是這樣會進入一個無限的循環，然後就甚麼都動不了。必須在一開始先將這個父類別函數取出來，再進行呼叫：

var _dialogOpen = $.ui.dialog.prototype.open;
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
open: function() {
_dialogOpen.apply(this, arguments);
var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
titlBar.empty().append("");
}
========略========
}

fiddle完成範例：

2015年12月22日

免電池車燈使用心得

騎腳踏車到捷運站轉乘上班已經有好長一段時間了，之前為了安全都會買車尾燈跟前燈以確保安全。但是目前買到需要裝電池的車燈，不是下雨天進水就是常常短路，時亮時不亮，平均兩三個月就要換一組。後來改用塑膠型的快拆車燈，防水是防水了，但是常常被偷，塑膠一扯就帶走了。因為要常常趕車搭捷運不會每次都記得要拆下來放到背包裡，而且用久之後都會髒髒的，其實也不想特別收起來啊!偏偏就是有人愛偷這種的。光是這種類型的車燈就被偷了三個，一個可是要三百元啊!

前陣子在FB上看到有一種是免電池的車燈，這個在我小時候用過，他會有一個長長的裝置連接到車輪，用車輪帶動他發電，也就是以馬達發電。但是這種接觸式的缺點就是騎起來車會變得比較重。因為需要拿腳的動力去帶動發電機發電。不過看到的這款是免接觸的，所以不會碰到車輪也不會有多餘的功耗費；主要就是由磁力產生電力，看起來好像挺有意思的。於是就跟老闆買了一組來試用看看。

目前用的這款是淑女車和小折專用的，另一款就是給碟煞車輪用的，看原理是用強力磁鐵來帶動發電機發電；用了一個月之後感覺還滿滿意的，因為他裝上去之後就不用再去碰他了，而且他是鎖在煞車皮的部位，要偷走他還得準備工具才行。

目前好像還有白光版，之後再來下單買一組用用看。感覺這組車燈還滿適合在都市通勤的人使用的。老闆也可以考慮研發一下可以儲電的，這樣在郊區使用的時候也不怕車停下來就沒電囉。

官方粉絲團
https://www.facebook.com/xbatlightch/

2015年4月23日

好用，但是問題多多的Chart.js

Chart.js是一個很好用的javascript畫圖表工具，但是他卻有一些奇怪的問題。這麼久了似乎也沒有被解掉。
在這邊紀錄一下目前使用Chart.js遇到的問題：

變換圖表資料導致錯亂

當你有一個有使用ToolTip的圖表，而這個圖表的內容需要動態替換時這個問題就會產生，範例如下

當切換圖表的時候，之前的第一個圖表會時不時的出現，擾亂使用者的思緒(只有當滑鼠在圖表上移動的時候會發生這個問題)
解決問題的方式很簡單，我被這個問題困住好久啊！解法為 -- 在更換新的資料前，要先執行destroy()，如果不這麼做的話，當使用者在圖表上下了click事件的時候，圖表上的值也會取不到，或是會取到最早那個圖表的資料。看來就是兩個圖表完全重疊在一起了，而且事件還共用。

不要使用barValueSpacing

這個問題只會發生在bar chart，因為只有bar chart有這個參數(喂~)，加了這個參數之後在每個bar之間會出現一個間隙，但是這個東西會導致click也會完全出錯，到目前為止1.0.2還是沒有解決

2014年8月4日

利用Selenium IDE進行UI測試

安裝與執行

Selenium IDE是Firefox的一個plugin，用來做UI的自動測試：下載網址為http://docs.seleniumhq.org/download/
安裝後，點一下firefox 的工具 -> Selenium IDE ，就會出現底下畫面

建立test Case可以使用畫面右方的來進行錄製，錄製完後的畫面如下所示：

錄製完後的case可以使用播放的按鈕來執行。
這個功能可以設定你要跑的test case是要快一點還是慢一點，通常慢一點比較好，跑太快常常會出問題。
底下的Log視窗可以顯示目前執行發生了多少個問題或是正常完成。
如果有設定WaitFor的Command的話，最長的等待時間是三十秒(預設，可以在option裡面設定)

編寫測試語法

除了自動錄製外，使用者也可以自行撰寫測試語法：點選右邊Table區塊的任一個工作項目後，視窗下方會出現Command、Target與Value三個欄位。

Command : 使用Seleium IDE提供的命令，有Click、Verify、Waitfor、Assert等數十種命令可以使用 http://docs.seleniumhq.org/docs/02_selenium_ide.jsp#script-syntax，官網的文件寫的很爛，可以參考http://software-testing-tutorials-automation.blogspot.in/search/label/selenium%20ide
Targert : 用來指定Command所要處理的目的，可以是CSS selector、Xpath、link、id或數值(例如pause這個command需要停留的毫秒數)，點取target旁邊的Select可以在firefox的視窗裡面選擇你想要套用的元件，但是這個功能常常失效。
Value : 指定Command需要用到的數值，例如type時需要輸入什麼字串(pause的秒數需要設定在target)

所有的測試語法都是html的table格式，每列共有三欄，分別是command,target與value。
可以利用store這個Command將javascript運算結果儲存到selenium IDE裏面方便其他command叫用。

例如底下的範例：

command：store
target：javascript{ var a = Math.random() * 5; Math.ceil(a+1);}
value：j

將會產生一個變數j，且其值為亂數取得2~6之間的整數，調用方式如下：

command：click
target：css=#modifyLocalTree > ul.jqueryFileTree:nth-child(${j}) > li.directory.collapsed > a

利用${}將變數括起來就可以直接使用。

利用waitForxxx系列Command可以讓程式等待某個元件顯示或隱藏時再進行下一個動作，例如：

waitForElementNotPresent : 當DOM被移除時才會繼續進行下一步。
waitForElementPresent: 當DOM產生時才會繼續進行下一步。
waitForVisible : 只有當css的display屬性被設定可顯示時才會繼續進行。
waitFoNotrVisible : 只有當css的display屬性被設定none時才會繼續進行。

利用type指令可以在指定的input裡面輸入自定的文字。
利用click指令可以點選指定的DOM，同時也可以用來模擬點選radio或是checkbox，如果沒有指定radio的index，預設會點選第一個。

後面等我繼續使用，有心得再來補好了

訂閱：文章 (Atom)

舊油燈裡的巨人

2017年12月14日

利用docker-compose建立tomcat和apache整合的服務

2017年3月25日

Virtualbox - Host Only Adapter問題解決方案

2016年11月26日

不需要利用ntpdate就可以校時

2016年2月26日

覆寫jQuery UI Dialog plugin

2015年12月22日

免電池車燈使用心得

2015年4月23日

好用，但是問題多多的Chart.js

2014年8月4日

利用Selenium IDE進行UI測試

精選文章

利用Selenium IDE進行UI測試

好友鏈結