Cài đặt WebPageTest trên local machine – Part 1

Bài viết dưới đây sẽ hướng dẫn các bạn cách để cài đặt và thiết lập WebPageTest trên máy local. Mục đích của việc cài đặt WebPageTest trên máy local là do đôi khi dự án của mình chỉ test được trên môi trường local hoặc phải thông qua VPN, khi đó việc sử dụng https://www.webpagetest.org/ để test performance FE coi như là bít cửa :))

Đôi lời chia sẻ

WebPageTest(WPT) cung cấp source code cho việc thiết lập 1 phiên bản local cho nhu cầu cá nhân, bạn có thể test web application của mình ngay cả khi nó đang ở trong giai đoạn phát triển hoặc chạy thông qua VPN network

WebPageTest cho phép việc cài đặt mọi thứ trên 1 machine( web server, agent machine) hoặc cho phép tách biệt web server với những agent machine khác.

Bài viết này sẽ hướng dẫn các bạn cài đặt và thiết lập WebPageTest trên 1 máy duy nhất bao gồm cả web server và agent machine,  mọi thiết lập và cấu hình trong b ài viết được thực hiện trên WIndows, Apache Server và PHP7.

Các bạn nhớ lưu ý thiết lập full permission cho mọi file .exe, tránh tình trạng chạy bị lỗi mà không biết vì sao (đừng như mình mất cả ngày để dò ra lỗi).

Các bạn có thể tải bản WPT private instance mới nhất ở link sau.

Thông tin cho việc cài đặt Web Server và Test Machine(s)

  • Các bạn có thể chọn bất cứ web server nào cũng được, miễn nó có thể chạy được cho PHP, ở đây mình chọn Apache( vì mình thích, mình thích thì mình làm thôi)
  • Với test machine thì có thể dùng Windows (Vista hoặc bản nào khác cũng được) ( với bản 64-bit thì các bạn cần dùng  WPT 2.9 hoặc cũ hơn để sử dụng được tính năng giả lập “bóp băng thông” )
  • Windows 10 thì hiện tại đang có vấn đề với việc sử dụng tính năng “bóp băng thông” (nó bị lỗi ở CGWIN 😦 mình vận dụng mọi bí kíp võ công nhưng đã thất bại), vì thế minh không khuyến khích sử dụng win 10 để cài đặt WPT, còn trong trường hợp các bạn muốn chứng tỏ bản thân thì vẫn có thể sử dụng win10 nhưng khi đó sử dụng thư viện shaper thay cho dummynet (Mình chưa có thời gian để thử cài đặt cái này).

 

Telemaketing-lets-do-this-300x198

Cài đặt Apache Server

  • Tải Apache ở link homepage. Phiên bản Apache 2.4 là phiên bản mới nhất được sử dụng trong thời điểm mình viết bài này.
  • Giải nén file tải về và bỏ nó vô thư mục bạn muốn. For example: C:/Apache24
  • Chỉnh sửa file C:/Apache24/conf/httpd.conf, thiết lập DocumentRoot với giá trị “c:/wpt-www”

DocumentRoot “c:/wpt-www”

<Directory “c:/wpt-www”>

Options Indexes FollowSymLinks

AllowOverride None

Require all granted

</Directory>

<IfModule dir_module>

DirectoryIndex index.html index.php

</IfModule>

Giải thích những cấu hình ở trên cho bạn nào muốn hiểu rõ:

  • “C:/wpt-www” sẽ là folder chứa toàn bộ source code của WPT server, vì thế mình thiết lập DocumentRoot trỏ vô đường dẫn trên(các bạn có thể thay đổi đường dẫn đó tùy ý).

Thêm vài dòng sau vào phần LoadModule:

LoadModule expires_module modules/mod_expires.so

LoadModule headers_module modules/mod_headers.so

LoadModule rewrite_module modules/mod_rewrite.so

Tìm khúc nào mà nó cấu hình cho cgi-bin rồi sau đó thêm cái đoạn  cấu hình cho PHP:

<!– These line is default in httpd.conf –>

<Directory “c:/Apache24/cgi-bin”>

AllowOverride None

Options None

Require all granted

</Directory>

<!–  These lines is added more–>

<Directory “C:/PHP7”>

AllowOverride None

Options None

Order allow,deny

Allow from all

</Directory>

Đây là file mẫu cho việc cấu hình httpd.conf

Cấu hình cho Apache Server chạy ở chế độ service(Cứ mở windows là nó sẽ tự chạy)

