刘钢的博客 – 我是UED

目前正在梳理整个前端开发的流程及环境，也看了d2大家分享的关于前端各种自动化的演讲，便开始动手了
第一项是希望解决大家兼容性测试的问题，之前已经用虚拟机替换掉了ietester
但本地的虚拟机还是会出现团队成员不一致的情况，并且占用本地资源比较严重
在 美团 潘魏增 老兄帮助下，了解到美团目前在用的vmserver是很好的解决方案，再次感谢

同时参考了很多大家分享的东西，把自己遇到的问题也放出来和大家分享

下一步打算做一些前端自动化方面的脚本，希望和大家多学习，共进步

vmserver是vmware旗下的一款虚拟机服务器，可以通过web管理和操作虚拟机，同时支持多平台 windows、linux、macos等，免费的 可以在官网申请到授权码

这次我们选择的是linux版的vmware server

服务器环境：centos 5.5

vmserver版本：VMware-server-2.0.2-203138.i386

安装过程不详细叙述了 参考下面这篇文章即可，我也复制到最后给大家参考了

http://wuyizhaizhu.blog.163.com/blog/static/115151869201052201339515/

安装后通过web可以访问，进入管理端，在里面安装虚拟机即可

我就讲讲我们在搭建过程中遇到的问题吧

1.安装遇到提示

You cannot install VMware Server on a system running a xen kernel

解决方法：
http://zackofalltrades.com/2008/09/changing-to-a-non-xen-kernel-in-centos-5-so-you-can-run-vmware-server/

To do this, you first need to install the kernel. yum makes this easy:

yum install kernel

Then remove xen and the kernel-xen packages:

yum remove xen kernel-xen

Then you have to specify which kernel you want to run in /boot/grub/grub.conf. In that file there’s a list of kernels available to boot from:

#boot=/dev/sda

default=1

timeout=5

splashimage=(hd0,0)/boot/grub/splash.xpm.gz

hiddenmenu

title CentOS (2.6.18-92.1.10.el5)

root (hd0,0)

kernel /boot/vmlinuz-2.6.18-92.1.10.el5 ro root=LABEL=/1 rhgb quiet

initrd /boot/initrd-2.6.18-92.1.10.el5.img

title CentOS (2.6.18-92.1.10.el5xen)

root (hd0,0)

kernel /boot/xen.gz-2.6.18-92.1.10.el5

module /boot/vmlinuz-2.6.18-92.1.10.el5xen ro root=LABEL=/1 rhgb quiet

module /boot/initrd-2.6.18-92.1.10.el5xen.img

The line that says default= specifies which kernel to load, where 0 is the first one listed in the file. In my case, I had to change the line that says default=1 to default=0 to specify the non-xen kernel.

Reboot, and you’re good to go – the VMware RPM will install, and VMware server runs just fine.

2.安装好虚拟机后 通过NAT模式链接网络，web管理没有问题，如果想使用远程桌面登陆会发现没有网内ip，只有vm自带的虚拟ip

解决方案：通过iptables转发服务器某端口到虚拟机的端口 使我们可以访问虚拟机上面的某些服务，比如远程桌面

启用ipv4端口转发功能 /etc/sysctl.conf 文件修改net.ipv4.ip_forward =1 即可

然后通过iptables配置，vm的NAT机制其实是通过虚拟网卡来实现虚拟机的网络共享的，所以你的服务器上面会有一块vm虚拟网卡，可以通过ifconfig看到

我的是：

vmnet8    Link encap:Ethernet  HWaddr 00:50:56:C0:00:08

inet addr:172.16.20.1  Bcast:172.16.20.255  Mask:255.255.255.0

进入虚拟机也可以看到虚拟机的ip也是这个网段的

下面我们来把服务器的某个端口 转发到虚拟机即可 iptables配置如下

192.168.0.90是服务器ip dport 12346 是服务器端的端口

172.16.20.130是虚拟机的ip ，3389是虚拟机的远程终端端口

重启iptables，通过远程桌面链接服务器ip：12346端口 成功了！

-A PREROUTING -d 192.168.0.90 -p tcp -m tcp –dport 12346 -j DNAT –to-destination 172.16.20.130:3389

-A POSTROUTING -d 172.16.20.128 -p tcp -m tcp –dport 3389 -j SNAT –to-source 172.16.20.1

3.因为多人来使用虚拟机，xp默认仅支持一个用户链接，所以需要hack一下远程服务 目前采用较多的是替换dll的方法 百度一下即可找到很多，这里不再叙述了

4.我们还需要测试win7 发现在vmware server选择安装版本的时候没有win7的选项，这时可以通过选择Microsoft Windows Vista 安装即可

