Apache 配置虚拟主机的方式

发表于 | 分类于 | | 阅读次数:

前言

我们在进行前端开发的时候，有时候在本地开发的时候，会进行域名host，以便进行绕过服务端的一些CORS校验，这时候我们只需要在hosts文件进行域名host指定即可。
比如本地开发的html路径是：

1
http://127.0.0.1/airdroid_user/intl_web.htm

然后这个页面涉及到登录，然后服务端要求ajax post 的时候，会进行 cors 校验，要求origin一定要 airdroid.com 开头的，这样子开发的时候，就会遇到问题。因此我们需要在hosts进行指向，将 127.0.0.1 改成是 airdroid.com 结尾的，比如：

1
127.0.0.1 zach.airdroid.com

这样就会将本地的 127.0.0.1 指向你设置的那个域名。 就可以登录成功了。

但是有时候我们不仅仅只是域名指向，甚至还包括目录指向，比如我的开发目录就是：

1
http://127.0.0.1/airdroid_user/workspace/intl_web.htm

但是我需要将其映射成：

1
http://zach.airdroid.com/intl_web.htm

这个地址，这种情况一般是出现在线上调试的时候会有，比如线上就是这个页面，然后调试的时候，需要把这个页面指向我们的开发目录的对应的页面。但是很明显目录是不一样的，这时候就没办法简单的直接用hosts来执行，因为hosts文件只能起到对域名的映射，没法对目录进行映射。
当然，还是有很多的方式可以做到这种映射，比如 nginx 的配置， Apache 的虚拟主机配置， node 的反向代理等等。这边讲的是怎么用Apache 配置虚拟主机的方式来实现。

配置过程

修改httpd.conf文件

打开appserv的安装目录，找到httpd.conf文件，分别去掉下面两行文字前面的#号。

1
#LoadModule vhost_alias_module modules/mod_vhost_alias.so

去掉#意思是启用apache的虚拟主机功能。

1
#Include conf/extra/httpd-vhosts.conf

去掉这一行的#意思是从conf/extra/httpd-vhosts.conf这个文件导入虚拟主机配置

配置httpd-vhosts.conf

直接对这个文件进行编辑，默认这个文件只会有一些注释，还没有实质内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
NameVirtualHost 127.0.0.1

<VirtualHost localhost>
    DocumentRoot "D:/wamp/www"
    ServerName localhost
</VirtualHost>

<VirtualHost web_www.airdroid.com>
    DocumentRoot "F:/airdroid_code/airdroid_web_www"
    ServerName web_www.airdroid.com
</VirtualHost>

<VirtualHost new_www.airdroid.com>
    DocumentRoot "F:/airdroid_code/airdroid_web_www/build/no_gzip"
    ServerName new_www.airdroid.com
</VirtualHost>

可以看到我这边有进行了两个指向，其中一个还包括开发目录的路径。

修改hosts地址

接下来就在 hosts 文件增加这几行：

1
2
3
127.0.0.1       localhost
127.0.0.1 web_www.airdroid.com
127.0.0.1 new_www.airdroid.com

注意，这边有个细节，就是这边也要同时设置，localhost，不然你输localhost 的时候，就会指向到 其他两个去
这样就ok了，截图如下：
1
1
1

看起来没问题。

优化，写在 alias 更好

后面发现，不需要写在 httpd-vhosts.conf 文件里面。写在这里面任意一个别名文件都可以
1
比如，我新建了一个 kbz.conf 文件，然后把 hpptd-vhost.conf 的内容移进去
1
最后重启下 Apache ，发现也是可以的。而且还不污染那个总的 httpd-vhosts.conf 文件。