Mở cmd dưới quyền administrative và gõ vào:

httpd.exe -k install

Dưới đây là 3 lệnh dùng để tắt, mở và khởi động lại server khi run dưới chế độ window service

httpd.exe -k start

httpd.exe -k restart

httpd.exe -k stop

ApacheMonitor

Đây là GUI tool cho việc tắt, mở và khởi động lại cũng như xem log file của Apache Server, file này nó ẩn giấu ở bên trong folder bin, các bạn chỉ cần vào folder bin và  Double click ApacheMonitor.exe, thế là xong.

Cài đặt PHP

  1. Tải PHP từ http://windows.php.net/download  (Mình sử dụng PHP7.0 :)))
  2. Giải nén và copy toàn bộ file vô đường dẫn to c:/PHP7 (nếu các bạn thay đổi đường dẫn thì nhớ edit lại cái cấu hình ở Apache server nhóe, không là chạy không được đâu đấy)
  3. Copy và đổi tên file C:/PHP7/php.ini-production thành C:/PHP7/php.ini .PHP sẽ dùng file này để thiết lập cấu hình mỗi lần Apache Server chạy (Vì thế nếu có edit gì ở đây thì chịu khó khởi động lại Apache server luôn nha)
  4. Chỉnh sửa file php.ini như sau:
      • Cập nhật đường dẫn extension_dir trong php.ini, ,ở đây mình dùng đường dẫn tuyệt đối luôn.
        extension_dir=C:\PHP7\ext
      • Cấu hình 1 vài thông số sau để WPT có thể chạy được:
        • Cấu hình dung lương upload file tối đa (mình thiết lập 100Mb cho cả 2 )
          upload_max_filesize = 100M
          post_max_size = 100M
      • Mở khóa cho vài cái extensions “hay hay”, mặc dù vài cái mình cũng ko biết nó dùng để làm gì tuy nhiên WPT bảo mở thì hãy cứ mở thôi =)) :
        • extension=php_gettext.dll
        • extension=php_curl.dll
        • extension=php_imap.dll
        • extension=php_gd2.dll
        • extension=php_apc.dll
        • extension=php_openssl.dll
        • extension=php_pdo_sqlite.dll
        • extension=php_sqlite3.dll
        • extension=php_mbstring.dll
        • extension=php_exif.dll
        • extension=php_openssl.dll
        • extension=php_pdo_mysql.dll
        • extension=php_tidy.dll
        • extension=php_xmlrpc.dll
        • extension=php_xsl.dll
      • Tìm dòng nào có tên là “sys_temp_dir”, sau đó enable nó lên và thiết lập 1 đường dẫn tạm cho nó, ví dụ: mình đã tạo 1 folder với tên là temp trong ổ C (sys_temp_dir = “C:/temp”).   Sau đó cấp full quyền cho folder đó, mục đích là để cho WPT có thể tạo folder test result cũng như mấy file tạm trong đó khi WPT chạy.

     

Đây là file mẫu cho php.ini