附：mac osx远程桌面下载 ，大家可以通过mac直接链接到虚拟机了
http://www.microsoft.com/china/office/mac/downloads?pid=Mactopia_RDC&fid=68346E0D-44D3-4065-99BB-B664B27EE1F0#viewer

至此，基本的环境搭建完毕了 放几张截图吧

成功通过远程桌面链接到虚拟机环境

由于vmserver web Console 只支持windows 我在mac下开了个本地虚拟机截了一张Console操作的图

转载请注明:http://www.iamued.com/qianduan/1951.html
参考：vmwareserver for centos 安装方法：

Install

1. 在 VMware 中注册并下载 VMware Server 的 rpm 安装包
注册的时候要注意一点，即问你准备在windows下和linux下各安装多少个copy，当然要填多点了 ：）

2. 使用 root 用户登录要安装的主机

3. 安装 rpm

rpm -ivh VMware-server-2.0.1-156745.i386.rpm

4、进行配置

4.1运行

/usr/bin/vmware-config.pl

开始配置界面，下面，我们尽量详细的讲解一下配置过程

4.2

Do you want networking for your virtual machines? (yes/no/help) [yes]

是否需要配置网络，一般应该使用，所以使用缺省值。

4.3

Configuring a bridged network for vmnet0.

Please specify a name for this network.

[Bridged]vm-bridged

首先配置使用桥接的网络，如果你希望你的虚拟机直接暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），可通过桥接的方法，需要指定该网络的名称，例如 vm-bridged ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.4

Your computer has multiple ethernet network interfaces available: eth0, eth1.

Which one do you want to bridge to vmnet0? [eth0]

选择在哪块网卡上配置桥接网络，一般应该选择你能够上网的网卡，当然，如果你比较熟悉网络，也可进行其它的配置。

4.5

Do you wish to configure another bridged network? (yes/no) [no]

是否需要在其它网卡上配置桥接网络，根据你的实际需要，一般是不需要的。

4.6

Do you want to be able to use NAT networking in your virtual machines? (yes/no) [yes]

是否需要通过NAT配置网络，如果你希望你的虚拟机暴露在外网（并不特指internet，通常是指暴露在宿主机所在的子网内），NAT是常用的一种虚拟机网络配置方法（类似你通过一台路由器上网），通过其往往能够得到更高的网速，通过在宿主机的iptables中进行配置，可以很容易让类似 BT，EMule等软件获得更高的下载速度，所以我们选择 yes。

4.7

Configuring a NAT network for vmnet8.

Please specify a name for this network. [NAT]vm-nat

配置使用NAT的网络名称，例如 vm-nat ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.8

Do you want this program to probe for an unused private subnet? (yes/no/help) [yes]

是否自动配置NAT使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。

4.9

Do you wish to configure another NAT network? (yes/no) [no]

是否需要配置另外一个NAT网络，通常不需要。

4.10

Do you want to be able to use host-only networking in your virtual machines? [yes]

是否希望虚拟机支持 host-only 的网络，如果你不希望将虚拟机暴露于外网（并不特指internet，通常是指暴露在宿主机所在的子网内），应该在创建虚拟机时选择这种网络。

4.11

Configuring a host-only network for vmnet1.

Please specify a name for this network. [HostOnly] vm-hostonly

配置使用NAT的网络名称，例如 vm-hostonly ，该名称将在创建和配置虚拟机时使用，请输入一个方便记忆的名称。

4.12

Do you want this program to probe for an unused private subnet? (yes/no/help) [yes]

是否自动配置HostOnly使用的子网，一般选择自动配置了，除非你希望对子网进行规划，通常会自动配置 172.16.*.* 这样的子网。

4.13

Do you wish to configure another host-only network? (yes/no) [no]

是否需要配置另外一个HostOnly网络，通常不需要。

4.14

Please specify a port for remote connections to use [902]

指定远程连接端口，VMware Server安装完成后，可通过其一套Web界面进行访问，在这套界面中，有一个 Console（控制台）的功能，该功能通过在浏览器中安装一个插件，可以实现通过浏览器查看和管理被安装的虚拟机（如果你用过rdesktop、symantec pc-anywhere或KVM，你应该明白我在说什么），这个插件需要通过服务器上的这个端口获得数据（所以，如果你的宿主机前有防火墙，需要开通此端口的TCP协议），一般我们就用缺省的端口就好了，除非你的端口已经被占用，BTW，查看端口被谁打开的方法是：

lsof -i :902

如果出现结果，则可以通过进程号获得什么进程打开了此端口。

4.15

Please specify a port for standard http connections to use [8222]

同上，web访问界面使用的http端口，安装完成后，你可以通过 http://www.xxx.com:8222 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。

4.16

Please specify a port for secure http (https) connections to use [8333]

同上，web访问界面使用的https端口，安装完成后，你可以通过 https://www.xxx.com:8333/ui 来访问 VMware Server的Web管理界面，需要在防火墙内打开此端口的TCP协议。

4.17

The current administrative user for VMware Server  is ”.  Would you like to specify a different administrator? [no]yes

这里我们一般不能用缺省选项，应该选择 yes ，这个配置的意思是说当前 VMware Server 的管理员尚未指定（”的意思可不就是没指定嘛，当然，也可能有别的含义，不过我们不是测试人员，没有必要都搞明白），是否需要指定–当然要指定了。

4.18

Please specify the user whom you wish to be the VMware Server administrator

选择宿主机上的一个已有的用户作为其管理员，这里的用户是指linux系统的用户，当然应该有密码了，一般为了安全起见，应该创建一个单独的用户，例如 vmware 什么的，并指定其密码，不过可能不需要有 home 目录，也最好不给它 shell。

4.19

In which directory do you want to keep your virtual machine files?

[/var/lib/vmware/Virtual Machines]

指定虚拟机存放的目录，即其 DataStore 的概念，这里可能会占用较多的空间（看你装多少操作系统，系统中有多少内容了），所以最好放置在有足够空间的位置，一般我们的 var 或 home 通常会是空间比较大的地方，所以，看你自己的情况了。

4.20

The path “/home/vmware/Virtual Machines” does not exist currently. This program

is going to create it, including needed parent directories. Is this what you

want? [yes]

如果你指定了一个不存在的目录，会提示你是否要自动创建，当然要创建了。

4.21

Please enter your 20-character serial number.

Type XXXXX-XXXXX-XXXXX-XXXXX or ‘Enter’ to cancel:

毕竟，只是一个free的软件，序列号还是需要的，在 VMware注册的时候会在激活邮件中获取到，你应该将其妥善保存好。

4.22

In which directory do you want to install the VMware VIX API binary files?

[/usr/bin]

选择 VMware VIX API binary files 的安装位置，VMware VIX API 是很有用的东东，特别是在你的虚拟机比较多，需要自己写脚本进行管理的情况下，你可以在脚本中通过调用VMware VIX API，完成虚拟机的启动、关闭、备份等日常工作，以后我们会对此进行专门的说明，请参看 VMware VIX API。

4.23

In which directory do you want to install the VMware VIX API library files?

[/usr/lib/vmware-vix/lib]

选择 VMware VIX API library files 的安装位置。

4.24

The path “/usr/lib/vmware-vix/lib” does not exist currently. This program is

going to create it, including needed parent directories. Is this what you want?

[yes]

是否自动创建 VMware VIX API library files 的安装目录，当然了。

4.25

In which directory do you want to install the VMware VIX API document pages?

[/usr/share/doc/vmware-vix]

指定VMware VIX API 的文档的安装位置。

4.26

The path “/usr/share/doc/vmware-vix” does not exist currently. This program is

going to create it, including needed parent directories. Is this what you want?

[yes]

是否自动创建 VMware VIX API 文档的安装目录，当然了。

4.27

The installation of VMware VIX API 1.6.2 build-156745 for Linux completed

successfully. You can decide to remove this software from your system at any

time by invoking the following command: “/usr/bin/vmware-uninstall-vix.pl”.

告诉你 VMware VIX API 已安装完成，可以在以后通过 /usr/bin/vmware-uninstall-vix.pl 进行卸载，如果你以后不想再使用 VMware Server（你可能有了更好的选择，例如开源的 KVM），你可以先使用 /usr/bin/vmware-uninstall-vix.pl 卸载 VIX API，然后使用rpm卸载VMware Server。

4.28

基本的配置过程就是以上这些，在配置完成后，系统会尝试自动启动虚拟机，并会在系统重启时自动启动 VMware Server。

5. 使用 VMware Server

作为安装和配置之后，下面我们来介绍一下如何使用 VMware Server。

5.1 配置防火墙

首先，如果你的宿主机上安装有防火墙，并且希望通过其它机器上的浏览器访问宿主机上的管理界面，需要在宿主机上的防火墙上进行设置，假设你使用 iptables，你可以

vi /etc/sysconfig/iptables

在其中适当的位置加入

-A RH-Firewall-1-INPUT -m state –state NEW -m multiport -p tcp –dport 902,8222,8333 -j ACCEPT

然后重启服务

service iptables restart

5.2 在浏览器中访问 VMware Server