Cài đặt WPT Server (Hay còn gọi là Web Application)

  1. Tải về bản WPT  mới nhất từ https://github.com/WPO-Foundation/webpagetest/releases/tag/WebPageTest-3.0
  2. Giải né ra và tìm folder nào có tên là www
  3. Tạo folder c:/wpt-www và copy toàn bộ file trong folder www ở WPT source code sau khi giải nén
  4. Thiết lập settings cho WPT server trong folder c:/wpt-www/settings,  dưới đây mình sẽ giải thích những file cấu hình cơ bản mà chúng ta xài, còn những file khác thì các bạn chịu khó hỏi sư phụ mình (bác gu gồ :v )  :
    1. location:locations.ini.sample: đây là file quan trọng nhất, nó cấu hình cho server hiểu được rằng các agent machine nó đang nằm ở đâu cũng như các agent machine đó có thể chạy với các loại browser nào, dưới đây là mô hình mà WPT sử dụng với file location (Các bạn coi kỹ cái hình để hiểu cho rõ cái file này, mình mất 1 ngày hơn mới hiểu và thiết lập cho đúng file này) WPT_01
    2. connectivity.ini.sample: đây là file dùng cho cấu hình việc bóp băng thông lại khi các bạn chạy test.WPT_02
    3. settings.ini.sample: Đây là file dùng cho việc cấu hình cho WPT server, tuy nhiên hiện tại phiên bản C/C++ agent đang có vài lỗi nhỏ với những cấu hình ở file này:
      • issue 391
      • issue 945: low  test time = 1199 và Time limit =1199 là 2 cấu hình dùng cho việc thiết lập thời gian chạy của 1 test, nhưng hiện tại thì WPT phiên bản C/C++ agent chỉ chạy được tối đa 5 phút, mình có nghía sơ source code chỗ này thì thấy anh pmeenan có vẻ như quên thiết lập const SECONDS_TO_MS (https://github.com/WPO-Foundation/webpagetest/blob/master/agent/wptdriver/wpt_driver_core.cc), bạn nào rảnh có thể clone cái này về rồi build lại test thử coi fixed được lỗi không, mình bận quá cũng chưa thử.
    4. Clone và đổi tên những file cấu hình sau
      • connectivity.ini.sample
      • locations.ini.sample
      • settings.ini.sample
    5. Thay đổi cấu hình trong file location.ini theo ví dụ dưới đây (Đây thường là bước hack não nhất với những ai lần đầu thiết lập WPT ở máy local, mình cũng không nằm ngoài số đó 😥 ):
      [locations]
      1=WPTAgent
      2=NodeJSAgent
      default=WPTAgent
      connectivity=LAN[WPTAgent]
      1=Local-WPTDriver
      connectivity=LAN
      label=”WPT Agent”
      default=Local-WPTDriver[Local-WPTDriver]
      browser=Chrome,Firefox
      label=”Location Desktop Agent”[NodeJSAgent]
      1=Local-NodeJSDriver
      connectivity=LAN
      label=”NodeJS Agent”
      default=Local-WPTDriver[Local-NodeJSDriver]
      browser=Chrome
      type=nodejs,chrome
      label=”ChromeDriver Agent”
      connectivity=”LAN”Mình sẽ giải thích cho những cái cấu hình ở trên:
      Đầu tiên là [locations], ở đây mình cấu hình cho 2 Agent Machine bao gồm [WPTAgent] và [NodeJSAgent] (2 thằng này có nhiệm vụ nhận lận từ WPT server và sẽ chạy test dựa vào cấu hình browser nó có thể chạy được).
      WPT_03
      Kế tiếp là trong [WPTAgent] thì mình cấu hình sử dụng [Local-WPTDriver] (lưu ý là khi bạn đặt tên chỗ này thì ở wptagent  file cấu hình các bạn cũng để tên tương tự). Và ở [Local-WPTDriver]  thì sẽ có cấu hình cho các browser mà Agent đó có thể chạy được
      WPT_04
    6. Cuối cùng là thiết lập full quyền cho folder c:/wpt-www/tmp c:/wpt-www/results.
    7. Add full permission for folder and folder c:/wpt-www/tmp c:/wpt-www/results.

Cài đặt WPT Agents (Thằng em này sẽ có vai trò nhận lệnh từ WPT server và run test)

WPT Agents sẽ nhận lệnh từ WPT server và thực hiện việc run test, tùy theo việc bạn cấu hình trong file wptdriver.ini mà mỗi agent có thể run được những browsers nào, tuy nhiên lưu ý là option Location ở wptdriver.ini và location.ini ở c:/wpt-www/settings phải giống nhau nhá, ngoài ra thì nếu agent không chạy thì ở trên GUI sẽ không hiển thị thông tin trong dropdown box. Dưới đây là những bước cài đặt 1 agent.

  1. Copy toàn bộ thư mục trong folder agent ở WPT source code và bỏ vô c:/wpt-agent
  2. Cài đặt Chrome và Firefox (hoặc các phiên bản khác nếu bạn muốn dùng)
  3. Cài đặt ffmpeg (http://ffmpeg.zeranoe.com/builds/) ) và nhớ thiết lập environment path cho nó (c:/ffmpeg /bin). Ở đây mình cài đặt ở đường dẫn c:/ffmpeg. Mục đích tool này dùng để capture video và generate ra video khi bạn chạy test xong và coi report,  ngoài ra nó cũng dùng cho việc xác dịnh GUI render của 1 page khi nào hoàn toàn done.
  4. Cài đặt DUMMYNET ipfw driver. Dưới đây là các bước để cài đặt dmnet =)):
    • Copy toàn bộ file trong C:\wpt-agent\dummynet\64bit hoặc C:\wpt-agent\dummynet\32bit (tùy theo windows bạn là bản 64 hay 32 nhé) ra thư mục C:\wpt-agent\dummynet
    • Mở “Network and Sharing Center”, click vào ethernet hoặc bất cứ cái gì bạn đang dùng để kết nối internet, nó sẽ mở ra cái cửa sổ Ethernet Status, click vào “Properties”
    • Chon “Install” trong cửa sổ “Properties”
    • Chọn “Service” và click “Add”
    • Click “Have Disk” và trỏ tới file c:\wpt-agent\dummynet
    • Chọn the ipfw+dummynet service (Nếu có warning nào thì cứ mặc kệ nó quất tới đi)
      Lưu ý: Nếu bạn đang cài đặt trên máy RDP các bạn có thể bị mất kết nối tới máy remote trong khi cài đặt ipfw dummynet.
    • Nếu bạn đang xài Win 64 bit, thì bạn cần chạy file testmode.cmd trong thư mục C:\wpt-agent\dummynet, nó sẽ kích hoạt tính năng testmode trên windows và cho phép dummynet chạy trên windwos 64bit
  5. Tạo shortcuts trong folder startup cho 2 file c:/wpt-agent/dummynet/ipfw.cmd c:\wpt-agent\wptdriver.exe
  6. Cấu hình cho Chrome và Firefox(Có thể là browser khác cũng được tùy nhu cầu các bạn) bằng cách sửa file wptdriver.ini (tốt nhất các bạn nên copy wptdriver.ini.sample và đổi tên lại thành wptdriver.ini), dưới đây là cấu hình mẫu cho wptdriver.ini:[WebPagetest]
    url=http://127.0.0.1/
    location=Local-WPTDriver
    browser=chrome
    Time Limit=120
    ;key=TestKey123
    ;Automatically install and update support software (Flash, Silverlight, etc) software=http://www.webpagetest.org/installers/software.dat[chrome]
    exe=”C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”
    options=’–start-maximized –load-extension=”%WPTDIR%\extension”
    –user-data-dir=”%PROFILE%” –no-proxy-server –disk-cache-dir=null’ installer=http://www.webpagetest.org/installers/browsers/chrome.dat[Firefox]
    exe=”C:\Program Files (x86)\Mozilla Firefox\firefox.exe”
    options=’-profile “%PROFILE%” -no-remote’ installer=http://www.webpagetest.org/installers/browsers/firefox.dat template=FirefoxLƯU Ý: Giá trị ở location phải trùng khớp với nhau ở cả 2 file location.ini trong webpagetest server configuration và wptdriver.ini. Ở đây là 2 file mẫu cho locations.ini của WPT server và wptdriver.ini