在浏览器中输入 http://www.xxx.com:8222 ，其中 www.xxx.com 是你的宿主机的地址，如果你在本机访问，可以使用localhost ，此时，页面会自动跳转至 https://www.xxx.com:8333/ui ，并报出提示

www.xxx.com:8333 使用了无效的安全证书。

这是由于使用了非正式发布的证书，可以让浏览器接收该证书，当然，如果你愿意，也可以加入正式的证书，请参考 在VMware Server 中使用证书。需要注意的是，有时候会无法打开loading页面，例如在 firefox 的错误控制台内可以看到类似这样的错误

Error: vmtn is not defined

Source File: https://vm.myserver.com:8333/ui/

Line: 130

Error: unterminated string literal

Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.jslib.js

Line: 1, Column: 120

Source Code:

d(),TIMEOUT:vmtn.util.EventObject.nextId()});var $super=$class.parent.prototype;})(); (function(){var $class=new $Class(“vmtn.

Error: syntax error

Source File: https://vm.myserver.com:8333/ui/jslib-1.0.128374/.wbc.js

Line: 1, Column: 77

Source Code:

is._config.getFinalData();},setSelection:function(selection){var oldSelection=

Error: vmtn is not defined

Source File: https://vm.myserver.com.ch:8333/ui/

Line: 122

这时，我们清空浏览器的缓存，再重新访问，一般就可以解决问题了（如果你有更好的办法，请mail我：wanxiren@gmail.com ）。

5.3 创建虚拟机
按照提示一步一步创建就可以了，需要注意的是，最好在创建时选择的CPU多一些，内存也大一些，将来在真正使用时可以从大改小，但不能从小改大。对于虚拟机来说，配置稍微多一些的内存是必要的，这可以尽量避免换页操作，从而减少IO操作，以提升虚拟机性能。

5.4 安装操作系统
将虚拟机关机，然后创建CD/DVD drive，选择你要安装的操作系统镜像文件（iso文件），然后开机，即可进行操作系统的安装工作。

5.5 复制虚拟机
如果我们已经安装好了一个虚拟机，为了方便下次安装，可将其复制出来，对虚拟机关机，然后到虚拟机的数据目录下找到刚才装好的操作系统，将整个目录进行备份即可。下次安装时，将该目录复制到虚拟机的数据目录下，改名成你希望的名字，然后在web管理界面中创建虚拟机（创建时直接选择刚才复制过来的目录）并开机，在开机时，有一个重要的提示，就是问你这个虚拟机是“移动过来的”还是“复制过来的”，一般应该选择是“复制过来的”（这样会对其重新进行配置），然后就可以使用了。

5.6 使用Console
在虚拟机开机后，点击 Console 标签，第一次点击时会提示是否需要“Install plug-in”，这个插件就是在浏览器中操作虚拟机的界面，安装之，重启浏览器，就可以访问虚拟机了。

截图：

demo见：http://www.iamued.com/demo/Mselect/

代码：https://github.com/iamued/Mselect

也借此机会尝试用了一下git 貌似还不错哦~

今天帮同事修改一个Tip提示的效果 提示中 需要用到当前元素的几个属性，就帮忙改了改之前的demo
这里是一个局部实现 可以参考
查看临时Demo
实际应用的案例：http://www.iamued.com/demo/simpletip/template/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>一个jquery的小模板机制-我是UED</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a id="test" price="110" name="iphone" onmouseover="test();" href="#">这是一个A元素 有2个属性 鼠标放上来看看</a>

临时Demo的部分代码：
<script type="text/javascript">
	function test(){
		var testString="价格为{price}元，我是{name}"
		alert(testString.replace(/{([^{}]+)}/g,function(word){
			var _attr=word.replace(/({|})+/g,"");
			return $("#test").attr(_attr);
		}));

	}
</script>
</body>
</html>

查看临时Demo
实际应用的案例：http://www.iamued.com/demo/simpletip/template/

http://www.google.com/intl/zh-CN/events/devfests/2010/

还是收获不少的，google还赠送了一些小礼品 T-shirt、包包、笔记本、钥匙链等

几个主题主要围绕的还是HTML5+CSS3 还有一些chrome的深入讲解

相关PPT目前还没有得到，请持续关注，之后如果拿到PPT会持续更新的：）

顺便问下：谁知道昨天最后讲解的那个测试兼容性的 extensions 叫什么？

精品学习网（北京）诚招视觉设计师

精品学习网（北京）诚招WEB前端制作工程师

公司介绍：http://www.51edu.com/aboutus/

工作地点：北京海淀魏公村

投递信箱：liug@51edu.com

QQ:76373