WPT_05

 

9808b515e104a1e8bfa44143894737a9eb00a46077e8d872bd6ce6dd006f5a56

Về cơ bản thì việc thiết lập WPT private instance, các bạn giờ chỉ việc tận hưởng thành quả của mình (các bạn vô thử http:/127.0.0.1 để kiểm tra việc deploy).

 

Mẹo vặt cho đời dễ thở

  • Sử dụng https://<youhost>/install để kiểm việc thiết lập đã đủ và có lỗi không
    WPT_06
  • Nếu bạn gặp lỗi giống như hình dưới đây thì kiểm tra việc cấu hình full permission cho những thư mục c:/wpt-www/results và c:/wpt-www/tmp
    WPT_07
  • Lỗi “Waiting at the front of the queue”:  đa phần là do cấu hình trong locations.ini. Kiểm tra giá trị trong location ở location.ini và wptdriver.ini đã trùng khớp với nhau.
  • Waterfall charts không xuất hiện: kiểm tra việc cài đặt thư viện GD. Đây là thư viện dùng để vẽ waterfalls và tạo ra ảnh thumbnail.
  • Sử dụng C:\Apache24\logs để kiểm tra lỗi khi chạy test trên WebPageTest (Cannot load test result, cannot load test result Image, etc…)
  • Lỗi ở error log apache2 như sau: [Mon Apr 30 10:18:14 2012] [error] [client 1.2.3.4] PHP Warning: POST Content-Length of 22689689 bytes exceeds the limit of 8388608 bytes in Unknown on line 0
    Thay đổi giá trị upload_max_filesize và post_max_filesize lớn hơn giá trị hiện tại trong file php.ini.

 

Lần tới mình sẽ hướng dẫn các bạn cách đọc report từ WPT và cách phân tích bottleneck trên FE =)) oan nghiệt là khi nào mình rãnh mình mới viết tiếp được

 

Reference

WPT Private Instance Document

Note: Thank cu Lộc Mai support trong việc thực hiện bài viết này =)) công lao của chú anh sẽ không quên =))

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s